Transcompo

Sketch code

let bla; //variable para color blanco
let neg; //variable para color negro
let gri; //variable para color gris
let rotaciones = []; //lista de rotaciones para las flores
let posicionesX = []; // lista de posiciones en x para las flores
let posicionesY = []; // lista de posiciones en y para las flores
let colores= []; //lista de colores para las flores
let tam=[]; //lista de tamaños para las flores
let r=320; //variable para rotación de las flores
let posX=0; //variable para posición en x del vagón y monitos
let c; //variable para color del vagón


function setup() {
  let cnv = createCanvas(1080,1080); //tamaño 1080x1080px
  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');
  pixelDensity(1); // con densidad 2 (retina) + el resize por CSS de arriba, background() solo llenaba hasta el tamaño mostrado en CSS × esa densidad, no el buffer real — dejaba una franja del canvas sin pintar
  neg= color(0); //defino la variable con el color negro
  gri= color(80,80,80);//defino la variable con el color gris
  bla= color(255);//defino la variable con el color blanco
  c=color(0); //defino la variable con el color negro

  for(let i=0; i<50; i++){ //variable i para recorrer en filas
   rotaciones[i] = 45 + 5 *i; //varían las rotaciones dependiendo del i
   posicionesX[i] = random(0, width); //posición random en x a lo ancho del canvas
   posicionesY[i] = random(height); //posición random en eje y
   colores[i] = color(random(255), random(255), random(255)); //color random entre todas las opciones de colores
    tam[i] = random(20, 100); //tamaño random entre los 20 y 100 px
   }
}


function draw() {

  background (0);

  if (mouseX <= width/2 ){ //si el mouseX es menor a la mitad del canvas
  background(0); //fondo negro
}else{ //sino
  background(255); //fondo blanco
}

  for(let i=0; i<50; i++){ //variable i para recorrer en filas

    flores(posicionesX[i], posicionesY[i], tam[i],tam[i],r, bla, colores[i]); //flores en distintos tamaños, colores, rotaciones y posiciones


    if(key == 's'){ //si se aprieta un botón y es la "s"
    flores(posicionesX[i], posicionesY[i], 100,mouseY,mouseY, bla, colores[i]); //cambian el tamaño en "y" y las rotaciones de las flores mediante mouseY
    }

    if(key == 'd'){ //si se aprieta un botón y es la "d"
    flores(posicionesX[i], posicionesY[i], mouseY,100,320, colores[i], c); //cambia el tamaño en x de las flores con mouseY
      if (mouseX <= width/2){ //si el mouseX es menor a la mitad del ancho del canvas
        c=bla; //el color de esas flores sea blanco
      } else{ //sino, es decir, si es que mouseX es mayor a la mitad del ancho
        c=neg; //negro
      }
    }

    if(key == 'a'){ //si se aprieta un botón y es la "a"
    r=r+i*0.02; //rota constantemente según "i"
    }


    if (mouseIsPressed){ //si se aprieta el mouse
        if (frameCount%7 == 0){ //si el resto de la división del número de frames en 7 es igual a 0
    randomizar(); //randomizar las flores para que se vea como lluvia
      }
    }
 }

 for(let i=-2; i<10; i++){ //variable i para recorrer en filas
  posX=posX+0.5; //posX se irá moviendo a la derecha
  vagon(c,posX+i*249, 440, mouseX, 200); //vagón moviéndose a la derecha
   if (i%2==0){ //si el resto de la división de i en 2 es igual a 0
     c=neg; //vagón negro
   }else{   //sino
     c=gri; //vagón gris
   }
   if(posX==width/4){ //si posX es igual a un cuarto del ancho del canvas
     posX=-1; //que se devuelva a -1
   }
}
  monito(posX+64.5,533.66, 38, 38); //monito moviéndose con posX a la derecha
 }






function monito(pX, pY, ancho, alto){ //función para crear los monitos en el vagón
   for (let i=0; i<50; i++){ //variable i para recorrer en filas
  fill(0); //rellenar con negro
  circle(pX+i*250, pY, ancho);//cabeza
  ellipse(pX+i*250, pY+42.18, ancho-9,alto+24);//cuerpo
  rect(pX-14.5+i*250, pY+41.84, ancho-9,alto-6);//cuerpo

  pX= pX+40; //para que vaya cambiando su posición y se vea como que el monito camina dentro del vagón
  }
}


function vagon(c, psX, psY, anch, alt){ //función para crear el vagón
  noStroke();
  fill(c);
  rect(psX,psY,anch,alt); //vagón
  fill(255);
  rect(psX+37.5,psY+32.5, anch-75,alt-65, 10); //ventana


}



function flores(posX, posY, tam, tama, r, c1, c2){ //función para las flores

     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 de cada ellipse a otro punto para hacer la rotación desde ahí.
   translate(posX,posY);//traslado el punto (0,0) a (posX,posY)
   rotate(radians(r));//Transformo los radianes en grados y roto las figuras.
     noStroke(); //para que no tengan borde las figuras
    fill(c1);//rellenar de color 1
    ellipse(32,40,tam-35);
   fill(c2);
   //ellipse(462,176,85, 70,   r);
     ellipse(0  ,0  ,tam,tama, r);//creo la ellipse en 0,0 y de tamaños tam y tama con rotación r
   //ellipse(528,184, 64,78, r+5);
     ellipse(66,8,tam-21,tama+8, r+5);
   //ellipse(535,241,65,50, r);
     ellipse(73,65,tam-20,tama-20, r);
   //ellipse(492,271,64,74, r+23);
     ellipse(30,95,tam-21,tama+4, r+23);
  //ellipse(449, 241,64,80, r-8);
  ellipse(-13, 65,tam-21,tama+10, r-8);
  pop();


}

function randomizar(){ //función para hacer la lluvia de flores
  for(let i=0; i<50; i++){ //variable i para recorrer en filas
    rotaciones[i] = 45+5*i; //rotaciones cambian mediante i al recorrer la lista
    posicionesX[i] = random(0,width);//posiciones en x cambian al azar a lo ancho del canvas mediante i al recorrer la lista
    posicionesY[i] = random(height);//posiciones en y cambian al azar entre 0 y 1080 mediante i al recorrer la lista
    colores[i] =  color(random(255), random(255), random(255));
    tam[i] = random(20, 100);
  }
}