将参数传递到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'))