Happy Halloween!

Made a spooky foray into video and sound manipulation. Happy Halloween!

Here is the link to the code.

For me this was a big step towards the third #goal listed a few months ago: Making sweet animations and visuals.

This project presented many challenges with p5, as well as its web editor.

Original video background clips I made were much more high-def, had longer durations, and smoother looping. But due some limitations, I had to cut down on quality, duration, and complexity. The same goes for the audio, which I cut to a single loop. The limitations were cause by:

1. Web editor file size limit. Not sure exactly what it is, but its small.
2. Data overload in p5. In this sketch, we ask p5 to show video and audio at a rate of 60 frames per second. This creates some lag and ‘bursty’ effects. It also limited me from adding additional effects, namely:
   • Background color changing: Both tint() and filter() caused intense lag.
   • Music analysis: Intended to use the p5.fft() or p5.amplitude() to change the size, color, and/or position of the skull, as well as trigger background changes. This also create a lag effect. I am looking forward to using the getEnergy() function to make some cool stuff in the future.
3. File types. As a counter to file size I also tried to use a GIF instead of a video. This presented some issues – The program would either show only the first image of the GIF, or it had to be added as a DOM element; that was difficult to manipulate, with layering that issues I could not solve.

Is there a better tool to do this stuff? Max MSP?

Anyway, I made a more advanced version with code (but no assets) here. Here is a sample of what it looks like:

FYI, the flames were made in Adobe Premiere, and audio the clip was edited down to size in Adobe Audition.

Copyright Epic Records for the sample I took from the ‘HIStory: Past, Present and Future, Book’ Michael Jackson album my Mom bought me from FYE. Credit to Pigment Ajans – Visual Effects for flames source material.