How to export p5.js animations to a video format with CCapture.js | Tutorial #7
ฝัง
- เผยแพร่เมื่อ 6 ต.ค. 2024
- This tutorial shows how to export a p5.js animation to a video format with the javascript library CCapture.js. There are multiple exporting options. This tutorial shows how to export to webm and GIF.
If you want to improve your coding skills further, head over to codiwy.com. It is totally free to get started, and there will fresh content available every week.
Source code on GitHub:
github.com/col...
Webm is a web based format but it can easily be converted to mp4 or similar through this webpage:
cloudconvert.com/
If you want more examples of things you can do in p5.js, just head over to Instagram:
/ colorfulcoding
Get the CCapture.js library from here:
github.com/spi...
p5.js documentation:
p5js.org/refer...
If you don't know how to get started, here's a video covering that:
• Get started with p5.js...
If you have any questions or requests for future projects, feel free to leave a comment below 👇
Awesome tutorial! Thanks.
This is exactly what I want
Thanks for the tutorial, it was super helpful!
would be great if i actually knew how to open my animation on google
Awesome tutorial! It was really helpful, tho I remain a question
How can I change the resolution of the final video, it all depends on the canvas size?
Yes, that is correct. The bigger the canvas, the higher the resolution.
I followed your video to record a 400x400 canvas at 60fps. I can save a webm video that's less than 2 seconds but anything more than this and the animation freezes without saving any video. I tried to lower the framerate to 30, but I get the same results. Is there any way to work around this freezing? Is my computer just not powerful enough? I'm using a 2016 Macbook Pro with 8GB of memory.
Your computer should be more than capable to do that. It's hard to say whithout seeing the code, but try going through the video again and make sure everything is as it should be :)
hey there, whenever i try to save the recording i get this TypeError download is not a function. i have installed the download package and loaded it in the index.html file but still get the same error. Any idea on how to overcome this problem?
Hmm I don't know. It is difficult to say without looking at the code. Are you sure you have used the right path in the link? :)
How did you open the chrome like that?
where are you getting that frameCount value from?
Is it recording with sound
Hello friend, I hope you can answer me. I happen to have seen your other video where you teach how to make an audio visualizer. I want to export the video with this tutorial, but it turns out that when I see the export everything is very fast.
I think that has to do with the speed at which CCapture records the canvas. When recording it moves through the frames slower than it normally do. However, the music that the animation reacts to, is playing at normal speed during the recording. So when you play the recorded video, it will be faster than the music. Hope that makes sense.
@@ColorfulCoding That's exactly what happens, but I have no idea how to fix it. And hey thanks for answering me so quickly
I wait your answer :(
You could try to slow down the song using either playback rate (p5js.org/examples/sound-playback-rate.html) or speed (p5js.org/reference/#/p5.MediaElement/speed).
@@ColorfulCoding I solved the problem, it was the speed of the audio as you said. But I had problems with the tone changing the wave too much, although I managed to fix it with FL Studio. My last question, how can I get the audio to start right away?
Thanks friend, from here to this week I will join your page as a member to take the courses.
This ccapture video+audio recoding possible
can you share your process? i tried to capture my pj5s animation that contain video with audio. but no sound, visual only.
Hey😄 how’s it going? I’m having an issue when I try to do it with the png format because it doesn’t download anything. All the frames are saved but after the process finishes the images doesn’t appear anywhere? What can I do?
Hmm, I havn't used the png format very much. Have you linked the 'tar.js' file in your html file? Exporting to gif should also give you all the frames separately, if that is what you want :)
@@ColorfulCoding Yeah I linked it in body and in head the complete library. I don’t know why it doesn’t function. Anyways, what I have to do in order to get all the frames separately? Gifs? The thing is that I need the png with full quality to go to FFMPEG
@@agustincarpanetto9504 I'm not sure how good the quality will be when you export to gif. All you need to know should be covered in the video :)
Hi,
is there a simple way to use p5 as webcam source for programs like zoom, google meet, etc?
In JavaScript you can use the navigator.getUserMedia to access the webcam. You can find lots of examples online :)
@@ColorfulCoding For webcam input I use createCapture().
navigator.getUserMedia is deprecated by now.
But thats not what I meant. I want to use p5 as digital camera output.
Now I found a way by capturing the screen with OBS. But for this the p5-window has to be open.
Ah sorry, I meant this one: developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
Hello a question how can I use Ccapture.js using only the canvas tag without the p5.js
I don't think you can do that without p5.js. At least not without making some kind of draw function yourself. But then you should just use the library :)
@@ColorfulCoding and Delay the call of the setup and draw until another function finishes and that p5.js is executed at the moment of loading the web page
@@dunocgame864 hmm, I haven't tried that before, but maybe you could use JavaScript to add the script later
@@ColorfulCoding Hello Sorry I did not answer after trying a while I managed to save the gif and png with only the canvas
Hola Disculpad no a ver respondido luego de probar un rato logre guardar el gif y png con solo el canvas api
link: github.com/DunoCgame/ExampleCcapture/blob/main/index.html