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

我什么時候使用“ this”。 當“ p” 在這種情況下？ 此外，我想在instaces之外使用我的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);
}

然后，它應該可以按照您的期望工作。