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

Question

要启动p5.js或处理草图，请执行以下操作

setup() {
   // do setup
}

draw() {
   // draw each frame
}

这在p5 js中如何工作。后台是否有一个线程调用这些函数？我在理解如何调用这些方法时遇到了麻烦。这是设计模式吗？如果是这样，这叫什么？

Answer 1

这只是观察者模式。 https://en.wikipedia.org/wiki/Observer_pattern的设置和绘制是事件侦听器。设置会被调用一次，绘制会在固定的时间间隔被调用。

与浏览器中的document.onload=function setup(){}和setInterval(function draw(){},500)没什么不同。

Answer 2

JavaScript是单线程的，因此它不是另一个线程。

基本上，P5.js库包含一些代码，这些代码在适当的时间自动调用这些函数（以及诸如keyPressed()和mouseMoved()之类的函数）。加载库后，它将调用setup()，每秒调用draw() 60次。

一般来说，这称为渲染循环。 Google会“渲染循环”，以获取大量资源，说明如何使用不同的语言和库进行处理。

P5.js是开源的，因此您可以确切地了解它是如何完成的here。魔术发生在main.js内部。

后退一步，在JavaScript中，您可以在经过一定时间后调用setTimeout()或setInterval()函数来调用函数。 P5.js可能在幕后这样做。