p5.js && ecmascript6 符号

Question

我想在带有 ECMAScript 符号的 class 中使用 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 is not a function

Answer 1

The docs 说你必须 实例化 p5 并传递在 p 上创建方法的初始化函数：

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

另请参阅 Global and instance mode 教程。

然而，这是一个非常奇怪的结构。虽然没有记录，但在 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);
    }
}

这个class可以正常导入，调用构造函数实例化

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

仔细研究一下源代码，有两个关键状态会自动神奇地激活所谓的 'global' 模式，其中 p5 将其内脏转储到 window（要避免） .

1) 在 init.js#L21，如果 draw 和 setup 都存在于 window
2) 在 core.js#L496 上，如果 sketch 参数为假

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

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

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

p5.js && ecmascript6 符号

p5.js && ecmascript6 notation

javascript

ecmascript-6

p5.js