Basics of motion

Fluid motion

Fluid motion is best achieved with floats, try and work out why:

floats have decimal places, which provide more resolution, the slowest int could be 1 pixel per frame, whereas the slowest float could be....as slow as you want.

Speed and direction (Animation)

Animation is typically produced by declaring a variable, such as float x = 0;

And then another variable, often called speed:

float speed = 0.5;

Speed is typically added to x with each frame, or taken away if we want to go 'backwards'

See overleaf:

Go forward adding speed to x

float x = 0;float speed = 0.5;

void setup() { size(240, 120); smooth(); }

void draw() { background(0); x += speed; // Increase the value of x ellipse(x, 40, 30, 30); //could be a, criiter, or a rect etc, with x as its x co-orddinate}

Go forward and backwardfloat x = 0.0;float speed;int obSiz = 30;

void setup(){ //set size of window: size(240, 120);

}void draw() { background(0); if (x > width) //check x is not greater than the width of window { speed = -0.5; //if it is, decrement speed variable which is added to our x variable to make it go backwards and forwards

} else if (x < 1) //if it reaches left edge go forward { speed = +0.5;

} //draw our shapes: ellipse(x, 30, obSiz,obSiz); //draw ellipse going up and down

x += speed; // keep adding x tospeed //(this will be a minus number if we are going backwards)

}

Clever stufftiamtowodt

// Example 07-05 from "Getting Started with Processing" // by Reas & Fry. O'Reilly / Make 2010

int radius = 40;float x = 110;float speed = 0.5;int direction = 1;

void setup() { size(240, 120); smooth(); ellipseMode(RADIUS);//explained on next slide}

void draw() { background(0); x += speed * direction; if ((x > width-radius) || (x < radius)) { direction = -direction; // Flip direction } if (direction == 1) { arc(x, 60, radius, radius, 0.52, 5.76); // Face right } else { arc(x, 60, radius, radius, 3.67, 8.9); // Face left }}

ellipseMode()

The origin of the ellipse is modified by the ellipseMode() function. The default configuration is ellipseMode(CENTER), which specifies the location of the ellipse as the center of the shape. The RADIUS mode is the same, but the width and height parameters to ellipse() specify the radius of the ellipse, rather than the diameter. The CORNER mode draws the shape from the upper-left corner of its bounding box. The CORNERS mode uses the four parameters to ellipse() to set two opposing corners of the ellipse's bounding box. The parameter must be written in "ALL CAPS" because Processing is a case sensitive language.

See the Processing reference

Tweening -going from one point to another

Set up a start position and an end position

Then clalculate the tween (inbetween) positions at each frame, run the code and then change the various positions (code overleaf)

// Example 07-06 from "Getting Started with Processing" // by Reas & Fry. O'Reilly / Make 2010

int startX = 20; // Initial x-coordinateint stopX = 160; // Final x-coordinateint startY = 30; // Initial y-coordinateint stopY = 80; // Final y-coordinatefloat x = startX; // Current x-coordinatefloat y = startY; // Current y-coordinatefloat step = 0.005; // Size of each step (0.0 to 1.0)float pct = 0.0; // Percentage traveled (0.0 to 1.0)

void setup() { size(240, 120); smooth();}

void draw() { background(0); if (pct < 1.0) { x = startX + ((stopX-startX) * pct); y = startY + ((stopY-startY) * pct); pct += step; } ellipse(x, y, 20, 20);}

Friction: wemultiply speed by friction to slowthe ellipse down

/*Model realsitic movement that is subject to frictionand therefore non-uniform acceleration/deceleration. */

float velocity = 50.0; //added to y coordinatefloat friction = 0.99;

/*velocity is multiplied by friction, because friction is less than 1, friction decreases the velocity with each frame so the 'ball' slows down, until we re-boost it with a mouse press */

float y =0;

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

void draw() { background(255);

fill(255, 0, 0); ellipse(55, y, 45, 45); velocity*=friction; //this decreases velocity with every frame.

y +=velocity;//add this to y; //check for edges: if ((y>height) ||(y<0)) { velocity=-velocity;/clever flip between plus and minus values } println(velocity);}

//reboost the 'ball'void mousePressed() { velocity =10;}

We'll look at circular, trigonometric movements after readng week – moving on sine waves and in circles, see page 100 Getting Started with Processing and examples 7-12 and 7-13.