p5.j​​s 如何冻结画布？

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>

但我想“冻结”这个画布，所以如果我加载页面，我将在 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

由于我正在寻找一种简单地冻结画布的方法，而这篇文章是第一个出现的，我以为我将解决方案留在这里。

您可以将其与矩形数量的额外增量器一起使用，然后触发 noLoop()

来自p5 文档

按住任意鼠标按钮冻结画布

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}

Answer 3

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

function draw() {
    //drawing stuff
}

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