将参数传递到 ES6 闭包中（对于多个 P5.js 草图）

Question

我正在尝试制作一个 'generic' P5.js 我可以根据传入参数进行调整的草图，目的是能够在单个页面上生成多个草图以显示不同的输入如何并排工作。

在 guide 之后，我看到了这样的语法（并且我将其扩展为填充多个 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 和 returns 原始函数的函数。

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'))

将参数传递到 ES6 闭包中（对于多个 P5.js 草图）

Passing parameters into ES6 closure (for multiple P5.js sketches)

javascript

closures

ecmascript-6

p5.js