10 – 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. Changes in x and y locations are made for each time step which is usually a loop of draw.
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

//variables for location of our ellipse
float x=50;
float y = 50;
//variables that change location values
float xspeed, yspeed;
 
void setup() {
  size(100, 100);
}
 
void draw() {
  background(0);
  //randomly generate values to add to location (this is speed)
  xspeed=random(-1, 1);
  yspeed=random(-1, 1);
 
  //change x and y by these little random values
  x=x+xspeed;
  y=y+yspeed;
  ellipse(x, y, 20, 20);
}

And below is another example how to do this. Note 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);
}
'+
1
'+
2 - 3
4 - 5
6 - 7
8 - 9
10 - 11
12 - 13
13 - 14
[x]