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.
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();
}
//
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!
:)
