Tutorial: How to render Processing sketch as a movie

[@supernaturalswampaids8083]

How do you teach so well? You're style of teaching clicks so well with me, it's crazy! Wish you were my teacher, so grateful to have your channel available to me.

[@TheCodingTrain]

Thank you for the nice feedback!

[@indielatam]

Indeed. Super good teaching. I had a lot of fun. I arrived here almost by mistake but stayed for the whole class.

[@clayton1780]

BRO nice username ;)

[@edgarfabianfrias]

just want to say how grateful I am for you! I am an artist taking a coding/electro-art making class right now and your videos have been such a game changer for me! so appreciate you!!

[@mavaction]

If only everything was explained so directly....I'm watching these videos and making progress by the minute. Brilliant.

[@matviimasliukov570]

It's just so helpful! I'm so happy you are here. Thank you, thank you for everything!

[@minjeongohohoh]

Hello from South Korea! Thank you always!👍 Thanks to you, I can learn easily and get to know in detail. You solved my problem! My professor always talks about you and recommends your 'Learning Processing'book. I'll wait for more lectures on Processing :)

[@JZL003]

Just a side note, there's an extremely robust cli program called ffmpeg(if this helps, it's like image magick but for videos) and it can do the same thing. the advantage is it can convert to pretty much any video format your can think of and has done advanced options like overlays (in the same way learning gimp/Photoshop is useful, learning ffmpeg and image magick pays off a lot)

[@JZL003]

by same thing, I mean stitch images into video

[@TheCodingTrain]

thanks for the tip!

[@REGameFly]

thanks man. I'm learning java in my IB class right now so i'm totally going to use your tutorials

[@TheCodingTrain]

+Rophi so glad to hear!

[@VisualSynthesisYoutube]

Awesome just implemented this to help me produce some better quality animation - love your videos it has helped me learn Processing and now i'm making some of my own videos using it :)

[@Shorkiedokey]

It really looks like programmers are real life wizards.

[@ТимофейЧерников-щ2х]

Huuuuge thanks. I searched for solution to save animation since yesterday and all I found was advice to render video right in program using ffmpeg(I make project in c++ on Linux). But this solution is super simple and fast to implement.❤❤❤❤❤

[@aBugInTheSystem]

Amazing your videos! I’m just starting on and I founded your content super nice! Great teaching ✨✨

[@tehlolzfactor]

Sorry to be pedantic but PNG is technically compression, but it's just lossless compression which will compress the image file as much as it can without losing any detail from the image.

[@TheCodingTrain]

Yes, this is a very good point, thank for the clarification!

[@SarahC2]

PNG can be saved without compression too.... but The Coding Train's too polite to tell you. =)

[@rmz1661]

@@TheCodingTrain You are such a wonderful person who teaches passionately.

[@redregar2522]

How do i handle it when i want to record video and audio output from processing?

[@falschnehmung]

1000 hugs ... ;-) ! is there a Nobel prize for teaching ... ?

[@Nostanalogia]

Thank you for this; However, I still experience a little bit of trouble on my side, I am trying to export a video from a code that is audio reactive (the export will be a music video), and when I run the code for 3.38min (length of the track), it works but the output is only 30 sec or so.. I understand that it "slows down" when the code is saving frame while running but since the visuals are linked to the sound in "real time" it is a problem for me... Any idea how to fix this? I would highly appreciate.

[@Nostanalogia]

OK, I found one VERY twisted way to do so..: I play the music about 6 times slower, then I add the original track when using the movie maker option. Mean that I ran the code for 22min or so for a 3min track, and it looks all right, the tricky business was to find the ratio to slow down the music accordingly.

[@TheCodingTrain]

Yes, this is a very tricky problem! You need to do something where you get the sound data not in realtime but read it slowly with each Processing frame. I'll have to think about this more. maybe ask at forum.processing.org!

[@weilsonstnichtsgeht]

I have this problem too. Also doing a music video. Would love to find some nice workarounds. Did you find any in the meantime?

