A simple processing.js animation.
[processing]
// Global variables
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;
void setup(){
size( 600, 320 );
strokeWeight( 3 );
frameRate( 15 );
X = width / 2;
Y = height / 2;
nX = X;
nY = Y;
gear = loadImage("/sites/default/files/styles/large/public/gear2.png");
belt = loadImage("/sites/default/files/styles/large/public/belt.png");
}
//Variables
float angle;
float cosine;
PImage gear;
PImage belt;
void draw(){
background(102);
radius = radius + sin( frameCount / 4 );
// Track circle to new destination
X+=(nX-X)/delay;
Y+=(nY-Y)/delay;
// Fill canvas grey
background( 80 );
// Set fill-color to blue
fill( 0, 121, 184 );
// Set stroke-color white
stroke(255);
image(belt, 130-gear.width/2, 160-gear.height/2);
angle = angle + 0.05;
translate(130,160);
pushMatrix();
rotate(angle);
image(gear, -gear.width/2, -gear.height/2);
popMatrix();
translate(369,0);
pushMatrix();
rotate(angle);
image(gear, -gear.width/2, -gear.height/2);
popMatrix();
}
[/processing]
// Global variables
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;
// Setup the Processing Canvas
void setup(){
size( 600, 320 );
strokeWeight( 3 );
frameRate( 15 );
X = width / 2;
Y = height / 2;
nX = X;
nY = Y;
gear = loadImage("/sites/default/files/styles/large/public/gear2.png");
belt = loadImage("/sites/default/files/styles/large/public/belt.png");
}
//Variables
float angle;
float cosine;
PImage gear;
PImage belt;
// Main draw loop
void draw(){
background(102);
radius = radius + sin( frameCount / 4 );
// Track circle to new destination
X+=(nX-X)/delay;
Y+=(nY-Y)/delay;
// Fill canvas grey
background( 80 );
// Set fill-color to blue
fill( 0, 121, 184 );
// Set stroke-color white
stroke(255);
image(belt, 130-gear.width/2, 160-gear.height/2);
angle = angle + 0.05;
translate(130,160);
pushMatrix();
rotate(angle);
image(gear, -gear.width/2, -gear.height/2);
popMatrix();
translate(369,0);
pushMatrix();
rotate(angle);
image(gear, -gear.width/2, -gear.height/2);
popMatrix();
}