P5.js 椭圆不跟随 mouseX 和 Y

Question

我不确定为什么 "invisible circle" 与 mouseX 和 Y 不对齐，我最终对其进行了硬编码。有谁知道为什么会这样？

如果我只写 (mouseX,mouseY) 椭圆将距离光标大约 300 个单位。

有什么方法可以修复/改进它吗？没有设置精确值，例如 mouseX-300？

谢谢

*我能想到的细节不多now.not我能想到的细节很多now.not我现在能想到的细节很多。

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);
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

Answer 1

在 WEBGL 模式下 (createCanvas()) 屏幕中心默认为 (0, 0)。无论如何，window 的左上角坐标仍然是 (0, 0)。因此，您必须通过 (-width/2, -height/2):

来平移鼠标位置

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

此外Invisible_Circle不应该是Cubes的方法：

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

class Cubes {

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

绘制方框后必须调用：

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

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

看例子：

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);
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

P5.js 椭圆不跟随 mouseX 和 Y

P5.js ellipse not following mouseX and Y

javascript

processing

p5.js