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

Question

我尝试做类似的事情：

＆＃13;

＆＃13;

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));
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但我想＆＃34;冻结＆＃34;这个画布，所以如果我加载页面，我将在30和120之间的随机高度有30个rect（）。

Thanx求助

Answer 1

一种选择是在noLoop()函数中使用setup方法停止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究竟是如何工作的，也许它们无论如何都要清除画布。但这是一个可能的解决方案：

function draw() {
    //drawing stuff
}

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