How To...

Animate A Rotatng Wheel

Rotating Wheel result

This shows how to do a rotate() function on a wheel at the bottom of the robot that knows which way it is rolling. It also uses a for() loop to draw the spokes of the wheel.

PROCESSING

Rotating Wheel

// Rotating Wheel
// v1.0
//
// Global Variables
// Wheel variables
float wheelAngle = 0.0;
float wheelSpeed = 2.5;
int whichWay = 0;
// Robot variables 
float robotSpeed = 2.0;
int robotWidth = 100;
// Position variables
float newX = 250;       
float changeX = 0;      
// keyPressed Variables
int whichKeyUp =0;
int whichKeyDown = 0;

void setup() {
  size(500,500);
}

void draw() {
  background(128);
  textAlign(CENTER);
  text("USE RIGHT AND LEFT ARROW KEYS TO MOVE", width/2, 475);
  // LEFT 37
  if (whichKeyDown == 37) { 
    changeX = -robotSpeed;
  } 
  if (whichKeyUp == 37) {
    changeX = 0;
    whichKeyUp = 0;
    whichKeyDown = 0;
  }
  // RIGHT 39
  if (whichKeyDown == 39) {
    changeX = robotSpeed;
  } 
  if (whichKeyUp == 39) {
    changeX = 0;
    whichKeyUp = 0;
    whichKeyDown = 0;
  }
  // Robot
  // Wrap robot
  if(newX > width + (robotWidth/2)) {newX = -robotWidth/2;}
  if(newX < -robotWidth/2) {newX = width + (robotWidth/2);}
  newX += changeX;
  // Move robot
  translate(newX,height/2);
  // Draw robot
  drawRobot();
}

void drawRobot() {
  // Isolate the rotations
  pushMatrix();
    // Rotate the wheel clockwise, counterclockwise, 
    // or not at all when changeX = 0
    if(changeX > 0 ) { // robot moving right
      rotate(radians(wheelAngle));  // clockwise
      wheelAngle += wheelSpeed;
      whichWay = 1;
    }
    if(changeX < 0 ) {  // robot moving left
      rotate(radians(-wheelAngle)); // counterclockwise
      wheelAngle += wheelSpeed;
      whichWay = -1;
    }
    if(changeX == 0) {
      // Make sure the wheel stops in the right place
      rotate(radians(wheelAngle * whichWay)); 
    }
    // Reset rotation to 0 when you've gone around once
    if(wheelAngle >= 360) { wheelAngle = 0; }
    // Wheel
    ellipse(0,0,100,100);
    // Draw spokes
    for(int i = 0; i <= 180; i+=20) {
      // Isolate rotation
      pushMatrix();
        rotate(radians(i));
        line(-50,0,50,0);
      popMatrix();
    }
  popMatrix();
  rect(-52,-100,104,100); // robot body
}

// ------------------------------------------------------
// Get key pressed and released events
void keyPressed() {
  whichKeyDown = keyCode;
}

void keyReleased() {
  whichKeyUp = keyCode;
}

A More Complex Version

Rotating Wheel v2

Added a few bells and whistles: A face, hair, eyes, and tilt the robot body, eyes, and hair in the direction of travel

click on this button to copy code to clipboard

PROCESSING

Tilting Rotating Wheel v.1

// Rotate Wheel with Tilting
// v1.0
//
// Global Variables
// Wheel variables
float wheelAngle = 0.0;
float wheelSpeed = 2.5;
int whichWay = 0;
// Robot variables
float robotSpeed = 2.0;
int robotWidth = 100;
// Position variables
// Center robot at start
float newX = 250;       
// changeX = O = don't move, 
// changeX = robotSpeed  = move right, 
// changeX = -robotSpeed = move left
float changeX = 0;      
// keyPressed Variables
int whichKeyUp =0;
int whichKeyDown = 0;

void setup() {
  size(500,500);
}

void draw() {
  background(204);
  textAlign(CENTER);
  text("USE RIGHT AND LEFT ARROW KEYS TO MOVE", width/2, 475);  // LEFT 37
  if (whichKeyDown == 37) { 
    changeX = -robotSpeed;
  } 
  if (whichKeyUp == 37) {
    changeX = 0;
    whichKeyUp = 0;
    whichKeyDown = 0;
  }
  // RIGHT 39
  if (whichKeyDown == 39) {
    changeX = robotSpeed;
  } 
  if (whichKeyUp == 39) {
    changeX = 0;
    whichKeyUp = 0;
    whichKeyDown = 0;
  }
  // Robot
  // Wrap robot
  if(newX > width + (robotWidth/2)) {newX = -robotWidth/2;}
  if(newX < -robotWidth/2) {newX = width + (robotWidth/2);}
  newX += changeX;
  // Move robot
  translate(newX,height/2);
  // Draw robot
  drawRobot();
}

void drawRobot() {
  // Isolate the rotatations
  pushMatrix();
    // rotate the wheel clockwise, counterclockwise, 
    // or not at all when changeX = 0
    if(changeX > 0 ) { // robot moving right
      rotate(radians(wheelAngle));  // clockwise
      wheelAngle += wheelSpeed;
      whichWay = 1;
    }
    if(changeX < 0 ) {  // robot moving left
      rotate(radians(-wheelAngle)); // counterclockwise
      wheelAngle += wheelSpeed;
      whichWay = -1;
    }
    if(changeX == 0) {
      // Make sure the wheel stops in the right place
      rotate(radians(wheelAngle * whichWay)); 
    }
    // Reset rotation to 0 when you've gone around once
    if(wheelAngle >= 360) { wheelAngle = 0; }
    // Wheel
    ellipse(0,0,100,100);
    // Spokes
    for(int i = 0; i <= 180; i+=20) {
      // Isolate rotation
      pushMatrix();
        rotate(radians(i));
        line(-50,0,50,0);
      popMatrix();
    }
  popMatrix();
  // Tilt body
  if(changeX > 0 ) { // robot moving right
    rotate(radians(2.5));
  }
  if(changeX < 0 ) {  // robot moving left
    rotate(radians(-2.5));
  }
  // Rest if robot
  // Hair
  for(int i = 225; i <= 315; i+=10) {
    // Isolate rotation
    pushMatrix();
      translate(0,-100);
      // Tilt hair more than body
      if(changeX > 0 ) { // robot moving right
        rotate(radians(i + -20));
      } else if(changeX < 0 ) {  // robot moving left
        rotate(radians(i + 20));
      } else {
        rotate(radians(i));
      }
      line(-0,0,50,0);
    popMatrix();
  }
  ellipse(0,-100,100,60);
  ellipse(-20,-100,20,20);
  ellipse(20,-100,20,20);
  fill(0);
  // Point eyes in direction of travel
  if(changeX > 0 ) { // robot moving right
    ellipse(-15,-100,5,5);
    ellipse(25,-100,5,5);
  } else if(changeX < 0 ) {  // robot moving left
    ellipse(-25,-100,5,5);
    ellipse(15,-100,5,5);
  } else {
    ellipse(-20,-100,5,5);
    ellipse(20,-100,5,5);
  }
  fill(255);
  rect(-52,-100,104,100); // robot body
}

// ------------------------------------------------------
// Get key pressed and released events
void keyPressed() {
  whichKeyDown = keyCode;
}

void keyReleased() {
  whichKeyUp = keyCode;
}

Direct Link