Widget:P5
De Casiopea
Añade sketches interactivos creados con P5.js para visualizaciones dinámicas.
| Tipo | Tutorial |
|---|---|
| Para quién | Editor general |
| Nivel | Principiante |
| Estado | Vigente |
| Pertenece a | Ayuda:Guía para incrustar objetos |
| Leer antes | Ayuda:Cómo editar la Wiki |
| Mantiene | Fauve Bellenger |
| Revisado | 2026-06-03 |
Esta página está dirigida a usuarios avanzados con conocimientos de JavaScript. El mal uso de este widget puede provocar comportamientos inesperados.
¿Tienes dudas? Escríbenos a wiki@ead.cl y te ayudamos.
Cómo usarlo
Código:
{{#widget:P5
|id = (opcional) por defecto es 'p5'
|code = pegar acá el código P5.js
|class = (opcional) clase CSS del div contenedor
|style = (opcional) estilo CSS directo al div
}}
Parámetros disponibles
| Parámetro | Descripción | Valor por defecto |
|---|---|---|
id |
Identificador único del div contenedor | p5
|
code |
Código P5.js del sketch | Obligatorio |
class |
Clase CSS para el div contenedor | p5
|
style |
Estilos CSS directos al div contenedor | — |
Limitaciones importantes
Un solo sketch por página
Este widget no soporta múltiples sketches en la misma página. Para eso usa Widget:P5m.
El operador lógico OR (||) no funciona
El carácter | es usado por MediaWiki para separar parámetros del widget, lo que genera conflictos de sintaxis si lo usas dentro del código del sketch.
Solución 1 — Usa declaraciones if separadas:
if (x < 0) { /* Código */ }
if (x > width) { /* Código */ }
Solución 2 — Crea una función auxiliar:
function isOutOfBounds(x, min, max) {
return (x < min) || (x > max);
}
if (isOutOfBounds(x, 0, width)) { /* Código */ }
Ejemplo
Este sketch crea un canvas con estrellas que giran:
Widgets relacionados
- Widget:P5js — inserta un sketch P5.js desde una URL externa mediante iframe
- Widget:P5m — permite insertar múltiples sketches P5.js en una misma página
