Goals

• Linear Movement
• Basic
• Angle
• Changing Angles
• Timing
• Wavy Movement
• Sin or Cos?
• Circular
• Making Decisions
• Death and Decay
• Other Movement
• Attract and Repel
• Perlin Noise

Resources

http://processing.org/learning/trig/
http://processing.org/learning/topics/bouncybubbles.html
http://processing.org/learning/topics/reflection1.html

Linear Movement

Linear movement is the most basic movement type we can have. There are however several ways to program linear movement.

First we're going to take a look at a basic linear movement:

float xPos = 20, yPos = 200; void setup() { size(400, 400); fill(0); } void draw() { background(255); ellipse(xPos, yPos, 20, 20); xPos++; }

Angle Based Linear Movement

Now if we want to move linearly in the direction of some angle, let's call it "angle" then we need to update the xPos and yPos coordinate variables (for whatever shape we're moving) using the cos and sin of the "angle" angle variable.

Take a look:

float xPos = 0, yPos = 200, angle = -PI/8; void setup() { size(400, 400); fill(0); } void draw() { background(255); xPos += cos(angle); yPos += sin(angle); ellipse(xPos, yPos, 20, 20); }

Changing Angles

What about using a data source like the mouse position to generate the angle? It's still linear movement, but much more interesting.

float xPos = 200, yPos = 200, angle = -PI/8; void setup() { size(400, 400); fill(0); } void draw() { background(255); angle = atan2(mouseY - yPos, mouseX - xPos); xPos += cos(angle); yPos += sin(angle); ellipse(xPos, yPos, 20, 20); }

Timing Linear Movement

We can use a simple integer as a timer for any motion (or in any object). We don't have to time only motion, we can time a fill, an animation, practically anything.

Check out the timer and where it's used in this example:

float xPos = 200, yPos = 200, angle = -PI/4; int timer = 0; void setup() { size(400, 400); fill(0); } void draw() { background(255); xPos += cos(angle); yPos += sin(angle); fill(timer * 6); ellipse(xPos, yPos, 20, 20); timer++; if (timer > 40) { angle += PI/2; timer = 0; } }

Wavy Movement

Wavy movement is usually performed by using sin and cos for the direction to travel but in a slightly different way.

Take a look at this simple example which could use sin or cos:

float xPos = 200, yPos = 200, angle = 0; void setup() { size(400, 400); fill(0); } void draw() { background(255); ellipse(xPos + 40 * sin(angle), yPos, 20, 20); angle += 0.04; }

Circular Movement

If we combine cos and sin to effect the x and y positions at the same time, using the same angle, we will get a circular movement.

Have a look:

float xPos = 200, yPos = 200, angle = 0; void setup() { size(400, 400); fill(0); } void draw() { background(255); ellipse(xPos + 40*cos(angle), yPos + 40*sin(angle),20,20); angle += 0.04; }

Notice the number 40 in there? That's a chosen number, it could be anything. Since sin and cos are two functions that return numbers oscillating between ( -1, 1 ), that number becomes the radius of the circular motion in this example.

Also note that the angle is always increasing at a constant rate. We could say the angle is increasing linearly with time. Why 0.04? It's a nice number that makes the movement smooth... That's all. Changing this number would simply make the circles faster or slower.

Vehicles Making Decisions

So what if we can move back and forth or in a circle? Well things become more interesting when we start changing the location and adding in a little bit of random behavior.

float xPos = 200, yPos = 200, angle = 0; speed = 0.4; int dir = 1; void setup() { size(400, 400); fill(0); } void draw() { background(255); xPos += speed * cos(angle); yPos += speed * sin(angle); angle += 0.04 * dir; if (random(0, 16) < 1) { dir *= -1; } ellipse(xPos, yPos, 20, 20); }

Two things to notice here:

The use of an integer to remember which way we should be increasing our angle. The "dir" variable is simply 1 or -1 and that will control how our angle is updated.

The other is the use of the random function. Notice it's usage here: if (random(0, 16) < 1) This use will give a 1 / 16 chance of the dir variable getting changed. That's what gives this dot it's random walk.

Death and Decay - Timing

So how would we give our little vehicle a lifespan. Eventually it walks completely offscreen, but what if we wanted to control how long it would be until that happened? Well we'd need to time it somehow using an integer.

float xPos = 200, yPos = 200, angle = 0; speed = 0.4; int dir = 1, timer = 0; void setup() { size(400, 400); noStroke(); background(255); } void draw() { background(255); fill(timer); xPos += speed * cos(angle); yPos += speed * sin(angle); angle += 0.04 * dir; if (random(0, 16) < 1) { dir *= -1; } ellipse(xPos, yPos, 20, 20); timer++; if (timer > 255) { xPos = yPos = 200; timer = 0; } }

Notice how when the timer reaches 255, we reset the xPos and yPos to the center, and reset the timer to 0 so the whole loop will happen again with this object.

