在 p5.js 中实现绘制和设置功能的设计模式？答案

【问题标题】：Design pattern that implements draw and setup function in p5.js?在 p5.js 中实现绘制和设置功能的设计模式？
【发布时间】：2018-09-17 06:20:17
【问题描述】：

要启动 p5.js 或处理草图，我们这样做

setup() {
   // do setup
}

draw() {
   // draw each frame
}

这在 p5 js 中是如何工作的。后台有线程调用这些函数吗？我无法理解如何调用这些方法。这是一种设计模式吗？如果是这样，这会叫什么？

【问题讨论】：

【解决方案1】：

这只是观察者模式。 https://en.wikipedia.org/wiki/Observer_pattern setup 和 draw 是事件监听器。 setup 被调用一次，draw 被定期调用。

它与浏览器中的document.onload=function setup(){} 和setInterval(function draw(){},500) 没有区别。

【讨论】：

【解决方案2】：

JavaScript 是单线程的，所以它不是另一个线程。

基本上，P5.js 库包含一些代码，可以在正确的时间自动调用这些函数（以及像 keyPressed() 和 mouseMoved() 这样的函数）。加载库时调用setup()，每秒调用draw() 60次。

一般来说，这称为渲染循环。谷歌“渲染循环”有大量关于不同语言和库如何处理的资源。

P5.js 是开源的，所以你可以看看它是如何完成的here。魔法发生在main.js 内部。

退一步说，在 JavaScript 中，您可以在经过一定时间后调用 setTimeout() 或 setInterval() 函数来调用函数。 P5.js 可能在幕后做了类似的事情。

【讨论】：