Search Giphy Get Images

For my project this week, I decided to use the giphy API. It was a bit complicated and I didn’t come out with what I thought I would. I wanted to use the search API to allow my user to search for anything in the giphy arsenal and have 3 gifs come up in my p5.ja sketch. But I across a few problems. One problem I came across is the JSON viewer on Chrome didn’t read the API and come out with images it gave out specific URLs, much to my chagrin.

1

Because of this, I had trouble trying to extract the actual gif from the URL that was given to me. Using the loadImage function didn’t allow me to load the actual links of the gifs and only the first still image of that gif, because the loadImage function requires the link or image to be in ‘quotes’ and that changed the link.

2

So I got the images to load, but they all loaded on top of each other, because I had to call them somewhere and 0, 0 was my best option. I think a nested loop would help remove the canvas to put the images one after the other, but I’m not sure how to do that specifically.

I also found that the first image of the cat on the laptop does not change with the multiple searches no matter how many times I search for something different.

3 4

If you can see the wood picture is the same throughout all the images I embedded in.

Here is the code!

var pics = [];
var img = [];
var link = [];

function setup() {
createCanvas(400, 900);
input = select('#keyword');
var button = select('#submit');
button.mousePressed(ask);
}


//https://api.giphy.com/v1/gifs/search?api_key=OJy4WfGXwJS5T4PCn3HB0MwyzxJko9I0&q=&limit=25&offset=0&rating=G&lang=en


function ask(){
var first = 'https://api.giphy.com/v1/gifs/search?api_key=OJy4WfGXwJS5T4PCn3HB0MwyzxJko9I0&q=';

var rest = '&limit=3&offset=0&rating=G&lang=en'

var url = first + input.value() + rest


loadJSON(url,gotData);
// print (url);
}


function gotData(info){
var pig = info;
for (var i=0; i<3; i++){

pics[i] = info.data[i].id;
// pics[i] = 'link';
link[i] = ' https://media.giphy.com/media/' + pics[i]+'/giphy.gif';

print(link[i]);

loadImage(link[i],zhanxian);
}

}

function zhanxian(pic){
// pic.size(width,height);
image(pic,0,0);
// rect(100,100,100,100);
}


function draw() {
background(220);
if (pig){
for (var i = 0; i<3; i++){

image(img[i],0,0);
}
}
}



This is a video of this working!

Here is the link!

https://editor.p5js.org/samasrinivas/full/H1ScdK10m

Attributions:

@Cass for MAJORLY helping with my code!

@Helen for helping me debug my code!

 

Leave a Reply