// based on: https://gist.github.com/antiboredom/129fd2311dec0046603e

​

let gif;

let cnv;

let lnk; 

let spacing = 10;

let message = Array.from("HappyCreativeCoding");

let startPosn = 0;

let scrollSpeed = 0;

let messageWidth = 0;

​

function setup() {

  cnv = createCanvas(100, 100);

  link = createA("#", "DOWNLOAD GIF");

  link.attribute("target", "_blank");

  link.hide();

  textAlign(LEFT, CENTER);

  textSize(100);

  textStyle(BOLD);

  colorMode(HSB);

​

  // Figure out the total length of the message + spacing

  for (let c of message) {

    messageWidth += (textWidth(c) + spacing);

  }

  // Figure out scoll speed based on length

  scrollSpeed = - messageWidth / 200;

  // Set up the gif creator

  setupGif();

}

​

function draw() {

  background(50);

​

  console.log(startPosn, messageWidth);

​

  let x = startPosn;

​

  for (let i = 0; i < message.length * 2; i++) {

    let cIdx = i % message.length

    let c = message[i % message.length];

    let cWidth = textWidth(c);

    let h = map(cIdx, 0, message.length - 1, 0, 360);

    fill(h, 100, 100);

    text(c, x, height / 2);

    x += cWidth + spacing;

  }

  startPosn += scrollSpeed;

  if (abs(startPosn) >= messageWidth) {

    gif.render();

    noLoop();

  } else {

    gif.addFrame(cnv.elt, {delay: 1, copy: true});

  }

}

​

function setupGif() {

  gif = new GIF({

    workers: 2,

    quality: 40,

    width: width,

    height: height,

  });

​

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

    debugger;

    let url = URL.createObjectURL(blob);

    link.show();

    link.attribute('href', url);

    // window.open(url);

    setupGif();

  });

}

​

// function keyPressed(){

//   loop();

// }