P5.js 8 方向 lerp color/color 如何改变？

Question

我在这段代码中遇到的最后一个问题是我不确定如何创建 8 方向的颜色变化效果。我只能映射一个 mouseX 使其水平或垂直 lerpColor。但是如何通过同时移动 mouseX 和 mouseY 使其工作？

我在 class 的 shift_Color 方法中找到了它。我试图在某个 dist() 中声明，lerpColor。但是现在它只显示黑色而不是变色效果。

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.gap = 110
    this.shift1 = color(96);
    this.shift2 = color(244);
  }

  update() {
    this.shape();
    this.shift_Color();
  }
  
  shape() {
    push();
    stroke(this.stroke);
    //fill(this.shift1);
    this.shift_Color();
    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);

    if (distance < this.gap) {
      this.shift1 = color(96);
      this.shift2 = color(244);
      this.shiftX = map(mouseX - width/2,this.gap,distance,0,1.0);
      this.change = lerpColor(this.shift1, this.shift2, this.shiftX);
      fill(this.change);
    } else {
      fill(this.shift1);
    }
  }

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

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

Answer 1

如果我正确理解了你的问题，那么你的代码中有两个问题。

首先是因为您试图将鼠标和立方体之间的距离映射到 0 和 1 之间的数字，所以您应该写 lerpColor(this.shift2, this.shift1, this.shiftX) 而不是 lerpColor(this.shift1, this.shift2, this.shiftX)，因为 this.shift2 是较浅的颜色，将是内部颜色。

另一个问题是映射change变量时，change应该根据鼠标和立方体之间的距离（即distance变量）计算，而不是mouseX 或 mouseY。解决方案是简单地做 map(distance, 0, this.gap, 0, 1);.

let cubes = [];

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

  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 cube of cubes) {
    cube.update();
  }
}

class Cubes {

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

  update() {
    this.shape();
    this.shift_Color();
  }
  
  shape() {
    push();
    stroke(this.stroke);
    //fill(this.shift1);
    this.shift_Color();
    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);

    if (distance < this.gap) {
      this.shiftX = map(distance, 0, this.gap, 0, 1);
      // this.shiftX = map(mouseX - width/2,this.gap,distance,0,1.0);
      this.change = lerpColor(this.shift2, this.shift1, this.shiftX);
      // this.change = lerpColor(this.shift1, this.shift2, this.shiftX);
      fill(this.change);
    } else {
      fill(this.shift1);
    }
  }

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

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

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

我也修改了你的一些代码。喜欢这行

this.shift1 = color(96);
this.shift2 = color(244);

目前不需要，因为这些变量在执行期间都没有变化。

P5.js 8 方向 lerp color/color 如何改变？

P5.js how to do 8 directional lerp color/color change?

javascript

p5.js