[@weilsonstnichtsgeht]

Haha, that was quick! (I know, you're post is 8 months old) I think I found the perfect solution for recording without any need of slowing down anything (provided your sketch already runs at the needed speed without saving frames within the sketch). I used Syphon before for sending my PDEs to a mapping software to project live visuals. And it turns out there's also a Syphon Recorder which can record in any reasonable formats like Animation or the like. Without any noticeable lag so far I could test it. Hope it works for you too! You can download the Syphon Recorder for free here: syphon.v002.info/recorder/ and obviously you need the Syphon processing library that you can find here: github.com/Syphon/Processing

[@friediberga7213]

nooo.... mac only .(

[@danthemancasey]

Very cool!! Super awesome!! Super thank you!!

[@tomatosauce6929]

What if my Processing has an interaction like mousePressed. What file do I have to save so when people click and then they can see my art movement? Thank you :)

[@paotaitai]

it was really cool! thanks daniel

[@TheCodingTrain]

+Pao Tai Tai glad to hear, thank you!

[@enneagramma7304]

beautiful tutorial, but for some strange reason, when saving with #### it does not generate separate images, the image is overwritten, any ideas about what it could be?

[@marcusbluestone2822]

Thank you so much!!

[@akko8231]

I LUV U was so helpful!!!!

[@deadmusik9969]

THANK you dan :D, i can now save without having to go back to the sketch and rename the 1, 2, 3, 4 etc. .... @ 3:08

[@Brahvim]

What?! Haha, anyway.. What I thought was to simply do this, instead of using `saveFrames()` 😁: ```processing // (using "Processing" here works in Discord markdown at least!) save("picture_" + frameCount + ".png"); ```

[@beautifulregrets]

@@Brahvim is this work for animation only? can i make 100 png at the same time?

[@waldocosta7871]

[@Ricardo30stm]

You are the best!!

[@RhoyLambda]

Hello Daniel. This is great but I have two problems: 1.- I'm trying to render at 4k resolution (3840x2160) but when I run the sketch, the window is only as big as my screen, so the saveFrame() function doesn't actually save the full 3840x2160 pixels but just the part that fits my screen. 2.- I want to render with a transparent background, is this possible? I read somewhere in the documentation that I needed to use createGraphics(), but I don't really understand what that's supposed to mean. I hope you (or someone else in the comments) can help me. Thanks for the great videos!

[@TheCodingTrain]

createGraphics is your answer to both questions! For me, please ask at forum.processing.org? It's easier for me and others to help that way (you can share code there easily!).

[@RhoyLambda]

Thanks!

[@cnaa97]

cannot found example code link

[@syruptree]

Nice video! I never knew about the save("blah.png"); lol. Please keep rolling out amazing videos! :D

[@TheCodingTrain]

+syruptree Thank you!

[@KitMacAllister]

Wonderful video as usual :)

[@kudre7]

Thanks Daniel very helpful! But I am having errors which says "The class GOL does not exist! What is the solution of that?

[@kudre7]

processing.org/examples/gameoflife.html

[@softlocked9586]

This is 3 years late haha. But the GOL class holds a simulation called “The Game of Life.” Dan just made it as an example to show that the recording system in processing does in fact work (he could’ve used anything else, really. I bet it was just an arbitrary decision). In other words, the absence of this file does not affect the recording in any way. Sorry for the 3-year-late response!

[@ThePhysicsTrain]

I'm using processing 3.5.4 . There's no movie maker tool. Or have I been looking in the wrong place.?

[@kevnar]

But how do you turn it into a gif? Now that would be useful for social media sharing.

[@TheCodingTrain]

This would be a great topic for a future video!

[@todo667]

A p5js to gif or video tutorial would be amazing!

[@satyamrai39]

There's a software called Photoscape that can stitch the images into a gif and have precise control over which frame is displayed for what duration in the gif.(and of course do much more than that) That's what I use ..

[@keyb]

