Tutorial: How to render Processing sketch as a movie

Поделиться
HTML-код
  • Опубликовано: 1 дек 2024

Комментарии • 130

  • @supernaturalswampaids8083
    @supernaturalswampaids8083 8 лет назад +77

    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
      @TheCodingTrain  8 лет назад +12

      Thank you for the nice feedback!

    • @indielatam
      @indielatam 7 лет назад +3

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

    • @clayton1780
      @clayton1780 4 года назад

      BRO nice username ;)

  • @edgarfabianfrias
    @edgarfabianfrias 4 года назад +6

    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!!

  • @matviimasliukov570
    @matviimasliukov570 6 лет назад +18

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

  • @mavaction
    @mavaction 4 года назад +1

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

  • @minjeongohohoh
    @minjeongohohoh 4 года назад +3

    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
    @JZL003 8 лет назад +6

    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
      @JZL003 8 лет назад

      by same thing, I mean stitch images into video

    • @TheCodingTrain
      @TheCodingTrain  8 лет назад

      thanks for the tip!

  • @Shorkiedokey
    @Shorkiedokey 8 лет назад +21

    It really looks like programmers are real life wizards.

  • @aBugInTheSystem
    @aBugInTheSystem 7 месяцев назад

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

  • @REGameFly
    @REGameFly 8 лет назад +2

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

  • @ТимофейЧерников-щ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.❤❤❤❤❤

  • @VisualSynthesisYoutube
    @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 :)

  • @tehlolzfactor
    @tehlolzfactor 8 лет назад +24

    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
      @TheCodingTrain  8 лет назад +14

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

    • @SarahC2
      @SarahC2 7 лет назад +5

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

    • @rmz1661
      @rmz1661 5 лет назад

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

  • @falschnehmung
    @falschnehmung 3 года назад

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

  • @danthemancasey
    @danthemancasey 5 лет назад +2

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

  • @redregar2522
    @redregar2522 6 лет назад +6

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

  • @deadmusik9969
    @deadmusik9969 4 года назад +1

    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
      @Brahvim 3 года назад

      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
      @beautifulregrets 3 года назад

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

  • @AlexCio
    @AlexCio 5 лет назад

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

  • @paotaitai
    @paotaitai 8 лет назад +2

    it was really cool! thanks daniel

  • @marcusbluestone2822
    @marcusbluestone2822 3 года назад +1

    Thank you so much!!

  • @syruptree
    @syruptree 8 лет назад

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

  • @akko8231
    @akko8231 Год назад

    I LUV U was so helpful!!!!

  • @waldocosta7871
    @waldocosta7871 6 лет назад

  • @KitMacAllister
    @KitMacAllister 5 лет назад

    Wonderful video as usual :)

  • @Nostanalogia
    @Nostanalogia 8 лет назад +7

    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
      @Nostanalogia 8 лет назад +1

      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
      @TheCodingTrain  8 лет назад +1

      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
      @weilsonstnichtsgeht 7 лет назад +1

      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
      @weilsonstnichtsgeht 7 лет назад +2

      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
      @friediberga7213 7 лет назад

      nooo.... mac only .(

  • @Ricardo30stm
    @Ricardo30stm 5 лет назад

    You are the best!!

  • @creature_of_fur
    @creature_of_fur 5 лет назад +1

    > 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

  • @cnaa97
    @cnaa97 7 лет назад +2

    cannot found example code link

  • @tomatosauce6929
    @tomatosauce6929 2 года назад +1

    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 :)

  • @zylascope
    @zylascope 4 года назад

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

  • @rmz1661
    @rmz1661 5 лет назад

    @ 12:51 Love this bit

  • @enneagramma7304
    @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?

  • @musiquemaker1207
    @musiquemaker1207 6 лет назад

    very nice !!

  • @keyb
    @keyb 3 года назад

    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.

  • @ThePhysicsTrain
    @ThePhysicsTrain 3 года назад

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

  • @komolunanole8697
    @komolunanole8697 8 лет назад +4

    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).

  • @cricolabus
    @cricolabus 8 лет назад

    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
      @TheCodingTrain  8 лет назад

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

  • @fabricerichard1166
    @fabricerichard1166 7 лет назад

    thanks so much !

  • @Operaatoors
    @Operaatoors 6 лет назад

    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?

  • @raphschru9865
    @raphschru9865 7 лет назад

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

  • @kudre7
    @kudre7 8 лет назад +1

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

    • @kudre7
      @kudre7 8 лет назад

      processing.org/examples/gameoflife.html

    • @softlocked9586
      @softlocked9586 4 года назад +1

      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!

  • @michieb1231
    @michieb1231 7 лет назад

    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");
    }
    }

  • @TheGreenPig321
    @TheGreenPig321 Год назад

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

  • @sciencestararvinsinghk
    @sciencestararvinsinghk 6 лет назад

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

  • @juliavond
    @juliavond 6 лет назад

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

  • @rajasaurusbrontozaurus658
    @rajasaurusbrontozaurus658 7 лет назад +2

    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
      @ElProfeJaimeCastro 7 лет назад

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

    • @TheGrymstone
      @TheGrymstone 3 года назад +1

      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.

  • @Pixel_Recap
    @Pixel_Recap 2 года назад

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

  • @NonTwinBrothers
    @NonTwinBrothers 8 лет назад +1

    I thought thumbnail looked like you playing piano.

  • @RhoyLambda
    @RhoyLambda 6 лет назад

    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
      @TheCodingTrain  6 лет назад +1

      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
      @RhoyLambda 6 лет назад

      Thanks!

  • @mpietragalla
    @mpietragalla 8 лет назад

    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
      @RedAnt3x3 8 лет назад

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

  • @CrapE_DM
    @CrapE_DM 4 года назад

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

  • @loransabood3846
    @loransabood3846 8 лет назад +1

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

  • @jordiyaputra8359
    @jordiyaputra8359 6 лет назад

    Mr. Rainbow, how to do this in p5js?

  • @botz77
    @botz77 3 года назад

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

  • @brianthegreat4807
    @brianthegreat4807 2 года назад

    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 =(

  • @domingobeta
    @domingobeta 6 лет назад

    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!

  • @kevnar
    @kevnar 6 лет назад

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

    • @TheCodingTrain
      @TheCodingTrain  6 лет назад

      This would be a great topic for a future video!

    • @todo667
      @todo667 6 лет назад

      A p5js to gif or video tutorial would be amazing!

    • @satyamrai39
      @satyamrai39 4 года назад

      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 ..

  • @avitalbenezra7798
    @avitalbenezra7798 6 лет назад

    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!

  • @verdano2577
    @verdano2577 4 года назад

    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
      @chasemarangu 4 года назад

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

  • @davidsoncarpenter873
    @davidsoncarpenter873 5 лет назад

    Example code page not found?

    • @TheCodingTrain
      @TheCodingTrain  5 лет назад

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

  • @czlowiek48881
    @czlowiek48881 7 лет назад

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

  • @yenenehmulatu5707
    @yenenehmulatu5707 5 лет назад

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

    • @chasemarangu
      @chasemarangu 4 года назад

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

  • @jimjajmus
    @jimjajmus 4 года назад

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

    • @chasemarangu
      @chasemarangu 4 года назад

      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
      @jimjajmus 4 года назад

      @@chasemarangu Thank you! I shall try this!

    • @chasemarangu
      @chasemarangu 4 года назад

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

  • @noebory
    @noebory 8 лет назад

    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
      @TheCodingTrain  8 лет назад

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

  • @saammina
    @saammina 8 лет назад

    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
      @saammina 8 лет назад

      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
      @TheCodingTrain  8 лет назад

      oh, glad to hear!

    • @kudre7
      @kudre7 8 лет назад

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

    • @saammina
      @saammina 8 лет назад +1

      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
      @kudre7 8 лет назад

      you are legend mate, very appreciated, thanks!

  • @philipojediran6085
    @philipojediran6085 8 лет назад

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

    • @meeeeeeeeeeeeeeeee31
      @meeeeeeeeeeeeeeeee31 8 лет назад +1

      Processing uses java syntax

    • @michieb1231
      @michieb1231 7 лет назад

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

  • @MatataZ
    @MatataZ Год назад

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

  • @diveintrees9427
    @diveintrees9427 8 лет назад

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

    • @nahueljo
      @nahueljo 8 лет назад

      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.

  • @cyrusadkisson6864
    @cyrusadkisson6864 3 года назад

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

  • @alisyarazmanadam9848
    @alisyarazmanadam9848 6 лет назад

    is this the same for p5?

    • @TheCodingTrain
      @TheCodingTrain  6 лет назад

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

    • @georgesorwell1672
      @georgesorwell1672 4 года назад

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

  • @JasimGamer
    @JasimGamer 4 года назад

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

  • @Krazy0
    @Krazy0 4 года назад

    Hehe I'm viewer number 87,000

  • @imjoecarpenter
    @imjoecarpenter 3 года назад

    screen record..

  • @masterflamaster6377
    @masterflamaster6377 8 лет назад

    too many languages, Dan

  • @VulcanOnWheels
    @VulcanOnWheels 8 лет назад

    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*