Based in Honolulu, HI, 3leet5u is the software sketchbook of Tristan Madden.

Tutorial: Making YouTube Videos With p5.js

This is my current work flow for making YouTube videos from things drawn in the p5.js canvas. We'll start with this small p5.js sketch using WEBGL:

At the bottom of the program you can see that it's saving a frame every time it goes through a draw cycle. I ran this program and stopped it once I had accumulated 4,560 frames. I chose 4,560 frames because that is how many frames a video that is 1m:16s at 60FPS will be composed of. Check out my files:

  Ahhh, shit. My files don't have file extensions. Why the fuck don't my files have file extensions?

Ahhh, shit. My files don't have file extensions. Why the fuck don't my files have file extensions?

It's ok, I can just "cd" into that directory via command line and fix this problem with the following line:

ren *.* *.jpg
  Just like that.

Just like that.

  Great, they're .jpg's now but their names don't have leading zeros. 

Great, they're .jpg's now but their names don't have leading zeros. 

I use FFMPEG to assemble these frames because it's fast and it's flexible enough to produce extremely large, high quality videos. However, my FFMPEG command will contain the syntax "%04d.jpg" which specifies to use a decimal number composed of four digits padded with zeroes to express the sequence number. For example, "1.jpg" should actually be named "0001.jpg". Therefore, I need to rename 999 images in this folder to meet this criteria. I use the following PowerShell script to automate this process:

Get-ChildItem C:\PATH\TO\YOUR\FOLDER | Where{$_.basename -match "^\d+$"} | ForEach{$NewName = "{0:d4}$($_.extension)" -f [int]$_.basename;rename-item $_.fullname $newname}
 Make sure you're in PoweShell. This script won't run in the command line. 

Make sure you're in PoweShell. This script won't run in the command line. 

Now that the images are formatted I can assemble them with the line below. This line takes 0000.jpg - 9999.jpg in a given directory and turns them into a high quality, 60FPS video named noaudio.mp4.

ffmpeg -f image2 -r 60 -i %04d.jpg -vcodec libx264 -profile:v high444 -refs 16 -crf 0 -preset ultrafast noaudio.mp4

The last step is to drag a music file to the same directory as noaudio.mp4 and create a copy of the video with sound added. 

ffmpeg -i noaudio.mp4 -i music.mp3 -codec copy -shortest output.mp4

Aaaand it's done. It's a YouTube video. A video for YouTube. Nice.

Ulam Spiral

Ulam Spiral

Juno Cam Image Processing