Partiendo de uno de los ejemplos de la comunidad p5*js1Processing Foundation, coloqué un sketch de dibujo generativo sobre la imagen de portada de la página de inicio. Los siguientes fragmentos de código muestran el proceso.
DISEÑO EN PHP & HTML PARA LA PLANTILLA:
<?php if ( is_front_page() ) : ?> <div class="spirograph"> <iframe class="spirograph-iframe" src="https://.../spirograph.html"></iframe> </div> <?php else : ?> <div class="openmedia-header-image"> </div> <?php endif;?>
CÓDIGO HTML (spirograph.html):
<html> <head> <script src="https://.../p5.js"></script> <script src="https://.../spirograph.js"></script> </head> </html>
CÓDIGO CSS (HOJAS DE ESTILO):
.spirograph { position: relative; overflow: hidden; padding-top: 34%; background-image: url("https:.../horses2.jpg"); background-repeat:no-repeat; background-size:cover; } .spirograph-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
EL CÓDIGO JAVASCRIPT (spirograph.js) QUE GENERA EL DIBUJO GENERATIVO:
text/x-generic spirograph.js ( ASCII text ) let NUMSINES = 20; let sines = new Array(NUMSINES); let rad; let i; let fund = 0.005; let ratio = 1; let alpha = 50; let trace = false; var w = window.innerWidth; // AGREGAR VARIABLES "width" y "height". ÉSTOS DEPENDEN var h = window.innerHeight; // EN EL ANCHO Y ALTURA DEL DIV CON CLASS=spirograph function setup() { createCanvas(w, h); // CREAR CANVAS CON DIMENSIONES DEL DIV CON CLASS=spirograph rad = height / 4; clear(); // CAMBIAR EL OPERADOR "background" POR "clear" PARA TENER FONDO TRANSPARENTE for (let i = 0; i<sines.length; i++) { sines[i] = PI; } } function draw() { if (!trace) { clear(); // CAMBIAR EL OPERADOR "background" POR "clear" PARA TENER FONDO TRANSPARENTE stroke(0, 255); noFill(); stroke(255, 255, 255); // DIBUJO CON COLOR BLANCO strokeWeight(2); } // INICIAR DIBUJO GENERATIVO push(); translate(width / 2, height / 2); for (let i = 0; i < sines.length; i++) { let erad = 0; if (trace) { stroke(0, 0, 255 * (float(i) / sines.length), alpha); fill(0, 0, 255, alpha / 2); erad = 5.0 * (1.0 - float(i) / sines.length); } let radius = rad / (i + 1); rotate(sines[i]); if (!trace) ellipse(0, 0, radius * 2, radius * 2); push(); translate(0, radius); if (!trace) ellipse(0, 0, 5, 5); if (trace) ellipse(0, 0, erad, erad); pop(); translate(0, radius); sines[i] = (sines[i] + (fund + (fund * i * ratio))) % TWO_PI; } pop(); } function keyReleased() { if (key==' ') { trace = !trace; background(255); } }