Hello! I'm working with processing and wanted to know if there was any way to stitch together images into a video through the processing language itself. I basically want to be able to create videos through code, instead of through the external program they have available. Many thanks, -Matires.

[@TheGreenPig321]

"Creating the QuickTime mov failed. len must be divisable by sampleCount len-989 sampleCount=3" I got this error can someone help me?

[@raphschru9865]

Hi Dan ! Is there a way to render the video programmatically ? Btw very useful video !

[@mpietragalla]

Hi, Daniel Shiffman! First I'd like to congratulate and thank you for all the videos you upload in this youtube channel! you provided this online comunity a really good source for code learning! Now, I've being struggling with a problem in processing, and I wonder if you could give me a light on this problem: I got this pattern using perling Noise that I'd like to use as a background of an application I'm working on, but its very heavy processing to generate this pattern every frame, is there a way of storing this pattern like an imagem right at the begining of the application ( so that everytime I run it, the pattern will be slightly different), and ALSO rendering it larger than the actual canvas, since I'd like to zoom in and out this background without losing quality. Can I do something like that in processing 3? Some way os creating an image buffer in an arbitrary size, do all my drawing to it and then saving it as an image ( no need of an actual file, just keep in the application as an image so I can print it over everyframe like a stamp I can 2D transform without all the pattern processing all over again. Thanx for your attention! Marcelo

[@RedAnt3x3]

maybe a bit late, but you can use PImage for that processing.org/reference/createImage_.html

[@brianthegreat4807]

Anyone know how to make this work on APDE? I get no errors, using save or saveFrame. No images are generated. Most plugins don't work on APDE =(

[@rmz1661]

@ 12:51 Love this bit

[@creature_of_fur]

> Want to add video output to my program(written in C) > Hmmm, PNGs sound like a very inefficient storage > Lets see, what lossless video codecs do we have > Oh, actually, MotionJPEG2000 sounds good > What libraries do we have? > openjpeg, seems good > Download it, try to write a simple sketch utilizing it > ... > Okay, wheres the documentation? > Any samples or whatever? > Guess I gotta use test programs > ... > Wait thats not _Motion_ JPEG > Uhh, okay, don't worry we have Doxygen > Wait what > What is this > What do I need to call > That doesn't work > WTF does this field store??? > It's discription is its name, very informative > WHAT IS THIS LIBRARY > I JUST WANT TO WRITE JPEGZ > WHYYYY > ... > fucc that

[@MatataZ]

Is the recording save frame function changed in the last vision of processing? the green/red circle is also saved in the file🥲

[@juliavond]

Hello, How can I get png in high resolution with this kind of multiple images example?

[@cricolabus]

Hi ! I just discovered your tutos, thank you so much, it's so well explain !! I recently find out about processing and augmented reality and I was wondering if you could make a tutorial about it, it could be amazing !

[@TheCodingTrain]

+cricolabus Have a long list of things to get to, but will definitely consider that!

[@rajasaurusbrontozaurus658]

When I try to draw using say the Depths sketch from (www.openprocessing.org/sketch/117601) this technique of saving .pngs slows down my computer so much that I can't really get a good video capture. I mean I can't react with the sketch and still have it record in real time. Unless you have a super powerful computer, are there any other options other than screen capture which looks pretty bad.

[@ElProfeJaimeCastro]

Hi, I used this github.com/hamoid/video_export_processing and it worked really nice for me.

[@TheGrymstone]

I have the same problem, it slows down so much that it is no longer interactive. There is a similar problem with the homoid video_export as well and it is not even possible to record a proper video because of super lag. Sketch can run 30-50 fps without any recording.

[@AlexCio]

Great feature! Didn't know about it before! Thanks! :)

[@Pixel_Recap]

do you have how to export p5.js into a gif video?

[@avitalbenezra7798]

