let currentImage;

let gifRecorder;

let recording = false;

​

function preload() {

  // Load images and store them in an object

  images[0] = loadImage('avatar_normal.png');

  images[1] = loadImage('avatar_talk.png');

  images[2] = loadImage('avatar_explain.png');

  images[3] = loadImage('avatar_explain_talk.png');

  images[4] = loadImage('avatar_hi.png');

  images[5] = loadImage('avatar_think.png');

  images[6] = loadImage('avatar_think_talk.png');

}

​

function setup() {

  createCanvas(400, 400);

  currentImage = images[0]; // Start with the first image

  // Setup gif.js

  gifRecorder = new GIF({

    workers: 2,

    quality: 10,

    transparent: 0x00FF00, // Use a key color (green here) as the transparent color

  });

  // Download button

  let downloadButton = createButton('Download GIF');

  downloadButton.mousePressed(downloadGIF);

}

​

function draw() {

  background(0, 255, 0); // Use green background for transparency in the GIF

  image(currentImage, 0, 0, width, height);

  if (recording) {

    gifRecorder.addFrame(get(), { delay: 100, copy: true });

  }

}

​

function keyPressed() {

  if (key >= '0' && key <= '6') {

    currentImage = images[key];

  }

  if (key === 'R') {

    recording = !recording;

    if (recording) {

      console.log('Recording started...');

      gifRecorder.frames = []; // Clear previous frames

    } else {

      console.log('Recording stopped.');

      gifRecorder.render();

    }

  }

}

​

function downloadGIF() {

  gifRecorder.on('finished', function(blob) {

    saveAs(blob, 'animated_avatar.gif');

  });

}

​