p5js 实例模式和面向对象

Question

我有一个“sketch.js”，我想在其中实例化多个画布并在其中显示一个类的不同对象。

sketch.js：

var myObjects = [];

var sketch1 = function (p) {
    p.setup = function () {
        p.createCanvas(600, 400);
    }

    p.draw = function () {
        p.background(51);
        p.rect(p.width/2, p.height/2, 200, 200);
    }   
};

new p5(sketch1, "canvas_container");

var sketch2 = function (p) {
    p.setup = function () {
        p.createCanvas(600, 400);
        myObjects.push(new myObject(p, 1, 2));
        myObjects.push(new myObject(p, 3, 4));
    }

    p.draw = function () {
        p.background();
        for (var i=0; i<myObjects.length; i++) {
            p.line(0, 0, myObjects[i].x, myObjects[i].y);
            myObjects[i].doSomething(Math.random()*10);
        }
    }
};

new p5(sketch2, "canvas_container");

我什么时候使用“这个”。当“p”在这种情况下？ 此外，我想在我的 sketch.js 文件中使用 p5 库中的一些“其他”方法，在实例之外，例如：

select('..') ...

但我得到了错误：

select is not defined

我发现自己是一个肮脏的解决方法：

new p5().select('...') ...

这样做的干净方法是什么？

myObjects.js

function myObject(canvas, x, y) {
    this.canvas = canvas;
    this.x = x;
    this.y = y;

    this.doSomething = function(rad) {
        this.canvas.ellipse(this.x, this.y, rad, rad);
    }
}

有没有人处理多个画布实例的例子？

Answer 1

请注意，现在，您永远不会创建 myObject 的新实例。你的数组被命名为myObjects，但你只是向它添加p（这是p5的一个实例）。因此，您不能对已添加到 myObjects 数组的对象神奇地调用 doSomething() 函数，因为它们不是 myObject 对象。它们是p5 对象。

我认为您想要做的是将 p 变量传递到您的每个草图中，并将其传递到您的“类”函数中。像这样的：

p.setup = function () {
        p.createCanvas(600, 400);
        var myObjectOne = new myObject(p, 1, 2);
        var myObjectTwo = new myObject(p, 3, 4);
}

那么它应该会按照你的预期工作。