Made a spooky foray into video and sound manipulation. Happy Halloween!
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:
- Web editor file size limit. Not sure exactly what it is, but its small.
- 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.
- 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.