let radius = 0;

let conejo49;

let conejodis;

let conejosv;

let font;

let numerosRomanos = [

  "III",

  "IX",

  "VII",

  "XII",

  "V",

  "I",

  "IV",

  "X",

  "II",

  "XI",

  "VI",

];

let currentVideoIndex = 0;

let videos = [];

let tarde;

​

​

function preload() {

  font = loadFont("ShantellSans.ttf");

  tarde = loadSound("late.mp3");

  conejo49 = createVideo("conejo49b.mp4");

  conejodis = createVideo("conejodis.mp4");

  conejosv = createVideo("conejosv.mp4");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);//(800,600)

  frameRate(15);

  tarde.loop();

  // Configuración de los videos

  videos = [conejo49, conejodis, conejosv];

  for (let video of videos) {

    video.loop(); // Establecer los videos en loop

    video.hide(); // Ocultar los videos

    video.volume(0); // Establecer el volumen del video en 0 (mudo)

    video.size(230, 230); // Establecer tamaño

    video.onended(videoEnded); // Asignar evento al finalizar el video

  }

​

  textFont(font);

​

}

​

​

function draw() {

  background(30);

  translate (width/6, 0)

  reloj(500, 290);

  let radius = 215;

  fill(255); // Color del texto (blanco)

  textSize(26); // Tamaño del texto

  textAlign(RIGHT, BOTTOM); // Alineación del texto (derecha, abajo)

  text("I'm late, I'm late!!!", width /2.5, height /2.5);

​

  // Calculamos el ángulo inicial basado en el segundo actual

  let startAngle = map(second(), 0, 59, PI / 2, -TWO_PI + PI / 2);

​

  // Dibujamos los números romanos alrededor del reloj en órbita

  for (let i = 0; i < numerosRomanos.length; i++) {

    // Calculamos el ángulo antihorario para cada número

    let angle = startAngle + map(i, 0, numerosRomanos.length, 0, -TWO_PI);

​

    // Calculamos la posición en el círculo

    let x = radius * cos(angle) - 8;

    let y = radius * sin(angle) + 4;

​

    // Dibujamos el número romano en la posición calculada

    textSize(18);

    text(numerosRomanos[i], x, y);

  }

}

​

// Definimos la función reloj que dibuja el reloj en la posición (x, y)

function reloj(x, y) {

  translate(x, y); // Translate al punto (x, y)

​

  // Dibujamos el reloj (imagen)

  imageMode(CENTER);

  image(videos[currentVideoIndex], 0, 0, 250, 250);

​

  // Dibujamos las manecillas del reloj

  let v = createVector(random(-100, 100), random(-100, 100));

  strokeWeight(7);

  stroke(255);

  line(0, 0, v.x, v.y);

​

  // Dibujamos el círculo exterior del reloj

  strokeWeight(4);

  noFill();

  circle(0, 0, 350);

​

  // Dibujamos el círculo interior del reloj

  strokeWeight(2);

  circle(0, 0, 330);

}

function videoEnded() {

    currentVideoIndex = (currentVideoIndex + 1) % videos.length;

    for (let i = 0; i < videos.length; i++) {

        if (i !== currentVideoIndex) {

            videos[i].stop();

            videos[i].hide();

        }

    }

    videos[currentVideoIndex].show();

    videos[currentVideoIndex].size(230, 230); // Establecer tamaño del nuevo video

}

​

function mouseClicked() {

        currentVideoIndex = (currentVideoIndex + 1) % videos.length;

        // Detiene y oculta todos los videos excepto el actual

        for (let i = 0; i < videos.length; i++) {

            if (i !== currentVideoIndex) {

                videos[i].stop();

                videos[i].hide();

            }

        }

        // Reproduce el nuevo video

        videos[currentVideoIndex].show();

        videos[currentVideoIndex].play();

        videos[currentVideoIndex].size(230, 230); // Establecer tamaño del nuevo video

}