Motion

How do we get from one point to another?

To get from one location to another, we have to step towards a destination. This is often done through a process of interpolation.
image

Easing

//Casey Reas Ben Fry
//Processing:a programming handbook for visual designers and artists
//Ex. 20.25
 
//position of our easing ball
float x = 0;
float easing = 0.02;
 
void setup(){
 size(500,100); 
 
}
 
void draw(){
 background(0);
 
 //set targetX to mouseX;
 float targetX = mouseX;
 
 //get distance from position to target
 float dx = targetX -x;
 
 //if distance is larger than 1 pixel
 if(abs(dx)>1.0){
   //make x larger by the distance x easing value
  x+= dx*easing; 
 }
 ellipse(mouseX,30,40,40);
 ellipse(x,70,40,40);
 
}

EASING 2

//Casey Reas Ben Fry
//Processing:a programming handbook for visual designers and artists
//Ex. 22.06
 
float x = 20.0; // Initial x-coordinate
float y = 10.0; // Initial y-coordinate
float targetX = 70.0; // Destination x-coordinate
float targetY = 80.0; // Destination y-coordinate
float easing = 0.05; // Size of each step along the path
 
void setup() {
  size(200, 200);
  noStroke();
  smooth();
}
 
void draw() {
  fill(0, 12);
  rect(0, 0, width, height);
  float d = dist(x, y, targetX, targetY);
 
  if (d > 1.0) { //if the distance is greater than one (we are not there yet)
//step towards the target by adding the distance between x and the target multiplied by the easing.
    x += (targetX - x) * easing;
    y += (targetY - y) * easing;
  }
 
  fill(255);
 
  ellipse(x, y, 20, 20);
}
 
void mousePressed(){
  targetX=mouseX;
  targetY=mouseY;
}

There are numerous types of easing curves that give us different types of motions. You can see examples of some here:
http://easings.net/

ORGANIC MOTION

Note in this example the line is defined by constant values and the actual coordinate system is being translated
around to draw it in different spots. This is a good example of how translate and rotate, move the coordinate system. In essence, it is the same thing as the relative position between the line and the coordinate system stay the same.

//Casey Reas Ben Fry
//Processing:a programming handbook for visual designers and artists
//Ex. 22.15
 
float x = 0.0; // X-coordinate
float y = 50.0; // Y-coordinate
float angle = 0.0; // Direction of motion
float speed = 0.5; // Speed of motion
 
void setup() {
  size(200, 200);
  background(0);
  stroke(255, 130);
  randomSeed(121); // Force the same random values
}
 
void draw() {
  angle += random(-0.3, 0.3);
  x += cos(angle) * speed; // Update x-coordinate
  y += sin(angle) * speed; // Update y-coordinate
  translate(x, y);
  rotate(angle);
  line(0, -10, 0, 10);
}

Exercise:
Can you write some conditionals for x and y so that the lines are not able to exit the screen? (hint: it’s the same as doing it for an example where the x and y are the location of a shape.)

TRIGONOMETRIC MOTION

p8O4P

This animation above shows the relationship between the x and y coordinates on a unit circle, and sin and cos functions. We can use values from sin and cos (which always produce numbers between -1 and 1) to give shapes motion.

//Casey Reas Ben Fry
//Processing:a programming handbook for visual designers and artists
//Ex. 22.10
 
float angle = 0.0; // Current angle
float speed = 0.1; // Speed of motion
float radius = 40.0; // Range of motion
 
void setup() {
  size(100, 100);
  noStroke();
  smooth();
}
 
void draw() {
  fill(0, 12);
  rect(0, 0, width, height);
  fill(255);
  angle += speed;
  float sinval = sin(angle); //sinval varies between -1 and 1
  float yoffset = sinval * radius;
  ellipse(50, 50 + yoffset, 80, 80);
}