Widget:P5m

Qué hace

Ejecuta varios sketches de P5.js en la misma página, cada uno en su contenedor.

Sintaxis

{{#widget:P5m|id=ID_ÚNICO|code=TU_CÓDIGO}}

Con todos los parámetros:

{{#widget:P5m|id=ID_ÚNICO|use_sound=true|class=CLASE|style=ESTILO|code=TU_CÓDIGO}}

Parámetros

Parámetro	Obligatorio	Valores	Por omisión
`id`	Sí	Identificador único; el mismo que va en parent()	—
`code`	Sí	Código de P5.js con el prefijo p.	—
`use_sound`	No	true carga p5.sound	false
`class`	No	Clase CSS del contenedor	—
`style`	No	Estilo CSS del contenedor	—

Ejemplo

{{#widget:P5m
|id=circulos
|code=
p.setup = function() {
  let lienzo = p.createCanvas(300, 150);
  lienzo.parent('circulos');
};
p.draw = function() {
  p.background(240);
  p.circle(p.mouseX, p.mouseY, 30);
};
}}

En la wiki, debajo del código se ve el resultado funcionando.

Bueno saber

Tres reglas: cada función de P5.js lleva p. delante; cada sketch tiene un id distinto; ese id va en parent(). Las clases comparten el mismo alcance: dales nombres distintos en cada sketch. Tampoco uses || ni }} juntos.

Cómo usarlo

Los pasos, con ejemplos, están en Incrustar video, audio, código y 3D y en Tu primer sketch en Casiopea.

Relacionados

P5 · P5js

Que el widget envuelva el código en una instancia de p5 (forma p.setup = function…).
Que los cuatro ejemplos de la página actual muestren su código.
Probar el ejemplo en la wiki local y anotar la fecha de verificación.