I'm very new to Processing (and programming in general) and I could really use some help. The program I'm creating draws a reticule on the screen, which slowly moves to the current location of the mouse. Once it reaches the mouse position, it draws a rectangle. I've already completed the base requirements for the program.

However, the reticule moves in the same speed in both the X and Y directions. That means either the horizontal or vertical line may reach the mouse position first, while the other line has to catch up. I'm now trying to figure out a way to control the speed based on the position of the mouse, so the horizontal and vertical lines of the reticule reach the mouse position at the same time. Essentially, it would move in a straight line towards the mouse, as opposed to independently from one another.

I've been trying for a few hours but can't seem to come up with a solution.

Here's my code so far:


void setup() {
  size(400,400);
  smooth();
  frameRate(30);
  x = 0; // starting x location
  y = 0; // starting y location
  speedX = 1; // speed in x direction
  speedY = 1; // speed in y direction
}

// variables
int x, y;
int speedX, speedY;
int diam = 30;

void draw() {
  background(204);
  stroke(0);
  strokeWeight(4);
  rectMode(CENTER);
 
   // draw box
  if (mouseX == x && mouseY == y) {
    rect(x,y,diam,diam);
  }
 
  line(0, y, width, y); // horizontal line
  line(x, 0, x, height); // vertical line
 
  // x-direction movement
  if (mouseX >= x) {
    x = x + speedX;
  }
 
  if (mouseX < x) {
    x = x - speedX;
  }
 
  // y-direction movement
  if (mouseY >= y) {
    y = y + speedY;
  }
 
  if (mouseY < y) {
    y = y - speedY;
  }
}


I've been messing around with the speedX and speedY variables. I'm not sure if this is a simple fix or if I'm working in the completely wrong direction, but any help would be appreciated. Thanks.