将值传递给 p5 的 canvas，实例化

Question

假设我在一页上有几个 p5 画布，我选择使用实例化将它们分开。因为许多方法将执行相同的操作，所以我制作了一个超类。它看起来像这样：

var BasicCanvas = function(p) {
    p.setup = function() {
        p.createCanvas(100, 100);
        p.background(0);
    }

    p.draw = function() {
    }
}

我必须创建一个子类并将其传递到一个新的 p5 对象中，如下所示：

var myP5 = new p5(BasicCanvas);

我应该如何以可以传递到 p5 构造函数中的方式创建我的 super 的子类？我理想的代码设置如下：

var super = function(p) {
    p.setup = function() { creation }
}

var sub1 = function(p) {
    p.draw = function() { circles }
}

var sub2 = function(p) {
    p.draw = function() { squares }
}

var myP5 = new p5(sub1);
var myP52 = new p5(sub2);

但是来自 Java，我在解决差异方面遇到了一些困难。你能帮忙吗？

谢谢！

Answer 1

var superFunction = function(p) {
    p.setup = function() {
        p.createCanvas(200, 150)
        p.noStroke()
    }
}

var sub1 = function(p) {
    superFunction(p)
    p.draw = function() {
        p.background(50)
        p.fill("blue")
        p.rect(20,20,50,50)
    }
}

var sub2 = function(p) {
    superFunction(p)
    p.draw = function() {
        p.background(100)
        p.fill("red")
        p.rect(20,20,50,50)
    }
}

var myP5 = new p5(sub1)
var myP52 = new p5(sub2)

注：super是Javascript

中的保留关键字

将值传递给 p5 的 canvas，实例化

Passing values into p5's canvas, instancing

javascript

class

canvas

instantiation

p5.js