Spirograph

Por / / Arte generativo, Javascript, Processing

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);
}
}
OpenMediaLab.Art