Random giphy GIF, Flip Frame Echo

// Giphy-Randimated -- Gets random Giphy "stickers" (transparent GIFs) and draws a pretty mandala-ish pattern with them

// leaving animated trails behind.

// This uses my free Giphy API keys, which have daily limits that are easily exceeded. Hence the code to switch to the next key

// automatically.  If you fork this, please register with Giphy to get your own API key.  Thanks!

//                                            - TradeMark G. / 2021.04.26

const totalFrames = 23;         // length of our video loop; lower is faster & smoother

const GIFspawnRate = 11000;     // a new GIF appears every 11 seconds

const echoFade = 3;             // 0 = visuals never fade; higher numbers = visual fade faster

let tag = ["alien", "hack", "code", "recognition", "download", "root", "binary", "electronic", "memory", "ufo", 

           "imagination", "techno", "trans", "desire", "eyes", "retro", "futuro", "ciberbody", "cross", "vortex",  

           "banality", "retina", "art", "trippy", "users", "hypnotic", "design", "psychedelic", "brain","mutant","bitch","matrix","java","programming","pussy","magic","witchcraft","software"]

const apiKey = ["A6MgOoK9jJ0wFHnuM3rI9GzXLkrmAChZ", "cSsLBM6hA6jGEF5CySVunnXgEviMsWwF", "fpK8CwaWa9vraD6NFgEAjHMfnOTgvhZr"];

let currentTag = 0, currentKey = 0;

let frames = [];

let mainFrame;

let currentFrame = 0, gifFrame = 0;

let GIFloaded;

let GIFs = [];

let timeForAnotherGIF = GIFspawnRate;

let sticker, stickerTitle, stickerPrev = "";

let msgBox, msgFade = 0;

let inputTag, tagTyping = false;

let pushing = true;

let debug = false;

​

function setup() {

  mainFrame = createCanvas(windowWidth, windowHeight);

  // mainFrame = createCanvas(windowWidth, windowHeight, WEBGL);

  background(0);

  inputTag = createInput('');

  inputTag.position(width / 2, height / 2);

  inputTag.size(width / 4);

  inputTag.style('font-family', 'sans-serif');

  inputTag.style('font-size', (height / 10) + 'px');

  inputTag.style('font-weight', 'bold');

  inputTag.style('text-align', 'center');

  inputTag.style('z-index', '10');

  // inputTag.style('background-color', 'blue');

  inputTag.style('opacity', 0.7);

  inputTag.center();

  inputTag.hide();

  for (i = 0; i < totalFrames; i++) {

    frames.push(createGraphics(windowWidth, windowHeight));

    // frames.push(createGraphics(windowWidth, windowHeight), WEBGL);

    frames[i].style('position', 'fixed');

  }

  currentTag = int(random(tag.length));

  keyTyped(); // show valid keypresses

  GIFs.push(new randomGIF());

}

​

function draw() {

  frames[currentFrame].hide();

  currentFrame++;

  if (currentFrame >= totalFrames) {

    currentFrame = 0;

  }

​

  frames[currentFrame].show();

  if (frameCount % 2 == 0 && echoFade > 0) {

    frames[currentFrame].background(0, echoFade);

  }

  if (GIFs[0].dead) GIFs.shift(); 

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

    if (GIFs[i].dead) {

      if (frameRate() > 15) {

        // GIFs[i] = new randomGIF();

      }

    } else {

      GIFs[i].update();

      GIFs[i].draw();

    }

  }

​

  textMsg();

​

  if (timeForAnotherGIF < millis()) {

    timeForAnotherGIF = GIFspawnRate + millis();

    GIFs.push(new randomGIF());

  }

}

​

function textMsg(tempMsg) { // a more WebGL-friendly showMsg

  if (msgBox == null) {

    msgBox = createDiv();

    msgBox.style('font-family', 'sans-serif');

    msgBox.style('font-size', '18px');

    msgBox.style('font-weight', 'bold');

    msgBox.style('color', '#cfc');

    msgBox.style('position', 'fixed');

    msgBox.style('top', '20px');

    msgBox.style('left', '20px');

    msgBox.style('text-shadow', '1px 1px 3px black');

  }

  if (tempMsg != null) { // new message to show

    tempMsg += "<br>press T to change search tag (" + tag[currentTag] + ")<br>press Space to change image";

    msgBox.html(tempMsg);

    msgFade = 1.0;

    // print(msgDiv.value);

    // print("changed.");

  }

  msgFade = msgFade > 0.01 ? msgFade - 0.01 : 0;

  msgBox.style("opacity", msgFade);

}

​

function keyTyped() {

  if (!tagTyping) {         // normal keypress handling:

    inputTag.hide();

    switch (key) {

      case 't':      // T pressed = go to next search tag

        ++currentTag;

        if (currentTag >= tag.length) currentTag = 0;

        textMsg("new tag: " + tag[currentTag]);

        break;

      case 'Enter':     // Enter = user types new search tag

        // print("t.l: " + tag.length + "  " + tag[tag.length-1]);

        inputTag.value('');

        inputTag.show();

        inputTag.elt.focus();

        tagTyping = true;

        // textMsg("Type in a new tag to search:");

        textMsg("<h1><b> >> Type in a new tag to search:<< </b></h1>");

        break;

      case 'p':        // P key = pause

        if (isLooping()) {      // if running normally,

          noLoop();             // pause

          image(frames[currentFrame], 0, 0);    // and paste current frame to canvas for screenshotting

        } else {                // if paused,

          loop();               // unpause

          background(0);        // and clear canvas

        }

        break;

      case "`":       // upper-left quote key = debug mode

        debug = !debug;

        tempMsg = debug ? "debug mode on" : "debug mode off";

        break;

      case '*':        // Star key = status report

        textMsg("millis: " + millis() + "   fps: " + frameRate().toFixed(2) + "  --  " + GIFs.length +

                " GIFs; oldest born: " + GIFs[0].birth + "   dies: " + GIFs[0].death + "  fade: " + GIFs[0].fade.toFixed(1)

               ); 

        if (debug) { print(GIFs); }

        break;

      case ' ':        // Space pressed = add a new GIF

        // GIFs.push(new randomGIF());

        timeForAnotherGIF = 50 + millis();

        break;

      default:        // unknown key = show valid keypresses

      textMsg(stickerTitle);

      // textMsg(stickerTitle);

    }

  } else {      // new search tag is currently being typed in

    inputTag.show();

    // if (debug) print(key);

    switch (key) {

      case 'Enter':     // Enter = finished typing new search tag

        // print("entered: " + inputTag.value());

        tag.push(inputTag.value());

        // print("t.l: " + tag.length + "  " + tag[tag.length-1]);

        currentTag = tag.length - 1;

        textMsg("searching new tag: " + tag[currentTag]);

        tagTyping = false;

        inputTag.hide();

        mainFrame.elt.focus();

        GIFs.push(new randomGIF());

        timeForAnotherGIF = 500 + millis();

        break;

      case 'Esc':       // Esc = abort typing in a search tag

        tagTyping = false;

        inputTag.hide();

        mainFrame.elt.focus();

        break;

    }

  }

}

​