Giphy Parade

//  Giphy Parade -- Gets many transparent, animated GIFs from giphy and parades them in sequence from left to right.

//                                            - TradeMark G. / 2021.04.07

//Register with Giphy to get your own key

​

let query = "weird";    //change to make a different search query

​

//break the API call into parts. Make sure you are using https (http wont work with openProcessing which is https)

let api = "https://api.giphy.com/v1/stickers/search?&api_key="; 

// let apiKey = "&api_key=Ln1OMDKTMpwmS1AX3OnlmVBfPsuSEkje";

let apiKey = ["Ln1OMDKTMpwmS1AX3OnlmVBfPsuSEkje", "A6MgOoK9jJ0wFHnuM3rI9GzXLkrmAChZ", "cSsLBM6hA6jGEF5CySVunnXgEviMsWwF", "fpK8CwaWa9vraD6NFgEAjHMfnOTgvhZr"];

let currentKey = 0;

let images = [];

let loadedImages = [];

let imgNum = 0;

let imgLimit = 50;

let erasing = false;

let GIFurls = [];

let GIFnum = 0;

let GIFsLoaded = 0;

let frameSkip = 1;

let offset;

let erasedLoadMsg = false;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  offset = int(random(200));

  getJSON();

}

​

function draw(){

  if (GIFsLoaded < 50) {          // still loading?

    textAlign(CENTER);

    textSize(50 - GIFsLoaded + 10);

    background('gray');

    // fill(GIFsLoaded * 5);

    fill(255, 255 - GIFsLoaded * 4);

    text("loading " + GIFsLoaded * 2 + "%", width / 2, 0.8 * height);

  } else {

    if (!erasedLoadMsg) {

      background('gray');

      erasedLoadMsg = true;

    }

    if (frameSkip < 2 || frameCount % frameSkip == 0) {

      if (GIFurls.length > 0) {       // if GIFs were received from giphy,

        // let i = (frameCount / frameSkip) % images.length;

        imageMode(CENTER);

        if (++imgNum >= imgLimit) {

          imgNum = 0;

          erasing = true;

        }

​

        // if (erasing) {

        //  if (images[imgNum] != null) images[imgNum].remove();

        //  images.push(createImg(GIFurls[GIFnum], query, function(){this.position(frameCount % width, height / 2)}));

        // } else {

        //  images[imgNum] = createImg(GIFurls[GIFnum], query, function(){this.position(frameCount % width, height / 2)});

        // }

​

        if (erasing && images.length > 0) {

          images.shift().remove();

        }

        imageMode(CENTER);

        push();

        translate(frameCount % width, height / 2);

        scale(1 + noise(0.001 * millis()));

        // let tempImg = createImg(GIFurls[GIFnum], query, function(){this.position(frameCount % width, height / 2)});

        // let tempImg = createImg(GIFurls[GIFnum], query);

        // tempImg.position(frameCount % width, height / 2);

        // images.push(tempImg);

        if (loadedImages[GIFnum] != null) image(loadedImages[GIFnum], 0, 0);

        // if (images[images.length - 1] != null) image(images[images.length - 1], frameCount % width, height / 2);

​

        // image(images[i], random(width), random(height));  //display each image

        // image(images[i], 1,1);  //display each image

        pop();

      }  

    }

  }

}

​

function getJSON() {

  let url = api + apiKey[currentKey] + "&offset=" + offset + "&q=" + query; //concatenate api call

  // loadJSON(url, gotData, loadError);

  GIFsLoaded = 0;

  loadJSON(url, gotData);

}

​

function gotData(giphy) { //this is the function that is called after loadJSON is finished

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

    GIFurls.push(giphy.data[i].images.downsized.url);

    // loadImage(giphy.data[i].images.downsized.url, gotGIF);

    let tempImg = loadImage(giphy.data[i].images.downsized.url, gotGIF);

    // createImg(giphy.data[i].images.downsized.url, query, function(){this.position(random(width) - 200, random(height) - 200)});

  }  

}

​

function gotImage(giphyImg) { //this is the function that is called after loadImage is finished

  images.push(giphyImg); //push image onto image array

}

​

function gotGIF(giphyImg) { //this is the function that is called after loadImage is finished

  // let tempImg = createImage(giphyImg.width, giphyImg.height);

  // tempImg = giphyImg;

  // print(">>> "+loadedImages.length + "\t\t" + tempImg.width);

  // print(giphyImg.numFrames);

  loadedImages.push(giphyImg);

  // GIFsLoaded++;

  GIFsLoaded = loadedImages.length;

}

​

function loadError(errMsg) {

  print("load error: " + errMsg);

  delay(1000);

  ++currentKey;

  if (currentKey >= apiKey.length) currentKey = 0;

  print("...API daily limit reached?  Let's try another API key:  " + apiKey[currentKey]);

  getJSON();

}

​

function keyPressed() {

  GIFnum++;

}

​

function INACTIVEkeyPressed() {

  offset += 50;

  images = [];

  background(255);

  url = api + "offset=" + offset + "&" + apiKey + "&q=" + query; //concatenate api call

  loadJSON(url, gotData);

}

​