Widget:P5
Qué hace
Ejecuta un sketch de P5.js escrito en la misma página. Uno por página.
Sintaxis
{{#widget:P5|code=TU_CÓDIGO}}
Con todos los parámetros:
{{#widget:P5|id=p5|class=p5|style=max-width:600px|code=TU_CÓDIGO}}
Parámetros
| Parámetro | Obligatorio | Valores | Por omisión |
|---|---|---|---|
code |
Sí | Código de P5.js | — |
id |
No | Identificador del contenedor | p5 |
class |
No | Clase CSS del contenedor | p5 |
style |
No | Estilo CSS del contenedor | — |
Ejemplo
{{#widget:P5
|code=
function setup() {
let lienzo = createCanvas(400, 200);
lienzo.parent('p5');
}
function draw() {
background(240);
circle(mouseX, mouseY, 40);
}
}}
En la wiki, debajo del código se ve el resultado funcionando.
Requisitos y privacidad
Un solo sketch por página: para varios, usa P5m.
Bueno saber
No uses || en el código (la wiki usa | para separar parámetros): escribe dos if separados. No escribas }} juntos: la wiki lo lee como el cierre del widget.
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
Por verificar en la wiki
- Valor por omisión de
class(la sintaxis y la tabla de la página actual no coinciden). - Si
lienzo.parent('p5')es necesario. - Reemplazar la solución 2 de la página actual, que usa el mismo
||que dice que no funciona. - Probar el ejemplo en la wiki local y anotar la fecha de verificación.