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

只是擴展所選答案（這是正確的，除了傳遞空對象時出錯）。

坦白說，兩種記錄的構造方法都不令人滿意。 這是一個改進，但是我們仍然需要做更多的工作來管理范圍。