Giphy Overload

//  Giphy-hyperslideshow -- Gets many transparent, non-animated GIFs from giphy and quickly collages them together.

//

//Code built on a Daniel Shiffman example: https://www.youtube.com/watch?v=mj8_w11MvH8&index=10&list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r

//Register with Giphy to get your own key

//See the JSON here:

//http://api.giphy.com/v1/gifs/search?&api_key=Ln1OMDKTMpwmS1AX3OnlmVBfPsuSEkje&q=rainbow

​

// try "weird", "sunny", "food", "rainbow", fly

var query = "rainbow"; //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)

var api = "https://api.giphy.com/v1/stickers/search?"; 

var apiKey = "&api_key=Ln1OMDKTMpwmS1AX3OnlmVBfPsuSEkje";

// var apiKey = ["A6MgOoK9jJ0wFHnuM3rI9GzXLkrmAChZ", "cSsLBM6hA6jGEF5CySVunnXgEviMsWwF", "fpK8CwaWa9vraD6NFgEAjHMfnOTgvhZr"];

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

var images = [];

var frameSkip = 2;

var offset = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

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

  loadJSON(url, gotData);

}

​

function keyPressed() {

  offset += 50;

  images = [];

  background(255);

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

  loadJSON(url, gotData);

}

​

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

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

  loadImage(giphy.data[i].images.downsized.url, gotImage);   //loadImage can also be a callback, call gotImage after the image is loaded

  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 draw(){

  if (images.length > 0 && frameCount % frameSkip == 0) {

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

    imageMode(CENTER);

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

  }  

}