OOP

Sketch code

//Composición que llamé "Profundidades". Representa las corrientes bajo los oceános, la oscuridad, colores y el agua. El "modo dibujo" sería la linterna bajo el agua para ver más claro lo que hay.


let linea1 = []; //variable para crear lista de un tipo de linea
let linea2 = []; //variable para crear lista de otro tipo de linea
var on = true; //variable booleana para activar y desactivar acciones
let circulo1 = []; //variable para crear lista de un tipo de circulos


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');
   background( 0, 117, 102,70); //background con transparencia para efecto

  for(let i=0; i<50; i++){ //variable i para recorrer en filas
  linea1[i] = new linea(random(width),random(height),10,random(50,100), color(38, 92, 75)); //creo un tipo de líneas

   linea2[i] = new linea(random(width),random(height),10,random(50,100), color( 143, 193, 181)); //creo otro tipo de líneas

  circulo1[i] = new circulos(random(width),random(height),random(10,50), color(0, 117, 102)); //creo los círculos
  }


}



function draw() {


  if(on && key == 'd'){ //si aprieto d puedo ir dibujando con el mouse para ver las figuras, pero lo dibujado no será permanente, irá desapareciendo.
   stroke(255,80); //color blanco y con transparencia
    strokeWeight(500); //grosor del trazo
    line(mouseX,mouseY,pmouseX,pmouseY); //para que siga al mouse en "x" e "y"
  }

   if(on && key == 'a'){ //si aprieto la a desaparece el trazo blanco
   stroke(255,0); //transparencia 0 para que ya no se vea
    strokeWeight(500);
    line(mouseX,mouseY,pmouseX,pmouseY);
  }


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

  linea1[i].dibuja(); //llamo al objeto y la acción que quiero que haga
  linea1[i].avanza();
  linea2[i].dibuja();
  linea2[i].avanza();
  circulo1[i].dibuja();
  circulo1[i].avanza();



  }

}

function mousePressed(){ //si aprieto el mouse

   background( 0, 117, 102,70); //el fondo cambia de color
   for (let i=0; i<linea1.length; i++){ //variable i para recorrer en filas
  linea1[i].black(); //estas líneas cambian a negro
    linea1[i].b = !linea1[i].b; //b cambia su valor; de false a true
      }

  for (let i=0; i<circulo1.length; i++){ //variable i para recorrer en filas
     circulo1[i].cambiaCyT(); //circulos cambian su color y tamaño
     circulo1[i].b = !circulo1[i].b; //b cambia su valor; de false a true
  }

}


class linea{ //clase de objetos

  constructor(x,y,t1,t2,c,b){ //incluyo las variables que vaya a necesitar la clase
    this.x = x; //número o variable que venga desde afuera del objeto lo                     estamos transformando en una variable local. Variable posición en x
    this.y = y; //posición en y
    this.t1 = t1; //ancho
    this.t2 = t2; //alto
    this.c = c; //color
    this.b = false; //booleana
    this.c2 = c; //color inicial
  }

dibuja(){ //para dibujar el objeto
  for (let i=1; i<50; i++){ //variable i para recorrer en filas
    noStroke(); //sin trazo
    fill(this.c); //relleno con la variable c
    rect(this.x,(this.y)*i,this.t1,this.t2,500); //rectángulos redondeados que se repiten en filas según i
  }
}

avanza(){ //para que avancen a la derecha
 this.x = this.x + 5; //velocidad

  if(this.x>width){ //si llegan más allá del ancho del canvas
    this.x = 0; //que comience denuevo en 0
  }
 }

black(){ //para cambiar color de líneas
  if(this.b == true){ //si el valor de b cambia a true
   this.c = color(0,0,0); //son negras
  }
 }
}

class circulos{ //clase para los círculos

  constructor(x,y,t,c,r){ //agrego las variables que necesitará la clase
    this.x = x; //posición en x
    this.y = y; //posición en y
    this.t = t; //tamaño
    this.b = false; //booleana
    this.c = c; //color
    this.c2 = c //color inicial
    this.t2 = t //tamaño inicial


  }

  dibuja(){ //para dibujar los círculos
  for (let i=1; i<50; i++){ //variable i para recorrer en filas
    stroke(this.c); //línea de color c
    strokeWeight (1); //grosor delgado para la línea
    noFill(); //sin relleno
    circle(this.x, (this.y)*i, (this.t)); //círculos que se repiten en y según i
  }
}
  avanza(){ // para que los círculos caigan
 this.y= this.y + 0.5; //velocidad de caída

  if(this.y>height){ //si superan el alto del canvas
    this.y = 0; //que partan de cero
  }
 }

 cambiaCyT(){ //para que al hacer click con el mouse cambie el tamaño y color
  if( dist(mouseX, mouseY, this.x, this.y) < this.t/2) { //si hago click dentro del círculo
    if(this.b == true){ //y el valor de b es true
           this.c = color(255); //color blanco
           this.t = mouseY; //tamaño según donde esté el mouseY

        } else{ //sino
          this.c = this.c2 //que vuelva a su color inicial
          this.t = this.t2 //y tamaño inicial
        }
      }

   }
}