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.

**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 **

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); } |