Archive for November, 2016

Final – EDP Logo Generative Animation

I’m pretty happy with how my final project turned out. We were asked to bring in a few generative animation examples to use as creative inspiration for our final project. I brought in this example, and it didn’t take long for us to crack the code of how it was accomplished in class. I took this resampled code and started working on expanding it’s premise which was pretty basic. Understanding classes and how to combine them with arrays was pivotal for developing this project.


Chris showed us how to detect image attachments in p5js by telling a particle to sense the image by color percentages. This opened up a new possibility to animate a ton of pixels and mask them until they sensed certain images that I preloaded in the sketch. Here are the 4 images I designed, each had a different class of particles interacting with them to create a multilayered effect:

edp_grid3 edp_logo_outline edp_logo_red_solo edp_logo_red












By using variable speeds that were linked to perlin noise I was able to create some pretty fun effects. Perlin noise is very sensitive, so dialing in the right numbers took a very long time. There are 4000 total pixels at work in this animation so it gets a little bogged down, as they are constantly searching for the red to trace in the image examples I posted above. I’m happy with my progress in p5 for this quarter and am excited to keep digging into programming.


Arduino & Potentiometers

We started messing around with Arduino, a type of microprocessing kit that can be programmed to control devices. I’m pretty illiterate when it comes to electricity and how connections work, so this is a good opportunity for me to gain some basic knowledge of circuitry. We plugged a few things into our breadboards, made lights flash and then starting messing with a sliding potentiometer. This is where my interest is peaking, because I may be able to program a couple of knobs to interact with my final Sonic Arts animated projection. I’m pretty nervous about hooking this stuff up to my laptop, as we were warned a bad connection can fry your USB port.

I was provided a tutorial on how to connect p5js to a serial input, which is what I will need to do if I want to make my animation interactive. I really need to run through some more experiments with my SparkFun Kit to get comfortable with this stuff and still feel a little lost. We were provided a really nice introduction tutorial for the kit here.

Meanwhile, I have done a rough p5js sketch of my Sonic Arts projection, the only thing I’ve animated is some twinkling stars. The idea would be the blue ring would orbit around the planet and pulse to the music’s amplification levels. Ideally, users would be able to turn knobs and effect the color and intensity of the animation.


p5js – Perlin Noise, Audio & Functions

Screenshot from my Perlin Noise driven animation, which syncs with any accompanying soundtrack's amplitude.

Click the image to view the animation. // Screenshot from my Perlin Noise driven animation, which syncs with any accompanying soundtrack’s amplitude.

We messed around with Perlin Noise in p5js last week and I got pretty excited at the possibilities of random generative animation. I kept messing with this concept and have a couple animations set up to link with audio. The amplification of the audio basically affects the speed and size of the animated shapes. I’m pretty shocked that I’ve gotten to my goal of tying these elements together, and will hopefully have p5 incorporated as an animated, interactive projection into my final audio piece for Sonic Arts.



Initial Robot Head Sketches

Initial Robot Head Sketches

Moving on, we jumped into creating custom functions which I can already tell is a powerful tool. Our project was to create a 20×20 grid of 4 different robot heads, with 4 different audio cues tied to clicking with the mouse. I’m happy to say I wrote the code without a lot of hangups, but I got stuck on assigning the audio cues.



20 x 20 Grid of talking robot heads.

Click the image to load the robot audio sketch. // 20 x 20 Grid of talking robot heads.

For “mousePressed” I nested my “if” statements and rendered them inoperable, but got it fixed up with my instructor’s guidance *wink wink* and some help from my colleague, Rich. I’m trying to go the extra mile and make every individual robot head clickable, as of right now just each column is clickable.



My first time writing a custom function, I like these glowing Halloween Heads.

Click the image to view the animation! // My first time writing a custom function, I like these glowing Halloween Heads.

I’m looking forward to learning Arduino this week, as it may be my gateway into figuring out a way to give my Sonic Arts installation that extra level of interactivity through touch activation. I want to tie my p5js code to physical objects that will signal the animation to change color and amplitude. We will see if I learn enough to get it done…


Functions for Halloween

Happy Halloween! Have some glowing creepy smiley faces.

Robot Functions

Click on any column for a custom robot noise. I made each robot noise in Audition, just tweaked my voice with some reverb and effects.

Perlin Noise and Audio

Move your mouse up and down the image to control the volume. The more volume you give the animation, the more intense it’s reaction to the song.

God of Sleep

For a pre-final installation warmup, I was asked to create a looping 4-channel piece to be tested in the EDP Hypercube (performance space). We were asked to create our tracks based on an alternate persona, so I chose Hypnos, the Greek god of sleep. I tried to embody a sense of sleepy ambience, without relying on abstract ambient noise as I enjoy making my pieces musical. I recorded myself in the bathroom shower playing the guitar riff as well as ringing a Tibetan cymbal. The long synths were created in and the shorter more prominent synths were created in Reaktor. The challenge was to combine musical elements that could randomly overlap each other and still feel in place while the loop progressed. I stopped this track at 4 minutes, but feasibly it could be played for a day without any track overlapping the other.