创建简单的p5.js画布

Question

I'm trying to create the most basic example of p5.js: 我正在尝试创建p5.js的最基本示例：

$(document).ready(function(){
  function setup() {
    createCanvas(500, 500);
    background(200);
  }
});

This doesn't work. 这不起作用。 Canvas was not created at all and there is no error in the console. 根本没有创建Canvas，控制台中没有错误。

But this solution works: 但这个解决方案有效：

$(document).ready(function(){
  var sketch = function(p) {
    p.setup = function () {
      p.createCanvas(640, 480);
      p.background(200);
    };
  };
  new p5(sketch);
});

I've seen it here: https://stackoverflow.com/a/41126499/2986401 我在这里看到了它： https ： //stackoverflow.com/a/41126499/2986401

However, the first example is the recommended way. 但是，第一个例子是推荐的方法。 Why it is not working? 为什么不工作？ How can I get it at work? 我怎么能在工作中得到它？ (I have a low level of JS) Thank you. （我的JS水平很低）谢谢。

Answer 1

You should not call the setup() function yourself. 你不应该自己调用setup()函数。 The P5.js library calls it for you. P5.js库为您调用它。 Calling it yourself short-circuits all the cool stuff that P5.js does, and it's why you're getting a "createCanvas is not defined" error. 自己调用它会使P5.js所做的所有很酷的东西短路，这就是为什么你得到“createCanvas未定义”的错误。

Basically, by default (aka in global mode), P5.js looks for top-level functions like setup() and draw() that it calls automatically for you after the library is loaded. 基本上，默认情况下（也就是在全局模式下），P5.js会查找顶级函数，如setup()和draw() ，它们会在加载库后自动为您调用。 That's why your first example doesn't work: the setup() function is buried inside an anonymous function that you're passing into JQuery's ready() function. 这就是为什么你的第一个例子不起作用的原因： setup()函数被隐藏在你传递给JQuery的ready()函数的匿名函数中。

In other words, you do not want to use onload() or JQuery's ready() functions with P5.js. 换句话说，您不希望在P5.js中使用onload()或JQuery的ready()函数。 You want to let P5.js automatically call those functions when the library is loaded. 您希望让P5.js在加载库时自动调用这些函数。

Here's a simple example that includes the required HTML to give you a better idea of what's going on: 这是一个简单的示例，其中包含所需的HTML，以便您更好地了解正在发生的事情：

<!DOCTYPE html>
<html>
    <head>
        <title>P5.js Example</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
        <script>
            function setup(){
                createCanvas(500, 500);
                background(64);
            }

            function draw(){
                fill(255);
                ellipse(mouseX, mouseY, 20, 20);
            }
        </script>
    </head>
    <body>
    </body>
</html>

This code defines top-level setup() and draw() functions. 此代码定义了顶级setup()和draw()函数。 When the P5.js library is loaded, it automatically calls these functions. 加载P5.js库时，它会自动调用这些函数。

If you try to call setup() yourself, you'll do so before P5.js is loaded, which is why the createCanvas() function is not defined. 如果你尝试自己调用setup() ，你将在加载P5.js之前这样做，这就是为什么没有定义createCanvas()函数。

Your second example is using instance mode , which puts the setup() and draw() function inside an object that P5.js uses for calling functions. 您的第二个示例是使用实例模式 ，它将setup()和draw()函数放在P5.js用于调用函数的对象中。 See here for more info. 有关详细信息，请参见此处 But even with instance mode, you probably still wouldn't need to use the onload() or JQuery's ready() function. 但即使使用实例模式，您可能仍然不需要使用onload()或JQuery的ready()函数。

Shameless self-promotion: I've written a tutorial on how P5.js works available here . 无耻的自我推销：我已经写了一篇关于P5.js如何在这里工作的教程。

创建简单的p5.js画布

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-11-20 23:23:23

创建简单的p5.js画布

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-11-20 23:23:23

解决方案1
3 已采纳 2017-11-20 23:23:23