一个 p5/.js 自定义旋转行为问题

Question

我正在尝试制作自定义 rotation/magnetic 行为，使一堆 box() 正常旋转，如果在一定距离内将停止旋转并磁性吸引到光标。

我不知道如何修复它，因为现在立方体只能随机旋转。

请help/give一些线索谢谢！

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);
    this.a = atan2(mouseY-this.y, mouseX-this.x);
  }

  update() {
    this.shape();
    this.magnetic();
  }
  

  shape() {
    push();
    stroke(this.stroke);
    translate(this.x - width / 2, this.y - height / 2, 0);
    rotateX(millis()/1000);
    rotateY(millis()/1000);
    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 * 2) {
      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

您必须在方法 shape 中调用方法 magnetic()，在 push() 和 pop() 之间，而不是 rotateX()/rotateY() 而不是画框之后：

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

此外，角度 a 取决于当前鼠标位置，而不是构建对象时鼠标的位置。
在方法 magnetic 中而不是在构造函数中计算角度 a：

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

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

看例子：

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);
    this.a = atan2(mouseY-this.y, mouseX-this.x);
  }

  update() {
    this.shape();
    //this.magnetic();
  }
  

  shape() {
    push();
    stroke(this.stroke);
    translate(this.x - width / 2, this.y - height / 2, 0);
    //rotateX(millis()/1000);
    //rotateY(millis()/1000);
    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 * 2) {
      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 自定义旋转行为问题

A p5/.js custom rotation behavior problem

javascript

processing

p5.js