How to Create a Dot Matrix video for your Midjourney Images

How to Create a Video From Images with Processing and FFmpeg

Hello! In this tutorial, I’ll show you how to take a collection of images created with Processing and turn them into a video using FFmpeg.

Even if you’re a newbie to coding (like I am) and video editing, don’t worry. I’ll walk you step-by-step through all the stages, from installing to the final video/gif.

With just a little bit of simple code and command line work, you can showcase your AI-generated art in a whole new way.

Stage 1 — Generating Images with Processing

1. Stage 1 — Generating Images with Processing.
2. Download Processing from here [link] and install it by unzipping the file in a new folder.
3. Add the image you want to use to the Processing sketchbook folder. This will be the base for what is coming next.
4. Open Processing app, create a new Sketchbook and copy and paste the following code into it:

*You can tweak the code yourself or use an AI assistant to customize it.

PImage img;
int cellSize = 10;

void setup() {
  size(600, 600);
  frameRate(10);

  img = loadImage("image.png"); //change it to your image path.
  img.resize(width, height); 
}

void draw() {
  // Setting fill and stroke colour for circles
  fill(0);
  noStroke();
  
  // Setting cell size of the grid
  int cellSize = 5;
  
  // Offsetting grid to accomodate the edge cells inside canvas
  translate (cellSize/2, cellSize/2);
  
  // Loops for drawing 100 circles each frame
  for (int x = 0; x < 100; x++) {
    for (int y = 0; y < 100; y++) {
      
      // Generating circles at random x,y location
      int xloc = int(random (width));
      int yloc = int(random (height));
      
      // getting the colour of the corresponding cells from image
      color c = img.get(xloc*cellSize, yloc*cellSize);
      
      // Mapping the brightness of cells to circle size
      float size = map(brightness(c), 0, 255, cellSize, 0);
      
      // Drawing circles with mapped size
      ellipse(xloc*cellSize, yloc*cellSize, size, size);
    }
  }
  
  // Saving the frames as an image sequence
  saveFrame("render//render-###.png");
}

5. Execute the code you copied into the sketchbook.

A new window will open — you can close it once the program finishes.

6. Check the sketchbook folder. You should see that a sub-folder was created and inside it there are many images. This is what we’ll turn into a video next!

Stage 2 — Creating a Video with FFmpeg

1. Download FFmpeg from [link or link] and install it by unzipping to a folder.
2. Open the FFmpeg folder, find the “bin” folder inside, and copy the file path.
3. Add the FFmpeg path to your system’s environmental variables. On Windows, this is in Advanced System Settings (here how to do that).
4. Open the command prompt window and navigate to the folder with your Processing images.
5. Copy code (you can change it as you want or use an AI assistant to help you customize it.)

ffmpeg -i "folder\render-%03d.png" -vf fps=30,scale=480:-1 "folder\output-name.gif"

Alternatively, at the command prompt, you can also navigate to the FFmpeg “bin” folder and run the previous command pointing to your image folder.

Wait for the FFmpeg makes its magic. It won’t take too long.

Now, go to the output folder and preview the newly created video file!

Congratulations, you just turned a simple image into an awesome video with Processing and FFmpeg!

What I created using this method

Conclusion

I hope this quick guide helps you showcase your AI art experiments and creations in an exciting format.

As you’re starting out with generative art and editing, check out my Social Media Design: Canva Guide [link] for step-by-step how to create designs with the free version of Canva to enhance your social posts!

Get in touch

Feel free to reach out with any questions: @aiart_vanessa (Twitter).