Interactive Series: Go here

Welcome back to my interactive series!
This one is kind of fun, but doesn’t require any mouse movement. It’s just a bunch of lines, a circle, and some code. Also, you just have to click. It’s really fun.

So, first, we set up the program, along with some universal variables:

float x;
float y;
float easing;
float x2, y2;
void setup() {
  size(700, 700); 
  noStroke(); 
  ellipseMode(CENTER);
  pixelDensity(2);
  background(51);
}

So yeah, that’s the start. x and y are supposed to represent the starting point, and x2 and y2 represent the ending point. After that, we start to draw the program:

void draw() { 
  fill(255);
  background(51);
  stroke(255);
  ellipse(x2, y2, 10, 10);

Seems pretty simple, right? Now, here comes the hard part. We create a target for an ellipse to travel to. It’s the same as x2, but to make life easier, we labeled it targetX. Also, we wanted to create the impression that it was slowing down as we got closer to the target, so we made a variable called easing to represent that.
The variable dx is there to represent the distance from the targetX to the regular x, or our starting point. the x increases by dx * easing, which is the part that creates the impression of it slowing down.

  float targetX = x2;
  float dx = targetX - x;
  x += dx * easing;

The same goes for the y-coordinates, but the variables are tweaked a little:

  float targetY = y2;
  float dy = targetY - y;
  y += dy * easing;

After that, we do some more complex stuff, with pushMatrix();, popMatrix();, and atan2();. The atan function is used for rotation, and the push and pop matrix functions are to make more circles.

  pushMatrix();
  translate(x, y);
  noStroke();
  rotate((atan2(targetX - x, targetY - y)) * -1);
  fill(255, 0, 0);
  ellipse(-.6,-.6, 30, 30);
  fill(0, 0, 255);
  ellipse(.6,.6, 30, 30);
  fill(255);
  ellipse(0, 0, 30, 30);
  popMatrix();
  stroke(255);

Then, we make some lines that connect parts of the screen with others. It’s just there because… it looks cool.

  line(x2, y2, x, y);
  line(x, 0, x2, height);
  line(0,y, width, y2);
  line(0, 0, x, y);
  line(width, height, x2, y2);

Then, we put in the function to make the mouse clicks interactive. Clicking the mouse makes the travel process faster, and holding it down speeds the whole thing up for the time that you hold it down.

  if (mousePressed){
    easing = .7;
  }
  else{
    easing = .1;
  }

Then, this is the equation that states that the large dot has officially reached its destination and can go to a new location randomly:

  if(sqrt(pow(dx, 2)     + pow(dy, 2))  < 2){
    x2 = random(width);
    y2 = random(height);
  }
}

And so, after rigorous explaining, this is the final result. (A circle around the mouse represents a click.)

The finished product.

I think that this would make a really good art exhibit at an art museum. Let me know what you guys think.

(Highlight text above and comment on it!)

So yeah. See you next time with another project

Code on GitHub here.