Attract and Repel

We've seen a basic attraction equation before, but let's take another look:

float xPos = 200, yPos = 200; void setup() { size(400, 400); fill(0); } void draw() { background(255); xPos += (mouseX - xPos)/30; yPos += (mouseY - yPos)/30; ellipse(xPos, yPos, 20, 20); }

Notice what makes the attraction happen? It's the vector (distance and direction) to the mouse position divided by some number (30). So what we are adding to the xPos and yPos is a piece of that vector to the mouse. The more we divide this vector, the slower the object will move towards the mouse?

How about repulsion?

float xPos = 200, yPos = 200; void setup() { size(400, 400); fill(0); } void draw() { background(255); xPos -= (mouseX - xPos)/300; yPos -= (mouseY - yPos)/300; ellipse(xPos, yPos, 20, 20); }

Notice that instead of adding the vector in the direction of the mouse, we're subtracting it from the xPos and yPos variables. Also, we had to increase the divisor (30) to 300 in this case, because otherwise our object would move too fast and would leave the screen before we had a chance to find out what happened.

There is another way to do repulsion and it has to do with how we calculate the vector:
xPos += (xPos - mouseX)/300;
yPos += (yPos - mouseY)/300;
Now the vector faces the opposite direction. When we add this to our object (not subtracting) we're actually adding a vector facing away from the mouse.

Frictionless Physics Attraction (orbiting)

Attraction can be physics based, including a mass and force.

Here is an example using PVectors:

PVector pos, vel, acc; float mass, force; void setup() { size(600, 600); pos = new PVector(random(width), random(height)); vel = new PVector(); acc = new PVector(); mass = 1; force = 1; } void draw() { background(255); //attraction to the center of the screen PVector diff = PVector.sub(new PVector(width/2, height/2), pos); //the edge between our object and the center of the screen float distance = diff.mag(); //the distance between our object and the center if (distance > 32.0) { //as long as we're not within 32 pixels of the center diff.div(distance); //the further we are, the less attraction diff.mult(mass * force); //multiply by the mass of our object acc.add(diff); //add to acceleration } vel.add(acc); //add acceleration to velocity acc.set(0,0,0); //reset acceleration pos.add(vel); //update position //ellipse ellipse(pos.x, pos.y, 20, 20); }

Perlin Noise

Perlin noise is a smooth random noise function. Have you ever used the "clouds" filter in photoshop? Then you've seen Perlin noise.

Let's take a look at drawing some Perlin noise:

void setup() { size(400, 400); background(255); noStroke(); } void draw() { int bit = 8; for (int i = 0; i < width; i += bit) { for (int j = 0; j < height; j += bit) { float bright = noise(i * 0.005, j * 0.005); fill(bright * 255); rect(i, j, bit, bit); } } }

Now imagine if we controlled the angle of some object based on the brightness of the noise where the object's position was?

float xPos = 200, yPos = 200; void setup() { size(400, 400); background(255); noStroke(); } void draw() { float angle = 45 * noise(xPos * 0.005, yPos * 0.005); xPos += cos(angle); yPos += sin(angle); int bit = 32; for (int i = 0; i < width; i += bit) { for (int j = 0; j < height; j += bit) { float bright = noise(i * 0.005, j * 0.005); fill(bright * 255); rect(i, j, bit, bit); } } fill(255, 0, 0); ellipse(xPos, yPos, 16, 16); }

int newNoiseSeed = (int) random(100000); int maxBall = 256; ArrayList<Ball> objects = new ArrayList<Ball>(); void setup() { size(600, 600); background(255); smooth(); } void keyPressed() { if (key == ' ') background(255); } void draw() { if (mousePressed && objects.size() < maxBall) { objects.add( new Ball( mouseX, mouseY )); } for (int i = 0; i < objects.size(); i++) { Ball b = objects.get(i); b.addPerlin(); b.update(); b.drawMe(); } } class Ball { PVector pos, pPos, vel, acc; float damp, weight; color c; Ball(float xPos, float yPos) { pos = new PVector(xPos, yPos); pPos = new PVector(0, 0); vel = new PVector(0, 0); acc = new PVector(0, 0); damp = 0.99; weight = 1; c = color(0, random(128), random(128, 255), 16); } void update() { vel.add(acc); vel.mult(damp); pPos.set(pos.x, pos.y, 0); pos.add(vel); acc.set(0, 0, 0); outside(); } void outside() { if (pos.x > width || pos.x < 0 || pos.y > height || pos.y < 0) { objects.remove(this); }; } void addPerlin() { float depth = 0.006; float bright = 15 * noise(pos.x * depth, pos.y * depth, newNoiseSeed); PVector perlin = new PVector( cos(bright), sin(bright) ); //perlin.mult(0.04); acc.add( perlin ); vel.limit(4); } void drawMe() { stroke(c); strokeWeight(weight); line(pos.x, pos.y, pPos.x, pPos.y); } }