将值传递到 p5 的画布中，实例化答案

【问题标题】：Passing values into p5's canvas, instancing将值传递到 p5 的画布中，实例化
【发布时间】：2017-10-10 09:03:16
【问题描述】：

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

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，我在解决这些差异时遇到了一些困难。你能帮忙吗？

谢谢！

【问题讨论】：

标签： javascript class canvas instantiation p5.js

【解决方案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 中的保留关键字

【讨论】：