在没有 setup/draw 格式的情况下使用 p5 的函数

Question

我是 Javascript 的新手，我正在研究 p5 库。在 Python 中，我可以使用 from x import y statement:

从库中导入单个函数

from subprocess import check_output

我的问题是，有没有一种方法可以在不使用 setup/draw 格式的情况下对 p5 做同样的事情？例如，我想在我的一个脚本中使用 noise 函数；我可以只导入和使用该功能吗？

Answer 1

像这样的问题，最好做一个测试来尝试一下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Noise Test</title>
    <script src="p5.js" type="text/javascript"></script>
    <script>
        console.log(noise(100));    
    </script>

  </head>
  <body>
  Noise Test, check the console.
  </body>
</html>

我们在这里加载 p5.js 库，然后尝试调用 noise() 函数。如果我们运行那，我们得到一个错误：

Did you just try to use p5.js's noise() function? If so, you may want to move it into your sketch's setup() function.

For more details, see: https://github.com/processing/p5.js/wiki/Frequently-Asked-Questions#why-cant-i-assign-variables-using-p5-functions-and-variables-before-setup

index.html:9 Uncaught ReferenceError: noise is not defined

我们可以去那个 url 了解正在发生的事情：

In global mode, p5 variable and function names are not available outside setup(), draw(), mousePressed(), etc. (Except in the case where they are placed inside functions that are called by one of these methods.)

The explanation for this is a little complicated, but it has to do with the way the library is setup in order to support both global and instance mode. To understand what's happening, let's first look at the order things happen when a page with p5 is loaded (in global mode).

Scripts in are loaded.

of HTML page loads (when this is complete, the onload event fires, which then triggers step 3).

p5 is started, all functions are added to the global namespace.

So the issue is that the scripts are loaded and evaluated before p5 is started, when it's not yet aware of the p5 variables. If we try to call them here, they will cause an error. However, when we use p5 function calls inside setup() and draw() this is ok, because the browser doesn't look inside functions when the scripts are first loaded. This is because the setup() and draw() functions are not called in the user code, they are only defined, so the stuff inside of them isn't run or evaluated yet.

It's not until p5 is started up that the setup() function is actually run (p5 calls it for you), and at this point, the p5 functions exist in the global namespace.

所以，不，你不能在没有 `setup()` 和 `draw()` 函数的情况下使用 `p5.js` 函数。

也就是说，您可以定义一个从 setup() 调用的回调函数，这样您就知道 p5.js 函数可用：

<script src="p5.js" type="text/javascript"></script>
<script>
    function doYourStuff(){
        console.log(noise(100));        
    }

    function setup(){
        doYourStuff();
    }
</script>

或者，您可以使用 instance mode。

这涉及手动创建 p5 的实例并使用它直接调用函数而不是全局调用它们：

<script src="p5.js" type="text/javascript"></script>
<script>
    var p5 = new p5();
    console.log(p5.noise(100));
</script>

您也可以挖掘源代码。

没有导入单个函数的好方法，但您可以按 ctrl+f 搜索 p5.js 的未缩小源并查找 noise() 函数。然后您可以将其复制到它自己的文件中（以及它所依赖的任何其他辅助函数）。但这可能比使用上述任何一种方法都需要更多的工作，而且它可能会侵犯 p5.js 的版权。

在没有 setup/draw 格式的情况下使用 p5 的函数

Using p5's functions without the setup/draw format

javascript

python

import

p5.js

所以，不，你不能在没有 `setup()` 和 `draw()` 函数的情况下使用 `p5.js` 函数。

或者，您可以使用 instance mode。

您也可以挖掘源代码。

在没有 setup/draw 格式的情况下使用 p5 的函数

Using p5's functions without the setup/draw format

javascript

python

import

p5.js

所以，不，你不能在没有 setup() 和 draw() 函数的情况下使用 p5.js 函数。

或者，您可以使用 instance mode。

您也可以挖掘源代码。

所以，不，你不能在没有 `setup()` 和 `draw()` 函数的情况下使用 `p5.js` 函数。