Lecture 06

Topics

  • Motion:
    • Circular Motion
    • Lissajous Figures
    • Interpolated Motion
    • Drunk Walk

And

  • Interaction
    • Mouse Interaction
    • Keyboard Interaction
  • State Machines
    • booleans that govern display conditions
  • Functional Abstraction

Homework (due Monday October 8):

  • Clicker Square exercises
  • Rubber Stamp exercises
  • Abstract Clock artwork

Circular Motion:

// Circular motion
void setup() {
  size(300, 300);
}

void draw() {
  smooth();
  // comment or uncomment background to leave trails.
  //background(127); 

  float centerX   = 150;
  float centerY   = 150;
  float amplitude = 50.0;
  float period    = 0.003;

  // Circular motion linked to the (time-varying) millis() function. 
  // Note that millis() gets large fast (1000 per second!), 
  // so we have to multiply it by a small number to work well.
  float xPos = centerX + amplitude * sin(millis()*period);
  float yPos = centerY + amplitude * cos(millis()*period);
  ellipse(xPos, yPos, 20, 20);
}

Lissajous Figures

// Lissajous figures
void setup(){
  size(300,300);
}

void draw(){
  smooth();
  //background(127);

  float centerX = 150;
  float amplitudeX = 100.0;
  float amplitudeY = 100.0;
  float periodX = 0.003;
  float periodY = periodX * 3.0; // try different ratios!

  float xPos = centerX + amplitudeX * sin(millis()*periodX);
  float yPos = centerX + amplitudeY * cos(millis()*periodY);
  ellipse(xPos, yPos, 20,20);
}

Interpolated Motion:

// Zeno's interpolated motion
float xPos;
float yPos;

void setup(){
  size(300,300);
  xPos = width/2;
  yPos = height/2;
}

void draw(){
  // on each frame, move 5% towards the target (mouse) in X, 
  //            and move 2% towards the target (mouse) in Y 

  xPos = 0.95*xPos + 0.05*mouseX; 
  yPos = 0.98*yPos + 0.02*mouseY;
  ellipse(xPos, yPos, 20,20);
}

Drunk Walk:

// Drunk walk! A random offset on each frame. 
// It creates a feedback, using the global variables xPos and yPos:
// Their current values are related to their previous values.
float xPos;
float yPos;

void setup(){
  size(300,300);
  xPos = width/2;
  yPos = height/2;
}

void draw(){
  background(127);

  // my current position is a small random offset from my previous position. 
  xPos = xPos + random(-3,3); 
  yPos = yPos + random(-3,3);
  ellipse(xPos, yPos, 20,20);
}

Back and Forth Linear Motion:

// back-and-forth motion
float xPos;
float myDirection  = 1;
void setup() {
  size(300,300); 
  xPos = 0; 
}

void draw() {
  background(255); 
  fill(255,0,0);

  float mySpeed = mouseX / 100.0;
  xPos = xPos + myDirection * mySpeed;
  if (xPos > width){
    myDirection = -1;
  }
  if (xPos < 0){
    myDirection =  1;
  }
  ellipse(xPos, 150, 40,40);
}
Posted in