將參數傳遞給 ES6 閉包（用於多個 P5.js 草圖）

Question

我正在嘗試制作一個“通用”的 P5.js 草圖，我可以根據傳入的參數對其進行調整，目的是能夠在單個頁面上生成多個草圖，以顯示不同的輸入如何並排工作-邊。

按照指南，我看到了這樣的語法（我已經擴展了它以填充多個 div：

const s = ( sketch ) => {

  let x = 100;
  let y = 100;

  sketch.setup = () => {
    sketch.createCanvas(500, 500);
    console.log(idx);
  };

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

let myp5_1 = new p5(s, document.getElementById('p5-sketch1'));
let myp5_2 = new p5(s, document.getElementById('p5-sketch2'));
let myp5_3 = new p5(s, document.getElementById('p5-sketch3'));

我不擅長 ES6，但我正在努力傳遞一組參數以調整 P5.js 代碼。

我想這樣做的是一個ID變量傳遞的，說，進入的每個實例s ，並有草圖執行不同的，而不是使三個獨立的const s呼叫和復制數據。

Answer 1

創建一個接受 idx 並返回原始函數的函數。

const s = (idx) => ( sketch ) => {

  let x = 100;
  let y = 100;

  sketch.setup = () => {
    sketch.createCanvas(500, 500);
    console.log(idx);
  };

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

let myp5_1 = new p5(s(0), document.getElementById('p5-sketch1'));
let myp5_2 = new p5(s(1), document.getElementById('p5-sketch2'));
let myp5_3 = new p5(s(2), document.getElementById('p5-sketch3'))