Estoy tratando de hacer un boceto P5.js 'genérico' que puedo modificar en función de un parámetro pasado, con la intención de poder generar múltiples bocetos en una sola página para mostrar cómo funcionan las diferentes entradas una al lado de la otra. lado.
Siguiendo la guía , veo una sintaxis como esta (y la he extendido para completar varios divs):
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'));No soy muy bueno con ES6, pero tengo problemas para pasar un conjunto de parámetros para poder modificar el código P5.js.
Lo que me gustaría hacer es pasar, digamos, una variable ID en cada instancia de s y hacer que el boceto se ejecute de manera diferente, en lugar de hacer tres llamadas const s separadas y duplicar datos.
Cree una función que tome idx y devuelva la función original.
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'))