Using colors with variables

Processing Coding Questions
14

Take your time, try to understand the logic behind the code, code simple example to adapt the logic to your specific problem and then include it to your project.

Take it step by step and you will manage :slight_smile:

I’ll try to give you more details:

What really interests you is the interpolateStrokes() function.
It takes 4 arguments:

  • prevX: the X position of the last circle you draw
  • prevY : the Y position of the last circle you draw
  • newX: the X position of the new circle you want to draw
  • newY: the Y position of the new circle you want to draw
PVector dir = new PVector(newX - prevX, newY - prevY);

Here you create an arrow that starts in your previous circle and point to the new one you want to draw

int maxLength = (int)pow(dir.mag(), 2);

Here you just compute the distance between your 2 circles. The power of 2 is facultative: I’m using it to avoid to compute a square root in the if statement later on.

dir.normalize();

Here, I’m taking the previous big arrow and change its length to be one (but keeping the direction so it starts at the previous circle and still point in the direction of the new one but without being able to reach it).

dir.mult(step);

Now you multiply it by the step size so its length will be the step size. It will now point right were you should draw the next cricle

PVector pos = new PVector(prevX, prevY);

This vector will keep track of where you should draw your circles. You set it first to be where the previous circle is.

pos.add(dir);

Now you can add the previous vector to get the position of the next circle you want to draw.

while ((pos.x - prevX) * (pos.x - prevX) + (pos.y - prevY) * (pos.y - prevY) < maxLength) {
  ellipse(pos.x, pos.y, 20, 20);
  pos.add(dir);
}

Finally you draw the ellipse at the new position and find the next position by adding the previous vector.
You do it until the distance between the previous circle and the one you want to draw becomes higher than the distance between the previous circle and where you wanted your last circle to be.

Hope it clears out some stuff