Converting a video file to a sprite sheet

Processing Libraries
1

Im trying to make something that can Convert a video file (.MP4 in this case) into a spritesheet.

I plan to create a new image with the dimension being Video.width*Video.frames by Video.height, Video.frames being how many frames the video has.
But I dont exacty know how I could do this, I know I need to use the video library but I dont know how to get the video dimensions and how many frames there are.

1 Like
2

Hi

https://funprogramming.org/121-Using-a-webcam-in-Processing.html

3

Interesting.

In my opinion you can make 2 different sketches:

Sketch 1

First “explode” the movie and save all images

See Reference / Processing.org

Sketch 2

Then copy all images into a 2nd sketch and let it do the stitching of the images to a new image, your sprite sheet that you save

Chrisir

For Sketch 1

here is an example.
I had to restart processing a few times, seems to crash.
But it works.


//

import processing.video.*;

final String title1 = "my movie.mp4"; // change this !!!!
Movie myMovie=null;
int i=0; 

void setup() {
  size(900, 200);
  println("start"); 
  myMovie = new Movie(this, title1 );
  myMovie.play(); // loop ?
  println("end setup()");
}

void draw() {
  // tint(255, 20);
  // image(myMovie, 0, 0);

  // if (myMovie!=null) {
  myMovie.save("t"
    + nf(i, 5, 0)
    + ".jpg"); 
  i++;
  // }

  // abort 
  if (frameCount>14) { // change this !!!!  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    //println("end Sketch.");
    //exit();    
    //return;
  }//if 
  //
}//func 

// Called every time a new frame is available to read
void movieEvent(Movie m) {
  m.read();
}
//
1 Like
4

Hello @5x9x7x2x7x9,

My exploration of this:

// Saving movie frames
// v1.0.0
// GLV 2022-11-13

import processing.video.*;

Movie movie;

PImage img, sheet;
PGraphics pg;

void setup() 
  {
  size(1200, 1000);
  //background(0);
  
  // PGraphics
  // Creat first so it is ready for event!
  pg = createGraphics(560, 500);
  pg.beginDraw();
  pg.background(255, 255, 0);
  pg.endDraw();
  
  // Load and play the video in a loop
  movie = new Movie(this, "launch2.mp4");
  //movie = new Movie(this, "1_2020-06-01_10-45-10.mp4");

  movie.play();
  
  // Wait until ready to get width and height
  while(movie.width == 0)
    {
    print(',');
    }
  println();  
  
  // Stats:
  println(movie.width, movie.height);
  println(movie.width/float(movie.height));
  
  // Test:
  String s = sketchPath() + "/data/" +str(frameCounter) + ".png";
  println(s);
  
  sheet = createImage(560, 500, ARGB);
  //sheet.loadPixels();
  
  for(int i=0; i<sheet.pixels.length; i++)
    {
    sheet.pixels[i] = color(0, 255, 0);  
    }
  //sheet.updatePixels();  
  
  // noLoop(); // Try it with this and see what happens!
  }

void draw()
  {
  //background(128);      // Uncomment this and see what happens!
  image(movie, 0+20, 0+20); 
  image(sheet, 0+20, 500-20);
  image(pg, width/2+20, 500-20);
  if (!movie.isPlaying())
    {
    println("Last frameCount: ", frameCount);  
    noLoop();
    }
  }
  
// Called every time a new frame is available to read
int frameCounter = 0;

void movieEvent(Movie m) 
  {
  int t1 = millis();
  
  m.read();
  String s = nf(frameCounter, 6);
  //m.save(sketchPath() + "/capture/" + s + ".png"); // If saving it and reading it!
  println(frameCounter);
  
  //// 1
  //// Reads from a file
  //img = loadImage(sketchPath() + "/capture/" + s + ".png"); // The one saved above!
  
  //// 2
  //// Resizes image
  //img = m.copy();
  //img.resize(20, 15);
  
  //// 3
  //// Gets a section of image
  img = m.get(340, 330, 20, 15);
  
  //// 4
  //// Gets a section of image at mouse location
  //img = m.get(mouseX, mouseY, 20, 15);
  //println(mouseX, mouseY);
  
  // Tiling
  int tW = 560/20;
  int x = int( frameCounter%tW );
  int y = frameCounter/tW;
  //println(mouseX, mouseY);
  
  set(x*20+width/2+20, y*15+20, img);     // set() on display window
  
  sheet.set(x*20, y*15, img);       // PImage.set() sheet image  
  //println(x, y);
  
  // PGraphics
  pg.beginDraw();
  pg.set(x*20, y*15, img);
  pg.endDraw();
  
  frameCounter++;
  
  int t2 = millis();
  println("Time: ", t2-t1);
  }

I used the video from the Processing examples.

There may be something in there that is helpful.

I captured each new movie frame in the movieEvent() (actual number of frames) and not in draw() (capturing a frame with each draw() cycle at 60 fps default).

Have fun!

image
image1202Ă—1039 75.7 KB

:)