javascript - 将值传递到 p5 的 Canvas 中，实例化

Question

假设我在一页上有几个 p5 Canvas ，并且我选择使用实例将它们分开。因为许多方法将执行相同的操作，所以我创建了一个父类(super class)。它看起来像这样:

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

    p.draw = function() {
    }
}

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

var myP5 = new p5(BasicCanvas);

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

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中的保留关键字