Widget:P5
Este widget permite insertar un solo sketch por página utilizando P5.js. A diferencia del Widget:P5js, este widget no utiliza iframes, lo que permite una integración más fluida y adaptable al contenedor (responsive).
Si necesitas insertar múltiples sketches por página, utiliza este otro widget de P5.js. Este widget está diseñado para usuarios avanzados que tienen conocimientos en JavaScript.
Instrucciones de Uso
Para incrustar un sketch, utiliza el siguiente formato:
{{#widget:P5
|id = (opcional) predeterminadamente es 'p5'
|code = pegar acá el código
|class = (opcional) clase CSS del div
|style = (opcional) estilo directo al div
}}
Ejemplo fijo:
Este ejemplo crea un canvas con estrellas que giran.
Parámetros
(que se asocian al div donde se insterla el canvas)
- id: Identificador único del div contenedor. Si no se especifica, su valor por defecto es p5.
- class: Clase CSS para el div.
- style: Estilo directo para el div.
Parámetros adicionales
- class
- style
Otras Opciones
Si deseas usar el widget en otra página, aquí tienes ejemplos alternativos que pueden ser útiles.
Recuerda: solo puedes usar un sketch por página con este widget.
Canvas Responsivo
Este código ajusta automáticamente el tamaño del canvas al contenedor en el que se encuentra:
Limitaciones conocidas
El widget P5m, aunque versátil y potente para incrustar sketches de p5.js en páginas de MediaWiki, tiene algunas limitaciones importantes que los usuarios deben tener en cuenta:
- Un solo sketch por página: Este widget no soporta múltiples sketches en la misma página. Para eso, utiliza el Widget:P5m.
- Uso del operador lógico OR (||):
Una limitación significativa de este widget es la imposibilidad de usar el operador lógico OR (||) directamente en el código del sketch. Esto se debe a que el carácter de barra vertical (|) se utiliza en MediaWiki para separar los parámetros del widget, lo que causa conflictos de sintaxis cuando se intenta usar el operador OR.
Soluciones:
- Usa declaraciones if separadas:
if (x < 0) { /* Código */ }
if (x > width) { /* Código */ }
- Crea una función auxiliar
function isOutOfBounds(x, min, max) {
return (x < min) || (x > max);
}
if (isOutOfBounds(x, 0, width)) { /* Código */ }
