p5.js 形状更新问题

Question

嗯。我需要以下 p5.js 代码的帮助来使形状停止 "bluring" 我的意思是如何使这些形状不再有痕迹。

我认为问题与 "update" 部分有关。但我不确定如何修复它。

谢谢

let cubes = [];

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  backCol = color(40, 100, 124);
  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() {
  noFill();
  noStroke();
  rect(0, 0, width, height);

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

}

class Cubes {

  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 50;
  }

  update() {
    this.shape();
  }

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

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

Answer 1

您必须在抽奖开始时background()清除背景：

function draw() {
    background(backCol);  
    noFill();
    noStroke();
    rect(0, 0, width, height);

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

注意，background()不只是设置背景颜色，它实际上清除了背景。在 draw() 中调用 background()，确保在每一帧中清除 canvas。

看例子：

let cubes = [];

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  backCol = color(40, 100, 124);
  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();
    noStroke();
    rect(0, 0, width, height);

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

class Cubes {

  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 50;
  }

  update() {
    this.shape();
  }

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

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

p5.js 形状更新问题

p5.js shape update issue

javascript

processing

p5.js