Widget:P5

La versión para imprimir ya no se admite y puede contener errores de representación. Actualiza los marcadores del navegador y utiliza en su lugar la función de impresión predeterminada del navegador.

En esta página es para usuarios avanzados que conocen conceptos de programación en javascript. El mal uso de este Widget puede provocar comportamientos inesperados.

Usando este Widget se puede insertar un solo sketch por página. Para insertar varios, debe hacerlo con el widget que emplea iframes.

Este Widget permite ingresar código de P5js directamente en la página, sin la necesidad de insertar un iframe como lo hace este otro widget de P5js.

Se utiliza del siguiente modo:


{{#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 
}}

Parámetros adicionales (que se asocian al div donde se insterla el canvas):

class
style

El sketch de p5 se incorpora dentro de un div con el id indicado. Si no se define el campo id su valor predeterminado es 'p5'. El sentido de utilizar este widget es para poder embeber objetos canvas que puedan adaptar su tamaño al elemento contenedor (responsive). Para lograr esto es necesario definir algo del tipo:

let sketch;
function setup() {
  sketch = createCanvas(document.getElementById("p5").offsetWidth, 350);
  sketch.parent('p5'); 
}

// si la ventana se redimensiona

function windowResized() {
  sketch = createCanvas(document.getElementById("p5").offsetWidth, 350);
  sketch.parent('p5');
}

.

Ejemplo fijo