p5.js 實例模式：如何從 class 內部訪問實例變量

Question

我在實例模式下使用 p5js 時遇到問題。 為了便於維護，我將代碼拆分為多個文件，將類與主草圖文件分開。

在類內部，我需要訪問在主草圖中聲明的變量，但是當我將草圖 object 注入 class 時，我得到了undefined 。

理想情況下，我希望能夠訪問主草圖文件中聲明的任何變量。 有可能/推薦嗎？

這是我要實現的最小案例示例：

index.js

import p5 from "p5"
import TestClass from "./_testClass";

let sketch = new p5( (p) => {
    let myColor = 75;

    p.setup = function() {
        p.createCanvas(1000,1000);
        let t = new TestClass(100,100)
        t.render(p)
    }
}, "p5");

_testClass.js

export default class TestClass {
    constructor(x,y) {
        this.x = x;
        this.y = y;
    }
    
    render(p) {
        p.rect(this.x, this.y, 50, 50); // i get a square on the canvas: p.rect() is recognized
        console.log(p.myColor); // undefined
    }
}

Answer 1

您希望在TestClass的render() function 中可用的任何變量都需要 1) 傳遞給TestClass構造函數，2) 傳遞給渲染 function，3) 在p5實例上聲明/分配，或者4) 全局聲明。

例如，模式草圖向p5實例添加內容並不少見：

import p5 from "p5"
import TestClass from "./_testClass";

let sketch = new p5((p) => {
    // let myColor = 75;
    p.myColor = 75;

    p.setup = function() {
        p.createCanvas(1000,1000);
        let t = new TestClass(100,100)
        t.render(p)
    }
}, "p5");

但是，我認為將其傳遞給您的TestClass構造函數會更好：

import p5 from "p5"
import TestClass from "./_testClass";

let sketch = new p5((p) => {
    let myColor = 75;

    p.setup = function() {
        p.createCanvas(1000, 1000);
        let t = new TestClass(100, 100, myColor)
        t.render(p)
    }
}, "p5");

export default class TestClass {
    constructor(x, y, rectColor) {
        this.x = x;
        this.y = y;
        this.rectColor = rectColor;
    }
    
    render(p) {
        console.log(this.rectColor);
        p.fill(this.rectColor);
        p.rect(this.x, this.y, 50, 50);
    }
}