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 backward float 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 stuff tiamtowodt

// Example 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 from "Getting Started with Processing" // by Reas & Fry. O'Reilly / Make 2010 int startX = 20; // Initial x-coordinate int stopX = 160; // Final x-coordinate int startY = 30; // Initial y-coordinate int stopY = 80; // Final y-coordinate float x = startX; // Current x-coordinate float y = startY; // Current y-coordinate float 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: we multiply speed by friction to slow the ellipse down /* Model realsitic movement that is subject to friction and therefore non-uniform acceleration/deceleration. */ float velocity = 50.0; //added to y coordinate float 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.