Widget:P5m

Muestra múltiples sketches de P5.js en una misma página de forma ordenada.

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

⚠️ Este widget es para usuarios avanzados con conocimientos de JavaScript y P5.js. Úsalo con precaución.

Este widget utiliza funciones declaradas en Common.js.

Este widget permite insertar múltiples sketches P5.js en una misma página, creando instancias independientes de canvas. A diferencia de Widget:P5, este widget soporta varias instancias simultáneas.

¿Tienes dudas? Escríbenos a wiki@ead.cl y te ayudamos.

---

Cómo usarlo

Código:

{{#widget:P5m
|id = ID único para el sketch (obligatorio)
|code = Tu código P5.js aquí
|style = (opcional) estilos CSS al div contenedor
|class = (opcional) clase CSS al div contenedor
}}

---

Parámetros disponibles

Parámetro	Descripción	Valor por defecto
id	Identificador único del div contenedor. Debe ser distinto en cada sketch de la página	Obligatorio
code	Código P5.js del sketch usando la sintaxis p.	Obligatorio
class	Clase CSS para el div contenedor	—
style	Estilos CSS directos al div contenedor	—
use_sound	Carga la biblioteca p5.sound (true / false)	false

---

Consideraciones importantes

1. Usa el prefijo p.

Todas las funciones y variables de P5.js deben ir prefijadas con p. dentro de setup() y draw(). Esto asegura que cada sketch use su propia instancia independiente:

p.setup = function() {
  let canvas = p.createCanvas(400, 400);
  canvas.parent('mi-sketch-id');
  p.background(220);
};

p.draw = function() {
  p.ellipse(p.mouseX, p.mouseY, 50, 50);
};

2. Define un ID único por sketch

Cada sketch debe tener un id distinto, y debe coincidir exactamente con el canvas.parent() dentro del código:

{{#widget:P5m
|id = sketch-uno
|code =
p.setup = function() {
  let canvas = p.createCanvas(400, 400);
  canvas.parent('sketch-uno');
};
}}

3. Alcance de las clases

Las clases definidas en el sketch comparten el mismo alcance global. Esto puede generar conflictos si dos sketches usan clases con el mismo nombre. Para evitarlo:

• Usa nombres de clase únicos por sketch.
• O encapsula las clases dentro del scope de setup():

p.setup = function() {
  class UniqueParticle {
    // Implementación específica de este sketch
  }
  // Uso de la clase aquí
};

---

Limitaciones conocidas

El operador lógico OR (||) no funciona

El carácter | es usado por MediaWiki para separar parámetros del widget, lo que genera conflictos si lo usas dentro del código del sketch.

Solución 1 — Declaraciones if separadas:

if (x < 0) { /* código */ }
if (x > width) { /* código */ }

Solución 2 — Operador ternario:

(x < 0) ? /* código si verdadero */ :
(x > width) ? /* código si verdadero */ :
/* código si ambos falsos */;

Solución 3 — Función auxiliar:

function isOutOfBounds(value, min, max) {
  return (value < min) ? true : (value > max) ? true : false;
}
if (isOutOfBounds(x, 0, width)) { /* código */ }

---

---

Widgets relacionados

• Widget:P5 — para insertar un solo sketch P5.js con código directo en la página
• Widget:P5js — para insertar un sketch desde el editor online de P5.js mediante iframe