p5.js如何冻结canvas？

Question

我尝试做类似的事情:

function setup() {
  createCanvas(500, 250);
  //frameRate(1);
}

function draw() {
  background(50, 50, 150);
  
  translate(10, 10);
  for (let i = 0; i < 30; i++) {
    rect(i*15, 0, 10, random(30, 120));
  }
}

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

但我想 "freeze" 这个 canvas，所以如果我加载页面，我将在 30 到 120 之间的随机高度处有 30 个 rect()。

Answer 1

一个选择是在 setup 函数中使用 noLoop() 方法，这将停止 draw 方法循环。

function setup() {
  createCanvas(500, 250);
  noLoop()
}

function draw() {
  background(50, 50, 150);

  translate(10, 10);
  for (let i = 0; i < 30; i++) {
    rect(i * 15, 0, 10, random(30, 120));
  }
}

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

请注意，通过使用 noLoop 和 loop 方法，您可以在某些事件上切换绘制循环，例如 mousePressed，就像这样。

let stop = true;

function setup() {
  const canvas = createCanvas(500, 250);
  if(stop) noLoop();
  canvas.mousePressed(function() {
    stop = !stop;
    stop ? noLoop() : loop()
  })
}

function draw() {
  background(50, 50, 150);

  translate(10, 10);
  for (let i = 0; i < 30; i++) {
    rect(i * 15, 0, 10, random(30, 120));
  }
}

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

其他选项是在 setup 函数中创建一次条形数组，然后使用 draw 方法显示它们。这样你就不必停止 draw 循环。

const bars = []
class Bar {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
  }
  show() {
    rect(this.x, this.y, this.w, this.h);
  }
}

function setup() {
  createCanvas(500, 250);
  for (let i = 0; i < 30; i++) {
    bars.push(new Bar(i * 15, 0, 10, random(30, 120)))
  }
}

function draw() {
  background(50, 50, 150);
  translate(10, 10);
  bars.forEach(bar => bar.show())
}

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

Answer 2

一个解决方案是设置另一个空的绘制函数。我不确切知道 p5 是如何工作的，也许他们无论如何都会清除 canvas 。但这里有一个可能的解决方案：

function draw() {
    //drawing stuff
}

function freezeCanvas() {
    draw = function(){}
}

Answer 3

因为我一直在寻找一种简单地冻结 canvas 的方法，而这个 post 是第一个出现的方法，所以我想我把解决方案留在这里。

你可以将它与一个额外的增量器一起用于矩形的数量，然后触发 noLoop()

来自the p5 docs

通过按住任意鼠标按钮冻结 canvas

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}

p5.js如何冻结canvas？

p5.js how to freeze canvas?

javascript

processing

p5.js