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。"在这种情况下？此外

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);
}

那么它应该奏效您的期望。