Hi Daniel! First of all thank you so much for all your amazing work!! You are truly my hero. I have a question relating to P5 - Is there a way to export to a movie file from a sketch made in P5? I tried implementing Ccapture library but it doesn't work. I am using quickTime to capture the screen but that results in really poor quality videos:/ I was wondering if you could make a tutorial to help with that? It would be really great to be able to share on social networks work done with p5. Thank you so much!

[@TheCodingTrain]

Take a look at saveFrames() in p5.js

[@CrapE_DM]

Just an FYI: png is conpressed, but it's lossless.

[@verdano2577]

In my export I am having sync issues between video and audio in my export because the sketch runs at a much lower frame rate while it records. Any clue on how to fix it?

[@chasemarangu]

is your sketch using saveFrame("img#########.tif"); or screnshot1.save("img"+frameCount+".png"); or something like that? How are you generating the sound?

[@musiquemaker1207]

very nice !!

[@Operaatoors]

Hey! Really glad that I found this video, this is quite good material that is bugging my mind for some time! I wonder if this is similar technology that Facebook is using to create their birthday and new year videos? I mean, we can define placeholders for texts and number of likes and spots for images, create some animations by default and render? But the preview comes up so fast on Facebook that this is unbelievable! I know, they have cloud power of unlimited RAM and they can handle that thing, but is this how they do it, just smaller scale?

[@loransabood3846]

i have designed a small game on processing and i wanna put it on my blog. is that something doable?

[@zapcompany5007]

install the coffeescript mode

[@philipojediran6085]

I've always loved everything you doing but can you program using java cos I don't really understand javascript

[@meeeeeeeeeeeeeeeee31]

Processing uses java syntax

[@michieb1231]

he is useing java... and java script is way easyier than java and spelling apparently

[@jimjajmus]

tried this.. unfortunately the quicktime video rendered is not compatible with quicktime... :(

[@chasemarangu]

jimajmus ha! I was having the same problem! Mac os X catalina huh? What you need to do is convert it to mp4 in iMovie, then it should be openable.

[@jimjajmus]

@@chasemarangu Thank you! I shall try this!

[@chasemarangu]

@@jimjajmus yout=r welcome! I'm sorry I replied so many months later, as I just found this out myself -today- _yesterday._

[@saammina]

Hello, I am a beginner and I am trying to implement your code into the sketch you have in processing called "mirror2" for practice. However, when I type the code GOL gol; above the video setup, it tells me that "The class "GOL" does not exist." !!! Any help would be appreciate it. Thank you. =]

[@saammina]

Never mind. I figured it out. However I am having trouble with the recored button. Even though I put the "ellipse" code line below "saveFrame" I am still seeing it show up on the screens that were captured!!!

[@TheCodingTrain]

oh, glad to hear!

[@kudre7]

How did you sort that, because I am having a same problem? cheers!

[@saammina]

Hey, I have been out of practice and this was a while ago, so I don't exactly remember what I did. But I found the code that I was messing around with. I will paste it for you down here to look at. /** * Mirror 2 * by Daniel Shiffman. * Edited by Saam-E * Each pixel from the video source is drawn as a rectangle with size based on brightness. */ import processing.video.*; Capture cam; // Size of each cell in the grid int cellSize = 18; // Number of columns and rows in our system int cols, rows; // Variable for capture device Capture video; boolean recording = false; void setup() { size(1280, 720); video = new Capture(this, 1280, 720, 30); video.start(); // Set up columns and rows cols = width / cellSize; rows = height / cellSize; colorMode(RGB, 225, 255, 225, 100); rectMode(CENTER); } void captureEvent(Capture video) { video.read(); if (key == 'r' || key == 'R') { recording = !recording; } } void draw() { video.read(); background(0); video.loadPixels(); background(#FF03EF); // Begin loop for columns for (int i = 0; i < cols;i++) { // Begin loop for rows for (int j = 0; j < rows;j++) { // Where are we, pixel-wise? int x = i * cellSize % 9000; int y = j * cellSize % 9000; int loc = (video.width - x - 1) + y*video.width; // Reversing x to mirror the image // Each rect is colored white with a size determined by brightness color c = video.pixels[loc]; float sz = (brightness(c) / 255.0) * cellSize; fill(#FFFFFF); noStroke(); rect(x + cellSize/2, y + cellSize/2, sz, sz); if (recording) { saveFrame("output/mirror3_####.png"); fill(225, 0, 0); } else { fill(0, 225, 0); } ellipse(width/2, height-50, 20, 20); } } }

