如何在不污染全局 scope 的情況下使用 p5.js？

Question

我正在嘗試將我為 processing.js 編寫的一些代碼轉換為使用 p5.js。 在現有代碼中，我創建了一個 object 語句，如processing = new Processing(canvas, p => (p.draw = draw_frame))與 canvas 在 Z4C4AD5FCA2E7A3F74DBB1CED00381AAid4vas <canvas id="canvas"></canvas>中定義的 canvas as , 並且任何處理函數和屬性都附加到處理 object 上。 例如，要繪制一個三角形，我會編寫類似self.processing.triangle(...)的代碼。 在 p5.js 中，所有常用函數似乎都是全局定義的。 有沒有辦法以不污染全局 scope 的方式使用 p5.js？

Answer 1

聽起來您正在尋找instance mode 。

這是該頁面的示例：

let myp5 = new p5(( sketch ) => {

  let x = 100;
  let y = 100;

  sketch.setup = () => {
    sketch.createCanvas(200, 200);
  };

  sketch.draw = () => {
    sketch.background(0);
    sketch.fill(255);
    sketch.rect(x,y,50,50);
  };
});