p5.j​​s && ecmascript6表示法

Question

我想在带有ECMAScript表示法的类中使用p5.js函数。

如何修复此代码？

class Sketch {
    constructor(p, params) {
        // generate vars use in class with object
        if (typeof params !== 'undefined') {
            for (let key in params) this[key] = params[key];
        }
        // p5.js object
        this.p = p;
    }
    // p5.js setup method
    setup() {
        this.p.createCanvas();
    }
    // p5.js draw method
    draw() {
    }
}
sketch = new Sketch(p5,{});

错误：

this.p.createCanvas不是一个函数

Answer 1

文档说您必须实例化 p5并传递在p上创建方法的初始化函数：

const myp5 = new p5(p => {
    p.setup = () => {
        p.createCanvas();
    };
    …
});

另请参阅全局和实例模式教程。

但是，这是一个非常奇怪的构造。 尽管没有记录，但是在ES6中应该可以继承p5 ：

class Sketch extends p5 {
    constructor(params) {
        super(p => {
            // do any setup in here that needs to happen before the sketch starts
            // (e.g. create event handlers)
            // `p` refers to the instance that becomes `this` after the super() call
            // so for example
            if (typeof params == 'object' && params != null)
                for (let key in params)
                    p[key] = params[key];
        });

        // `this` itself is the p5.js object
    }
    // p5.js setup method
    setup() {
        this.createCanvas();
    }
    // p5.js draw method
    draw() {
    }
}
const myp5 = new Sketch({});

注意， p5构造函数将调用您的方法。 您不必自己做myp5.setup() 。

Answer 2

修补此问题。 我能够像这样实现p5的继承：

import p5 from 'p5';

const MIN_RAD = 150;
const MAX_RAD = 250;
const ITEM_COLOR = 'red';
const BG = 'rgba(50,50,50,.05)';
const VELOCITY = 1;

export default class Sketch extends p5 {

    constructor(sketch = ()=>{}, node = false, sync = false) {
        super(sketch, node, sync);
        console.log('Sketch [this:%o]', this);

        this.setup = this.setup.bind(this);
        this.draw = this.draw.bind(this);
        this.render = this.render.bind(this);
        this.increment = this.increment.bind(this);
        this.windowResized = this.windowResized.bind(this);
    }

    setup() {
        console.log('setup', this.windowWidth, this.windowHeight);
        this.createCanvas(this.windowWidth, this.windowHeight, p5.WEBGL);

        this.bg = this.color(BG);
        this.itemColor = this.color(ITEM_COLOR);
        this.rad = MIN_RAD;
        this.grow = true;
        this.frame = 0;
    }

    draw() {
        this.increment();
        this.render();
    }

    render() {
        let x = this.windowWidth / 2;
        let y = this.windowHeight / 2;

        this.background(this.bg);
        this.fill(this.itemColor);
        this.stroke(this.itemColor);
        this.ellipse(x, y, this.rad, this.rad);
    }

    increment() {
        this.rad = this.grow ? this.rad + VELOCITY : this.rad - VELOCITY;

        if (this.rad > MAX_RAD) {
            this.grow = false;
        };

        if (this.rad < MIN_RAD) {
            this.grow = true;
        }

        this.frame++;
    }

    // EVENTS

    windowResized() {
        console.log('windowResized', this.windowWidth, this.windowHeight);
        this.resizeCanvas(this.windowWidth, this.windowHeight);
    }
}

可以正常导入此类，并通过调用构造函数实例化该类。

import Sketch from './sketch';
...
const sketch = new Sketch();

仔细研究一下源代码，有两个关键状态会自动神奇地激活所谓的“全局”模式，其中p5将其胆量转储到window （避免）。

• 1）在init.js＃L21上 ，如果window上同时存在draw和setup
• 2）在core.js＃L496上 ，如果sketch参数为falsey

p5/Core使用这些条件来设置其内部_isGlobal ，该_isGlobal用于将上下文定义为window或this ，并有条件地对此进行操作。 EG： core.js＃L271

只是扩展所选答案（这是正确的，除了传递空对象时出错）。

坦白说，两种记录的构造方法都不令人满意。 这是一个改进，但是我们仍然需要做更多的工作来管理范围。