Trying to write code for random GIF generator

p5.js Libraries
21

Hi, all!

Again, I really appreciate your attention and time here.

Here’s what I’m ultimately trying to do:

I’m working with a friend to create an art installation. In response to analog stimuli (vibrations, sounds, pulling a slot machine lever, etc.), this system would pull random gifs (most likely from the “fail” category) and display them on a giant screen. Conceptually, it would imitate a lab rat repeatedly hitting a button to receive a hit of dopamine. We currently have it working via an Arduino-driven sensor that picks up vibrations and creates sounds, plays samples, and generates colors and lines…more or less complete chaos. We’d like to add GIFs to this system, but I can’t seem to figure out how to pull one at random from Giphy (what I’m considering the MVP). I hope that helps. I’m trying something in basic HTML right now, but we’d like to keep everything in Processing, if possible.

I’m not a coder and this is really my first crack at building something in Processing.

Much obliged, as always!

Brad

1 Like
22

Are you an authorized user of Giphy? That site doesn’t look open source to me. Can just anybody download their content? I was able to save a single image of a couple of their gifs to my ‘Downloads’ folder by using a right click on my Mac. They have a .webp extension. It sounds like all you need is a single image and not the entire animated gif; is that correct? How are you obtaining the api_key?

23

Yes, I have a Giphy API key that they provide here: https://developers.giphy.com/.

Ideally, I’d like to capture the entire GIF so it will just play in the app without any further coding.

Here is the code I have been writing in Visual Studio Code (which includes my API key):

Thank you!

24

Looks like I can’t post the code as text for some reason, so it’s attached.

Screenshot 2023-05-05 at 1.15.33 PM
Screenshot 2023-05-05 at 1.15.33 PM1240×728 70.6 KB

25

I’d like to capture the entire GIF so it will just play in the app without any further coding

So really what you’d like to have is the associated ‘.mp4’ and not the ‘.webp’ image, which puts us down another path instead of loadImage(). Personally I don’t think loadImage() can be made to work because it doesn’t support the ‘.webp’ format.

Some other observations which may or may not be helpful:
1.) There is a Processing library called ‘Image Loader’ which may be added to your editor by using the Tools/ManageTools… menu item, then going to the ‘Libraries’ tab to install it. If you then go to File/Examples… menu item you will see examples for this library. There is an example called ‘Giphy Loader Example’ which you might be able to get to work. It didn’t work for me because I’m not a registered user, but perhaps would work for you.
Another interesting observation which may or may not be helpful:
2.) When I use my system (macos) to access their webpage and right click on one of the gifs, I am able to download the .webp image associated with that gif to my ‘Downloads’ folder. If I then drag that image to the Desktop and change its name to xxx.gif I am able to see all the images that were used to create the gif. I can then copy/paste all of the images into a ‘data’ folder of my Processing sketch and recreate the animation. I’m sure that’s more work than you are looking for, but it does work.

Addendum:
Another option might be to embed a Swing or JavaFX media player into your app.

1 Like
26

Svan,

Thank you, again. This is great. I am going to try implementing your first observation and will see how/if it works.

In the meantime, I prompted ChatGPT to write a program for this, and here is what it came up with. When I run it, though, I get the following error: “Error loading GIF: Index 0 out of bounds for length 0.” Anyway, wanted to share in case it sparked any new ideas on your end.

String apiKey = “51n2bls2uFiUfsYaR5l0xobWYv9QNVTx”;
String query = “puppies”;
String url = “http://api.giphy.com/v1/gifs/random?api_key=” + apiKey + “&tag=” + query;

void setup() {
size(400, 400);
background(255);
PImage gif = loadGIF(url);
image(gif, 0, 0);
}

void draw() {
}

PImage loadGIF(String url) {
PImage gif = null;
try {
byte gifData = loadBytes(url);
gif = createImage(gifData.length, 0, PConstants.RGB);
gif.loadPixels();
for (int i = 0; i < gifData.length; i++) {
gif.pixels[i] = gifData[i] & 0xFF;
}
gif.updatePixels();
} catch (Exception e) {
println("Error loading GIF: " + e.getMessage());
}
return gif;
}

27

There is about 8000 pixels worth of data, but no puppies. On mac background is blue. Default window is 100x100. Sometimes still see an error message, but there is output of sorts.

String apiKey = "51n2bls2uFiUfsYaR5l0xobWYv9QNVTx";
String query = "puppies";
String url = "http://api.giphy.com/v1/gifs/random?api_key=" + apiKey + "&tag=" + query;
byte[] gifData;
PImage gif;

void setup() {
  gif = loadGIF(url);  
}

void draw() {
  image(gif, 5, 5);
}

PImage loadGIF(String url) {
  try {
    gifData = loadBytes(url);
  //gif = createImage(gifData.length, 0, PConstants.RGB);
    gif = createImage(width-10, height-10, RGB);
    gif.loadPixels();
    for (int i = 0; i < gifData.length; i++) {
      gif.pixels[i] = gifData[i] & 0xFF;
    }
    gif.updatePixels();
  }
  catch (Exception e) {
    println("Error loading GIF: " + e.getMessage());
  }
  return gif;
}
28

Svan,

Wow. That is another major step toward getting this to work! Thank you for taking the time to play around with the code! I wonder why it refuses to return a full-blown GIF. I wonder if it has anything to do with the API key? I will investigate and see if that is the issue. Thanks, again, for your time and effort here!

Brad

29

@Jbwilke

More suitable to change topic title

From

Trying to write code for random GIF generator

To

The Giphy API and p5.jS

In this video you can understand your demand and your issue .

Focus on how use the url link and the key at 6:00 min of the video

@svan

If you watched the video. You may be able to figure out why your sketch didn’t work as intended because your sketch is almost identical to the video.

1 Like
31

I wish we wouldn’t go around changing topic titles; now it’s even more confusing. The thread is about getting a .gif into Processing _not p5.js. The video is somewhat helpful, but doesn’t solve the problem. I thought @Chrisir was on the right track; at the beginning the emphasis seemed to be getting an image, but has now shifted to an .mp4 video. I am hopeful that if we can ever extract the correct url for the .mp4 from the mountain of JSON data we can get this to work in Processing by using an embedded media player, like JavaFX or something similar since the Processing editor does not yet officially contain the JavaFX media module.

33

Hello @Jbwilke,

It is important that we are all mindful of the GIPHY API terms of service:
GIPHY API Terms of Service

The Processing FAQ has a section on this as well:
Post Only Your Own Stuff

:)

35

Svan, Chrisir, Jafal, glv, and mnse,

I want to thank all of you for your insight, time, and attention here in this thread. I’m going to review your comments and tinker with the code this week, and will post the fruits of my labor (should there be any) here in the thread.

Thanks, again!

Brad

1 Like