Making an object move toward the cursor - JavaScript - p5.js

Question

I am new to JavaScript and wanted to make a simple script in which an object (a square in this case) moves towards the cursor. The idea is that the square traces the cursor, slowing down as it gets closer to it. So far, my code looks like this:

var xspeed;
var yspeed;
var x;
var y;

function setup() {
  createCanvas(500,500); 
}

function update(){
  xspeed = (mouseX - x)/2;
  yspeed = (mouseY - y)/2;  

  x += xspeed;
  y += yspeed;
}

function draw() {
  background(255);

  x = width/2;
  y = height/2;

  while (!(x == mouseX && y == mouseY)){
  update();
  rect(x,y,10,10);
  }
}

The problem is, that this code just pops up a load of squares that are static and are placed in a diagonal line from the centre to the left upper corner. It seems the code completely ignores the location of the cursor.

What am I doing wrong? Thanks in advance!

score 3 · Answer 1 · answered Jun 02 '18 at 02:03

What you need is to calculate a vector pointing towards your mouse and use that to modify your rect x and y

In p5.js a vector is an object that stores an x, y and z value which you can modify,

what you want is for your draw loop to do something like this:

var rectLocation;
function setup() {
    // create vector that keeps track of the location of the rect
    rectLocation = createVector(width/2,height/2);
}
function draw() {
    // Assign your mouseX and mouseY to a vector called target.
    var target = createVector(mouseX,mouseY);

    // Calculate the distance between your target and
    // the current location of your rect
    var distance = target.dist(rectLocation);

    // map the distance between your rect location and
    // the mouse to a new number which will dictate how
    // much slower it will move based on how close it
    // will get to the target.
    var mappedDistance = map(distance, 100, 0, 1.5, 0.5);

    // this is where you actually calculate the direction
    // of your target towards your rect.
    target.sub(rectLocation);

    // then you're going to normalize that value
    // (normalize sets the length of the vector to 1)
    target.normalize();

    // then you can multiply that vector by the distance
    // we mapped to a new number (in this case it gets
    // multiplied somewhere between 1.5 and 0.5 based
    // on how far the target is.)
    target.mult(mappedDistance);  

    // last we add the target vector (which we modfied
    // multiple times) to the rect location.
    rectLocation.add(target);

    // draw and watch math do it's job!
    rect(rectLocation.x, rectLocation.y, 10,10);
}

I recommend looking at tutorials made by daniel shiffman on youtube. He explains everything in great detail.

score 0 · Answer 2 · answered Jan 14 '18 at 16:53

You have a while loop in your draw() function, which means that the first frame won't complete until that while loop finishes. That while loop goes until the square is directly on top of the mouse, which by default is at 0,0.

Get rid of the while loop. While you're at it, you don't want to check whether the square is directly on top of the mouse, since chances are it will probably only get very close to the mouse. Checking for an exact match will cause your code to go into an infinite loop, which will crash the browser.

Making an object move toward the cursor - JavaScript - p5.js

2 Answers2