[@kudre7]

you are legend mate, very appreciated, thanks!

[@yenenehmulatu5707]

What is used in the background to convert image to movie file, is it FFMPEG?

[@chasemarangu]

i don't know but it is insanely fast and allows to add an audio file (pretty powerful for free software)

[@zylascope]

Cool. I'll use that to make music videos.

[@domingobeta]

Hi! I'm having trouble with a sketch, try to save specific frames to pdf with mousePressed. the weird thing is when I open the pdf file, is just a big white square with nothing on it. The file is an animation from a perlin noise file made by Gábor Törőcsik-Nagy found in open processing. www.openprocessing.org/sketch/238882 Any thoughts or suggestions? thanks!

[@michieb1231]

what i did: int position = 0; void setup() { size(640, 360); } ; void draw() { background(0,0,0); noStroke(); ellipse(position,position,100,100); position +=1; if (keyPressed){ saveFrame("output/2/circle_####.png"); } }

[@komolunanole8697]

Great Video, but still a bit ironic... The video you render in the video ist higher resolution that the video you rendered for youtube(720p).

[@TheCodingTrain]

haha

[@olasoderlind5685]

and the video got blur whit so much data chunk to update each fream

[@jordiyaputra8359]

Mr. Rainbow, how to do this in p5js?

[@czlowiek48881]

Where can i find your libraries and software? I need something what gonna work on windows or linux OS :/

[@TheCodingTrain]

Start at processing.org

[@czlowiek48881]

Thanks

[@michieb1231]

are you hungarian? justtaking a guess by the way your name looks

[@botz77]

I thought about just recording it with OBS. Might be simpler to do.

[@davidsoncarpenter873]

Example code page not found?

[@TheCodingTrain]

Fixed! github.com/CodingTrain/website/tree/master/Tutorials/Processing/sketch_movie_record

[@fabricerichard1166]

thanks so much !

[@sciencestararvinsinghk]

Thanks for this. I coded a 3D gravitational simulation. It was so laggy.

[@noebory]

Really nice video Bravo! Hey I have trouble getting matrix transformation (array multiplications) with Processing could you do a video about it? And again congratulations for your work :-) Regards from Switzerland

[@TheCodingTrain]

+noé bory I will consider it, yes! Do you have a specific application in mind? Something you are trying to do?

[@diveintrees9427]

Great video! Is there any chance to get the same tut for p5? btw you are awesome!

[@nahueljo]

Dmitry Voloshyn p5 uses canvas. the canvas API also lets you save frames to PNG. then you can use processing's movie maker. Apparently also Firefox has an experimental feature (disabled by default) that is called HTMLCanvasElement.captureStream() which you could use.

[@alisyarazmanadam9848]

is this the same for p5?

[@TheCodingTrain]

It's a little tricky for p5 unfortunately b/c you have to deal with the web browser's file processing limitations.

[@georgesorwell1672]

@@TheCodingTrain Is there a solution today by any chance?

[@JasimGamer]

0:44 who noticed that face in the right bottom corner 🤔

[@NonTwinBrothers]

I thought thumbnail looked like you playing piano.

[@cyrusadkisson6864]

I legit had a compsci teacher pronounce it "aw toe may tuh"

[@Krazy0]

Hehe I'm viewer number 87,000

[@imjoecarpenter]

screen record..

[@masterflamaster6377]

too many languages, Dan

[@VulcanOnWheels]

0:23 Maybe you would get that right if you wouldn't rush yourself as much as you do. 3:53 and 12:36 and 12:58 ... Why??? *cringe*