Trying to write code for random GIF generator

Hi!

I’m looking for any examples of Processing code (or any leads) that people here might know of for generating random gifs.

I’ve been googling, but haven’t made any progress. It seems there are examples in other languages, but not Processing.

Thank you for your help!

Brad

Hi @Jbwilke,

Not really clear from your post what you are trying to achieve, but you can take a look here

(Chapter: EXPORTING A GIF ANIMATION)
http://extrapixel.github.io/gif-animation/

The library can be installed via Library manager from PDE.

Cheers
— mnse

Thank you so much, mnse!

I will explore this and see how much headway I can make before coming back to the forum for assistance.

Much obliged!

Brad

1 Like

Do you want the animation functionality of a gif or do you just mean image (like jpg)?

For a simple random image you can just place lines
randomly (or curves):

strokeWeight(random(0.6, 4.9)); 
stroke( random(256), random(256), random(256));
line(random(width), random (height),
    random(width), random (height));

Use a for loop with random upper bound to make many lines

int upperbound=int(random(3, 444));
for (int i=0; i<upperbound; i++){
   // the lines above
}

Then use save or saveFrame(); afterwards

See reference

Chrisir

1 Like

Chrisir,

Thank you very much! This is super helpful.

To answer your question, I shouldn’t have used the word “generate” in this context. What I really mean is “pull” pre-existing GIFs from the internet (perhaps from Giphy), display them for a period of time, and then pull another (and another) with a loop function.

I really appreciate your time and thoughtful response, Chrisir!

Brad

1 Like

Hello, again!

I made some progress and was hoping someone might be able to answer a question.

Here (attached) is the error message I get when I run the following code.

I’m wondering if you might know how I can get this to display a gif that the API is calling when it needs to recognize it as an image.


What I get now is a black screen with that error message. The result I’m hoping for is a gif to be playing in the frame.

Thank you very much!

Brad

Error message says the url string doesn’t end with a supported extension (in your case .gif).

Yes, I tried adding “.gif” at the end of the URL string and it said it didn’t exist.

I just tried another variation and received the following error:

I really appreciate your insight and time here. Thank you!

Hi

PImage webImg;

void setup() {
  size(400,400);
  //String url = "https://processing.org/img/processing-web.png";
  // Load image from a web server
  webImg = loadImage("https://processing.org/img/processing-web.png");
}

void draw() {
  background(0);
  image(webImg, 0, 0);
}



Thank you, jafal!

I think I am getting closer. End state is that I want to grab a random gif from Giphy when I run this code. Here’s where I’m at now:

Any suggestions or ideas? Thank you!

Hi

Looks like you are trying to load gif array not one gif try to load one gif first to make sure that you can load from your site then manage how to load image array

can you please post your entire code as text here?

Thank you both. Here is the code:

PImage webImg;

void setup() {
size(400,400);
//String url = ““https://api.giphy.com/v1/gifs/random?api_key=hSekXK4WNlmjys5ycowpCnQzNlQValQG””;
// Load image from a web server
webImg = loadImage(“https://api.giphy.com/v1/gifs/random?api_key=hSekXK4WNlmjys5ycowpCnQzNlQValQG”);
}

void draw() {
background(0);
image(webImg, 0, 0);
}

as with most API it returns JSON code.

That’s how far I got

It doesn’t work.

I was able to retrieve an url.

When you try to load it, it fails.

But you can paste into your browser and see something.

I didn’t know what to do with


https://media4.giphy.com/media/J5SaaMHrloUFNVhmFp/giphy.webp?cid=87e71c3e6c3543ddb2ffacd41e906473df24e54d4912ecb7&ep=v1_gifs_random&rid=giphy.webp&ct=g

Full Code

( jsonArray1 ist json3 in fact )

see docs: Docs | GIPHY Developers




PImage webImg;

JSONObject json;

void setup() {
  size(400, 400);
  //String url = ““https://api.giphy.com/v1/gifs/random?api_key=hSekXK4WNlmjys5ycowpCnQzNlQValQG 1””;

  json = loadJSONObject("https://api.giphy.com/v1/gifs/random?api_key=hSekXK4WNlmjys5ycowpCnQzNlQValQG");

  println(json);

  JSONObject json2 = json.getJSONObject("data");
  println("=========================\n");
  println(json2);

  JSONObject jsonArray1 = json2.getJSONObject("images");

  println("=========================\n");

  println(jsonArray1);

  JSONObject json4 = jsonArray1.getJSONObject("original");
  println("=========================\n");

  println(json4);

  String name1=json4.getString("webp");
  println(name1);

  JSONObject json5 = loadJSONObject(name1);

  println("=========================\n");

  println(json5);

  // Load image from a web server
  webImg = loadImage(name1);
}

void draw() {
  background(0);
  image(webImg, 0, 0);
}

2 Likes

or check this out

// fullscreen image as a screen saver
// from https://discourse.processing.org/t/crop-multiple-images-to-any-quad-shape-and-place-them-side-by-side-filling-the-canvas/41326

int seed = int(random(1000));
PImage img;
int timer;

// -------------------------------------------------------------------------------
// Two core functions

void setup() {
  // size(560, 800);
  fullScreen();

  background(0);
  getRandomImage(width, height);
  timer=millis();
}

void draw() {
  background(0);

  if (millis()-timer>3999) {
    getRandomImage(width, height);
    timer=millis();
  }

  image(img, 0, 0);
}

// -------------------------------------------------------------------------------
// Input functions

void mousePressed() {
  getRandomImage(width, height);
}

// -------------------------------------------------------------------------------
// functions

void getRandomImage(float w, float h) {
  String url = "https://picsum.photos/seed/"
    + seed
    + "/"
    + int(w)
    + "/"
    + int(h)
    + ".jpg";
  // println(url);
  seed += 1;
  img = loadImage(url);
}
//
1 Like

Chrisir,

This is super helpful. I really appreciate you taking the time to play around with the code and see if you could get it to work. I’m going to keep working on it via trial and error, and I think this code you shared is a huge step in the right direction.

Thank you, again!
Brad

1 Like

Chrisir is our teacher

The following seems to work. All I did was add ‘.gif’ to the url.

PImage webImg;

void setup() {
size(400,400);
webImg = loadImage("https://tenor.com/view/gif-gif-19480288.gif");
}

void draw() {
background(0);
image(webImg, 0, 0);
}
1 Like

Yeah, that’s not an API. Different thing.

I’m trying to figure out what he’s trying to do. Why does it have to be an API? What I’ve seen done is download the image(s), create your own animation and then upload that if that’s what you want to do with your work. There is also an animation library for Processing, but have no experience using it.