Processing: Ellipse mouse follow without overlap

Question

I am a complete beginner with Processing, and trying to get a row of ellipses to follow the path of the mouse with their edges touching, but not overlapping.

My first exercise was to track the mouse history in an array using a line, the commented out line adds an ellipse at each index as well:

ArrayList <PVector> history;
float preX; 
float preY;

void setup() {
  size(1024, 1024);
  history = new ArrayList <PVector> ();
}

void draw() {
  background(255);

  for(int i=1; i<history.size(); i++){
    //ellipse(history.get(i).x, history.get(i).y, 50,50);

      PVector pointA = history.get(i-1);
      PVector pointB = history.get(i);
      line(pointA.x, pointA.y, pointB.x, pointB.y);
  }
}

void mouseDragged() {
  preX= mouseX;
  preY= mouseY;
  history.add(new PVector(mouseX,mouseY));
}

I think I should define a radius variable and use dist() to calculate the distance between current mouse position and the last ellipse that was drawn along the mouse history, then use an if statement to only draw the ellipse if that distance == radius*2, but get very stuck when I try to translate that into Processing code. Can anyone help get me started? I'm having a lot of trouble finding tips elsewhere - Even just a push in the right direction would be much appreciated!

Answer 1

I think I should define a radius variable and use dist() to calculate the distance between current mouse position and the last ellipse that was drawn along the mouse history, then use an if statement to only draw the ellipse if that distance == radius*2

That sounds like a very good plan. The best advice I can give you is to break your problem down into smaller pieces and take on those pieces one at a time.

For example, can you start with a basic sketch that just shows a hard-coded circle somewhere, and then print out the distance between it and the mouse? Build on that. Can you make it so the circle is usually red, but turns green when the mouse is a certain distance from it? Now can you make it so it draws a new circle when it turns green?

Hint: if you check whether the distance is exactly equal to the radius, you're only checking a very tiny set of positions, and the mouse probably won't be that exact. Instead, you probably want to check whether the distance is outside the radius. You might find this collision detection tutorial useful.

Answer 2

void mouseDragged() {
  if(dist(preX,preY,mouseX,mouseY)>=50){
  float angle=atan2(mouseX-preX,mouseY-preY);
  preX+=sin(angle)*50;
  preY+=cos(angle)*50;
  history.add(new PVector(preX,preY));
  }
}