Hello,

I have an assignment for school which I've been trying to do for the past few days and I can't wrap my head around it. I hope somebody can help me out.

Here's the question: "Using Processing, create a program that draws a filled circle under the mouse pointer when the mouse button is pressed. The program should store the time and position of the click, which will be used as a start keyframe. When the user clicks the mouse a second time, the circle should 'move' to the position of the second click. You should create the effect of movement by using linear interpolation between the start and end keyframes. Also when the circle reaches the end keyframe, the direction of movement is reversed and the circle travels back and forth between the start and end positions."

Here's what I got so far:

Code:

float x = -30, y = -30; // put circle off screen
long startTime;
int i = 0;
float firstX, firstY, secondX, secondY, dirX, dirY;
float speed = 2;


float a, b, c;


void setup(){
  size(500, 500);
  smooth();
}


void draw(){
  background(0);
  fill(255);
  noStroke();

  ellipse(x, y, 30, 30);
  stroke(255);

  if(secondX > firstX && secondY > firstY){
    a = (secondX - firstX);
    b = secondY - firstY;
  }

   if(secondX < firstX && secondY < firstY){
   a = firstX - secondX;
   b = firstY - secondY;
  
   }
   
   if(secondX > firstX && secondY < firstY){
   a = secondX - firstX;
   b = firstY - secondY;
   }
   
   if(secondX < firstX && secondY > firstY){
   a = firstX - secondX;
   b = secondY - firstY;
   }

  //shortest distance between the two points 
  c = sqrt(a * a + b * b);
  //direction ratio
  dirX = a/c;
  dirY = b/c;

  if(i > 1){//start moving only after the second click
    line(firstX, firstY, secondX, secondY);
    x += dirX * speed;
    y += dirY * speed;
    
    //once the x/y values of the circle are greater than our secondX/secondY 
    //values, x=secondX, y=secondY 
//if i want to change the direction, I need to do it within this if statement
//after adding a conditional for the firstX and firstY. 
    if( x > secondX && y > secondY || x < secondX && y < secondY) { 
	x = secondX;
	y = secondY;
    }
  }

}

void mousePressed(){  //as draw loops, keep on drawing the same ellipse.
  if(i == 0) { //lock position + time of first click
    firstX = mouseX;
    firstY = mouseY;
    startTime = millis();    
    
    x = firstX;
    y = firstY;
  }

  if (i == 1){
    secondX = mouseX;
    secondY = mouseY;
  }
}

void mouseReleased(){
  i++;
}
 

One other thing I don't understand is how to implement the time factor in the equation.


I'd really appreciate your help on this one!

Thanks in advance.
Marianna

The mouse handling seems right.
Everything in draw() seems wrong...
I suggest to take a look at lerp(), using it from firstX to secondX and from firstY to secondY, using dist() between the two points as lerp factor: frameCounter * dist() / FRAME_NB_TO_REACH_OTHER_POINT.

Also look at dist().
I think you shouldn't base your logic on the current position of the shape, but compute number of steps to reach destination and base the logic on the current step number. Thus you can control, depending on frame count since start of move, if the shape is moving, and on which direction.