Patrón Urbano

Sketch code

let r=315; //variable con su valor inicial para la rotación
let c; // variable para cambiar el color celeste del rombo
var on = true; //variable booleana para activar los botones. En true permanece apagado.

function setup() { //función para definir variables. Corre una sola vez.

  let cnv = createCanvas(960, 540); //ancho y alto del canvas
  cnv.parent('p5-sketch-holder'); // contiene el canvas dentro de la página en vez de flotar en el body
  cnv.style('width', '100%'); // p5 pone width/height fijos en línea por defecto, lo que le gana al CSS del contenedor — esto lo reemplaza para que escale responsive
  cnv.style('height', 'auto');
  c=color(71,168,189); // definimos el color para la variable c
}


function draw() { //función que corre en loop

  background(35,61,77); // color para el background

  for (let i=-1; i<10; i++){ //variable i para recorrer en filas
    for(let j=-1; j<10; j++){ //variable j para recorrer en columnas

  if (mouseIsPressed){ //cuando el mouse está apretado

      rombo(i*120, j*120, mouseX, r, c); //aumenta el tamaño dependiendo de                                          donde esté el mouse en el eje x
      rombo(60+i*120, 60+j*120, mouseY,r, c); //aumenta el tamaño                                        dependiendo de donde esté el mouse en el eje y

  }else{ //sino
      rombo(i*120, j*120, 80, r, c); // Que el rombo permanezca con un solo                                         tamaño y quieto
      rombo(60+i*120, 60+j*120, 80, r, c); //Que el rombo permanezca con un solo                                    tamaño y quieto
     }

  if(on && key == 'a'){ //si se aprieta un botón y es la "a"
    c = color(71+i*30,168+i*30,189+i*30); //cambia el color                                         mediante la variable i
    r=r+i*0.5+j; //rota constantemente y en diferentes grados según                    "j" e "i"
  }

  if(keyIsPressed && key == 's'){ //si se aprieta un botón y es la "s"
    c = color(71+j*50,168+j*50,189+j*50); //cambia el color mediante la                                                variable j
    r=r-0.05; //rota constantemente
  }

  if(keyIsPressed && key == 'd'){ //si se aprieta un botón y es "d"
    c = color(71,168,189); //vuelve al color original
    r=315; //vuelve al valor original de r y no rota
      }
    }
  }
}



function rombo(x,y,tam,r,c){ //función para un solo módulo. *Módulo: el rombo con sus rombos internos. Agrego variables "x" para la ubicación en el eje x, "y" para la ubicación en el eje y, "tam" para el tamaño del rombo, "r" para los grados de rotación del rombo y "c" para variar el color celeste del rombo.

  push(); //creo un push pop para que la rotación se realice en el lugar que quiero. Para eso me ayudará "translate" que trasladará el "x" e "y" originales del rombo a otro punto para hacer la rotación desde ahí.
  translate(x,y); //traslado el punto (0,0) a (x,y)
  rotate(radians(r)); //Transformo los radianes en grados y roto el rombo.
  noStroke(); //para que no tenga borde el rombo
  fill(c); //relleno de color "c"
  rect(0, 0, tam); //creo el rombo en (0,0) de tamaño "tam"
  fill(255); //relleno de color blanco
  rect(0,0,tam-5);
  fill(c);
  rect(0,0,tam-20);
  fill(254,127,45);
  rect(0,0,tam-25);
  fill(c);
  rect(0,0,tam-35);
  fill(255);
  rect(0,0,tam/2);
  fill(c);
  rect(0,0,35);
  pop();
}

function keyPressed(){ //función para cuando aprieto una tecla

    if(on){ //si aprieto la tecla
     on = false; //la variable "on" cambia su valor a "falso" y se activa                     la animación. Esta se mantiene constante sin tener que                      mantener el botón apretado.
    } else{ //sino la aprieto
      on = true; // la variable "on" se mantiene o vuelve a su estado                          inactivo.
    }
}