let squares = [];
let cam;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  cam = createCamera();
  background(255);

  let punkCoords = [
    [0, 0], [1, 0], [2, 0],
    [0, 0], [1, 1], [2, 1],
    [0, 2], [1, 2], [2, 2],
    [1, 3],
    [0, 4], [0, 3], [2, 3],
    [3, 2] // Nuevas coordenadas para el cuadrado rojo del lado derecho del medio
  ];

  for (let coord of punkCoords) {
    let x = coord[0] * 40 + 150;
    let y = coord[1] * 40 + 200;
    let z = 0;
    let fillColor, specularColor;

    if (coord[1] === 1) {
      fillColor = color(255);
      specularColor = color(255);
    } else if (coord[1] === 0 || (coord[0] === 3 && coord[1] === 2)) {
      fillColor = color(255, 0, 0); // Rojo
      specularColor = color(255, 150, 150);
    } else if (coord[1] === 3 && (coord[0] === 0 || coord[0] === 2)) {
      fillColor = color(255, 228, 196);
      specularColor = color(255, 200, 150);
    } else {
      fillColor = color(255, 228, 196);
      specularColor = color(255, 200, 150);
    }

    squares.push(new Square(x, y, z, 40, fillColor, coord[1] === 1, specularColor)); // true para indicar que es un cuadrado de ojos
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function draw() {
  background(255);
  orbitControl(5, 3, 0);
  let dirX = cos(QUARTER_PI / 180); // Convertimos 1 grado a radianes
  let dirY = sin(QUARTER_PI / 180); // Convertimos 1 grado a radianes
  directionalLight(255, 255, 255, dirX, dirY, 0); // Luz direccional desde el frente (1 grado)

  for (let square of squares) {
    square.display();
  }
}

class Square {
  constructor(x, y, z, size, fillColor, isEye, specularColor) {
    this.x = x - width / 4;
    this.y = y - height / 2;
    this.z = z;
    this.size = size;
    this.fillColor = fillColor;
    this.isEye = isEye;
    this.specularColor = specularColor;
    this.brightnessOffset = random(0.7, 1.3); // Cambiar el brillo aleatoriamente
    this.eyeRotation = 0; // Rotación inicial del ojo
    this.eyeSpeed = random(0.01, 0.03); // Velocidad de movimiento del ojo
  }

  display() {
    push();
    translate(this.x, this.y, this.z);
    ambientMaterial(this.fillColor);
    specularMaterial(red(this.specularColor) * this.brightnessOffset, green(this.specularColor) * this.brightnessOffset, blue(this.specularColor) * this.brightnessOffset); // Modificar el brillo
    box(this.size);

    if (this.isEye) { // Si es un cuadrado de ojos
      let eyeSize = this.size * 0.2; // Tamaño de los ojos
      let eyeOffset = this.size * 0.25; // Desplazamiento de los ojos

      fill(0); // Color negro para los ojos

      // Calcula las coordenadas absolutas de un solo ojo
      let eyeX = -this.size / 2 + eyeOffset * 1.5;
      let eyeY = -this.size / 2 + eyeOffset * 1.5;
      let eyeZ = this.size / 2 + eyeSize / 2;

      // Aplicar desplazamiento y rotación al ojo
      translate(eyeX, eyeY, eyeZ);
      this.eyeRotation += this.eyeSpeed; // Aumentar la rotación del ojo
      let maxRotation = QUARTER_PI / 8; // Máxima rotación permitida
      let rotation = sin(this.eyeRotation) * maxRotation; // Rotación sinusoidal
      rotateY(rotation); // Rotar el ojo
      sphere(eyeSize); // Dibujar el ojo
    }
    pop();
  }
}