1

I was making a Java processing code that basically records where 20 of your mouse clicks and draws lines that connect the vector point of each mouse click to the center of the screen, which in this case is 600x600. I was able to create the lines but I am stuck on how I could be able to make the lines move into the center. Do you guys have any suggestions for how I could make it happen?

float[] Xcont = new float[0];
float[] Ycont = new float[0];
int clickCounter = 0;
float centerX = 300;
float centerY = 300;
float amt = 1;

void setup(){
size(600, 600);
background(0);
}

void draw(){ 
  stroke(255);
  if(clickCounter == 20){
    for(int i = 0; i < Xcont.length; i+=1){
    line(Xcont[i], Ycont[i], centerX, centerY);
    circle(Xcont[i], Ycont[i], 10);
    }
  }
}

void mousePressed(){
clickCounter+=1;
if(clickCounter <= 20){
Xcont = append(Xcont, mouseX);
Ycont = append(Ycont, mouseY);
println(mouseX, mouseY);
}
if(clickCounter == 20){
println(Xcont);
}
}
Crystallean
  • 125
  • 7

1 Answers1

1

If I understand what you want, you want to draw the line progressively between the position clicked and the center of the screen. This can be done by using the fact that you can multiply a vector by a number to make it longer/shorter.

A vector is made of a direction and a magnitude (and a position in our case) If you multiply your vectors by 0, you get the position where the click happened. If you multiply your vectors by 1, you have the position at the center of the screen.

To get the vector between your mouse and the center of the screen, you use the formula (Xb - Xa; Yb - Ya) A being your mouse position and B being the center of your screen.

Multipling a vector by a number is easy, you multiply each component of the vector (x, y) by the number.

All you have to do is to slowly multiply each vector from 0 to 1. (using a loop with a timeout between each iteration or something like that)

Finally, you have something like that

line(mouseX, mouseY,
mouseX + vectorBetweenMouseAndCenter.x * theNumberBetweenZeroAndOne,
mouseY + vectorBetweenMouseAndCenter.y * theNumberBetweenZeroAndOne)

This way, you have vectors starting from your mouse position and by playing with theNumberBetweenZeroAndOne, you can draw a part of it (eg. 0.25), none of it (0) or all of it (1).

Lauromine
  • 1,453
  • 9
  • 19