Widget:P5js
Inserta código P5.js directamente desde una URL externa, ideal para proyectos alojados en la web.
| 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 |
Si prefieres escribir el código P5.js directamente en la página en lugar de usar el editor online, usa Widget:P5 en su lugar.
¿Tienes dudas? Escríbenos a wiki@ead.cl y te ayudamos.
Paso 1 — Obtén la URL del sketch
- Abre tu sketch en el editor P5.js.
- Ve al menú superior → File → Share.
- En la ventana emergente encontrarás tres opciones de URL:
| Opción | URL | Muestra |
|---|---|---|
present |
https://editor.p5js.org/usuario/present/ID |
Solo el sketch a pantalla completa |
full |
https://editor.p5js.org/usuario/full/ID |
Solo el sketch |
sketches |
https://editor.p5js.org/usuario/sketches/ID |
Sketch + código fuente |
Copia la URL según lo que quieras mostrar.
Paso 2 — Inserta el widget
Código básico (solo el sketch):
{{#widget:P5js
|url = https://editor.p5js.org/hspencer/present/59qQvsx1m
|width = 900
|height = 400
}}
Así se ve aplicado:
Mostrando el sketch junto al código fuente:
{{#widget:P5js|url = https://editor.p5js.org/hspencer/sketches/q_4p3Vxjy}}
Así se ve aplicado:
Parámetros disponibles
| Parámetro | Descripción | Valor por defecto |
|---|---|---|
url |
URL del sketch desde el editor P5.js | Obligatorio |
width |
Ancho del iframe en píxeles o porcentaje | 100%
|
height |
Alto del iframe en píxeles | 800
|
style |
Estilos CSS adicionales al iframe | — |
class |
Clases CSS adicionales al iframe | — |
Widgets relacionados
- Widget:P5 — inserta código P5.js directamente en la página, sin iframe
- Widget:P5m — permite insertar múltiples sketches P5.js en una misma página