P5.js ellipse not following mouseX and Y

Question

I am not sure why but the "invisible circle" is not align with the mouseX and Y and i ended up hard coding it. Anyone know why this happens?

If i just wrote (mouseX,mouseY) the ellipse will be around 300 units away from the cusor.

Is there any way fix it/ improve it? Without setting exact value such as mouseX-300?

Thanks

*not much details i can think of for now.not much details i can think of for now.not much details i can think of for now.

let cubes = [];

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  backCol = color(243, 243, 243);
  //background(backCol);

  for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
      let xPos = map(i, 0, 9, 50, width - 50);
      let yPos = map(j, 0, 9, 50, height - 50);

      cubes.push(new Cubes(xPos, yPos));

    }
  }

}

function draw() {
  background(backCol);
  noFill();

  for (let a = 0; a < cubes.length; a++) {
    cubes[a].update();
  }
}

class Cubes {

  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 30;
    this.stroke = 70;
    this.shift1 = color(96);
    this.shift2 = color(244);
  }

  update() {
    this.shape();
    this.shift_Color();
    this.Invisible_Circle();
  }

  Invisible_Circle () {
    push();
    stroke(10);
    //noFill();
    // translate(mouseX,mouseY);
    ellipse(mouseX - 280,mouseY - 280,200);
    pop();
  }
  
  shape() {
    push();
    stroke(this.stroke);
    translate(this.x - width / 2, this.y - height / 2, 0);
    this.magnetic()
    box(this.size);
    pop();
  }

  shift_Color() {
    let distance = dist(mouseX, mouseY, this.x, this.y);
    let shiftX = map(mouseX, 0, this.a, 0, 1.0);
    let change = lerpColor(this.shift1, this.shift2, shiftX);

    if (distance < this.a) {
      fill(change);
    } else {
      noFill();
    }
  }

  magnetic() {
    let distance = dist(mouseX, mouseY, this.x, this.y);

    if (distance < this.size * 3) {
      this.a = atan2(mouseY - this.y, mouseX - this.x);
      rotateX(this.a);
      rotateY(this.a);
    } else {
      rotateX(millis() / 1000);
      rotateY(millis() / 1000);
    }
  }
}

user_5577765 · Answer

In WEBGL mode (createCanvas()) the center of the screen is by default (0, 0). Anyway, the top left coordinate of the window is still (0, 0). Hence you have to translate the mouse position, by (-width/2, -height/2):

ellipse(mouseX - width/2, mouseY - height/2, 200);

Furthermore Invisible_Circle should not a method of Cubes:

function Invisible_Circle () {
    stroke(10);
    //noFill();
    ellipse(mouseX - width/2, mouseY - height/2, 200);
}

class Cubes {

  constructor(x, y) {
    // [...]

And has to be called after drawing the boxes:

function draw() {
  background(backCol);
  Invisible_Circle();
  noFill();

  for (let a = 0; a < cubes.length; a++) {
    cubes[a].update();
  }
  Invisible_Circle();
}

See the example:

let cubes = [];

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  backCol = color(243, 243, 243);
  //background(backCol);

  for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
      let xPos = map(i, 0, 9, 50, width - 50);
      let yPos = map(j, 0, 9, 50, height - 50);

      cubes.push(new Cubes(xPos, yPos));
    }
  }
}

function draw() {
  background(backCol);
  Invisible_Circle();
  noFill();

  for (let a = 0; a < cubes.length; a++) {
    cubes[a].update();
  }
  Invisible_Circle();
}

function Invisible_Circle () {
    stroke(10);
    //noFill();
    ellipse(mouseX - width/2, mouseY - height/2, 200);
}

class Cubes {

  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 30;
    this.stroke = 70;
    this.shift1 = color(96);
    this.shift2 = color(244);
  }

  update() {
    this.shape();
    this.shift_Color();
  }
  
  shape() {
    push();
    stroke(this.stroke);
    translate(this.x - width / 2, this.y - height / 2, 0);
    this.magnetic()
    box(this.size);
    pop();
  }

  shift_Color() {
    let distance = dist(mouseX, mouseY, this.x, this.y);
    let shiftX = map(mouseX, 0, this.a, 0, 1.0);
    let change = lerpColor(this.shift1, this.shift2, shiftX);

    if (distance < this.a) {
      fill(change);
    } else {
      noFill();
    }
  }

  magnetic() {
    let distance = dist(mouseX, mouseY, this.x, this.y);

    if (distance < this.size * 3) {
      this.a = atan2(mouseY - this.y, mouseX - this.x);
      rotateX(this.a);
      rotateY(this.a);
    } else {
      rotateX(millis() / 1000);
      rotateY(millis() / 1000);
    }
  }
}

P5.js ellipse not following mouseX and Y

1 Answers