I wanted to figure out how to make objects follow a certain paths given by equations. I began with a simple equation where a square follows a direct path (linear equation) and then I moved towards exponential equations. Afterwards I made it so that the squares would converge to distance where you would click your mouse to. In order to add a small fade effect I made it so the colors became darker with each step that the square took. The resulting picture shows the different paths that an object could take to the same point due to the different equations they were given.

 

float c;
float r;
float b;
float o;

float beginX = 0; // Initial x-coordinate
float beginY = 0; // Initial y-coordinate
float endX = 0; // Final x-coordinate
float endY = 0; // Final y-coordinate
float distX; // X-axis distance to move
float distY; // Y-axis distance to move
float exponent = 8; // Determines the curve
float x = 0.0; // Current x-coordinate
float y = 0.0; // Current y-coordinate
float step = 0.001; // Size of each step along the path
float pct = 0.0; // Percentage traveled (0.0 to 1.0)

float GbeginX = 0; // Initial x-coordinate
float GbeginY = 0; // Initial y-coordinate
float GendX = 0; // Final x-coordinate
float GendY = 0; // Final y-coordinate
float GdistX; // X-axis distance to move
float GdistY; // Y-axis distance to move
float Gexponent = 1; // Determines the curve
float Gx = 0.0; // Current x-coordinate
float Gy = 0.0; // Current y-coordinate

float BbeginX = 0; // Initial x-coordinate
float BbeginY = 0; // Initial y-coordinate
float BendX = 0; // Final x-coordinate
float BendY = 0; // Final y-coordinate
float BdistX; // X-axis distance to move
float BdistY; // Y-axis distance to move
float Bexponent = 2; // Determines the curve
float Bx = 0.0; // Current x-coordinate
float By = 0.0; // Current y-coordinate

float YbeginX = 0; // Initial x-coordinate
float YbeginY = 0; // Initial y-coordinate
float YendX = 0; // Final x-coordinate
float YendY = 0; // Final y-coordinate
float YdistX; // X-axis distance to move
float YdistY; // Y-axis distance to move
float Yexponent = 3; // Determines the curve
float Yx = 0.0; // Current x-coordinate
float Yy = 0.0; // Current y-coordinate

void setup() {
frameRate(144);
size(1920, 1080);
noStroke();
distX = endX – beginX;
distY = endY – beginY;
GdistX = GendX – GbeginX;
GdistY = GendY – GbeginY;
BdistX = BendX – BbeginX;
BdistY = BendY – BbeginY;
YdistX = YendX – YbeginX;
YdistY = YendY – YbeginY;
}

void draw() {
fill(0,2);
rect(0, 0, width, height);
pct += step;

if (pct < 1.0) {
x = beginX + (pct * distX);
y = beginY + (pow(pct, exponent) * distY);
}

fill(255, 0, 0);
rotate(r);
rect(x, y, 20, 20);
r = r + 0.2;

if (pct < 1.0) {
Gx = GbeginX + (pct * GdistX);
Gy = GbeginY + (pow(pct, Gexponent) * GdistY);
}

fill(0, 255, 0);
rotate(c);
rect(Gx, Gy, 20, 20);
c = c + 0.5;

if (pct < 1.0) {
Bx = BbeginX + (pct * BdistX);
By = BbeginY + (pow(pct, exponent) * BdistY);
}

fill(0, 0, 255);
rotate(b);
rect(Bx, By, 20, 20);
b = b + 0.1;

if (pct < 1.0) {
Yx = YbeginX + (pct * YdistX);
Yy = YbeginY + (pow(pct, exponent) * YdistY);
}

fill(255, 0, 255);
rotate(b);
rect(Yx, Yy, 20, 20);
o = o + 0.05;

}

void mousePressed() {
pct = 0.0;
GbeginX = Gx;
GbeginY = Gy;
GendX = mouseX;
GendY = mouseY;
GdistX = GendX – GbeginX;
GdistY = GendY – GbeginY;

beginX = x;
beginY = y;
endX = mouseX;
endY = mouseY;
distX = endX – beginX;
distY = endY – beginY;

BbeginX = Bx;
BbeginY = By;
BendX = mouseX;
BendY = mouseY;
BdistX = BendX – BbeginX;
BdistY = BendY – BbeginY;

YbeginX = Yx;
YbeginY = Yy;
YendX = mouseX;
YendY = mouseY;
YdistX = YendX – YbeginX;
YdistY = YendY – YbeginY;
}

void keyPressed(){

// try holding the up button

if (keyCode==UP){
for (int i = 800; i < 1920; i = i+20) {
for (int j = 500; j < 1080; j = j+50) {
strokeWeight(20);
fill(random(255),random(255),random(255));
ellipse(i, j,20,20);
}
}
}

else{
background(0,2);
}

//clears the background with any key press
}