p5.js如何冻结画布？

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()。

- Anatole Lucet

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函数中创建bars数组，然后使用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>

- Nenad Vracar

---

谢谢你的回复:D - Anatole Lucet

不用谢，注意你也可以像这样切换循环 https://jsfiddle.net/tvj04wym/7/ - Nenad Vracar

不错的回答。第三个选项是使用createGraphics()函数创建一个缓冲区，然后只需绘制一次即可。 - Kevin Workman

Answer 2

因为我正在寻找一种简单地冻结画布的方法，而这篇文章是我找到的第一篇文章，所以我想在这里留下解决方案。

你可以使用一个额外的矩形增量器来触发noLoop()。

参考p5文档

通过按住任何鼠标按钮来冻结画布。

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}

- dinoDonga

Answer 3

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

function draw() {
    //drawing stuff
}

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

- Dwadelfri