let pg;

​

let tX, tY, sp, dspx, dspy, fct;

let loopTime = 100480; // Duración del loop aumentada (8 segundos a 60 FPS)

let currentFrame = 0; // Frame actual en el ciclo de animación

let loopCount = 0; // Contador de ciclos

​

// Variables para captura

let capturer;

let recording = false;

​

function setup() {

  createCanvas(400, 400);

  createSliders();

  pg = createGraphics(400, 400);

​

  // Configurar el capturador para GIF

  capturer = new CCapture({

    format: "gif",

    framerate: 60,

    verbose: true,

  });

​

  // Crear un botón para iniciar/detener la grabación

  let recordButton = createButton("Start Recording");

  recordButton.position(20, height + 200);

  recordButton.mousePressed(toggleRecording);

}

​

function draw() {

  background(0);

​

  // PGraphics

  pg.background(0);

  pg.fill(255);

  pg.textSize(100);

  pg.push();

  pg.translate(width / 2, height / 2);

  pg.textAlign(CENTER, CENTER);

  pg.text("About", 0, 0);

  pg.pop();

​

  let tilesX = tX.value();

  let tilesY = tY.value();

​

  let tileW = int(width / tilesX);

  let tileH = int(height / tilesY);

​

  // Calcular desplazamiento dinámico

  let displacementX = map(sin(TWO_PI * currentFrame / loopTime), -1, 1, 2, 8);

  currentFrame++;

​

  if (currentFrame >= loopTime) {

    currentFrame = 0;

    loopCount++;

    console.log(`Loop completado: ${loopCount}`);

  }

​

  for (let y = 0; y < tilesY; y++) {

    for (let x = 0; x < tilesX; x++) {

      let waveX = int(

        sin(frameCount * sp.value() + (x * y) * displacementX) * fct.value()

      );

      let waveY = int(

        sin(frameCount * sp.value() + (x * y) * dspy.value()) * fct.value()

      );

​

      if (dspx.value() === 0) {

        waveX = 0;

      }

      if (dspy.value() === 0) {

        waveY = 0;

      }

​

      let sx = x * tileW + waveX;

      let sy = y * tileH + waveY;

      let sw = tileW;

      let sh = tileH;

​

      let dx = x * tileW;

      let dy = y * tileH;

      let dw = tileW;

      let dh = tileH;

​

      copy(pg, sx, sy, sw, sh, dx, dy, dw, dh);

    }

  }

​

  // Si está grabando, capturar el frame

  if (recording) {

    capturer.capture(canvas);

  }

}

​

function toggleRecording() {

  if (!recording) {

    recording = true;

    capturer.start();

  } else {

    recording = false;

    capturer.stop();

    capturer.save(); // Guardar el archivo GIF

  }

}

​

function createSliders() {

  tX = createSlider(1, 80, 16, 1);

  tX.position(20, height + 40);

  createP("Tiles X").position(20, height);

​

  tY = createSlider(1, 80, 16, 1);

  tY.position(20, height + 100);

  createP("Tiles Y").position(20, height + 60);

​

  sp = createSlider(0, 1, 0.005, 0.01);

  sp.position(20, height + 160);

  createP("Speed").position(20, height + 120);

​

  dspx = createSlider(0, 0.1, 0.05, 0.001);

  dspx.position(180, height + 40);

  createP("Displacement X").position(180, height);

​

  dspy = createSlider(0, 0.2, 0, 0.01);

  dspy.position(180, height + 100);

  createP("Displacement Y").position(180, height + 60);

​

  fct = createSlider(0, 300, 100, 1);

  fct.position(180, height + 160);

  createP("Offset").position(180, height + 120);

}

​