EDP Journal

<p>Emergent Digital Tools – Fall 2016</p>

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…


p5js – 2

We have moved on to combining for loops and arrays in p5js. This is a quick way to multiply a ton of objects and get them animated. I’m kind of understanding the basic idea, but still cannot seem to build out a sketch without referencing a tutorial or help website. Every animation or function has a glitch and executing what I think are simple functions is taking forever right now. Hopefully I get more fluent with practice. My main issue is that I have conflicting for loops, one will not allow the other to run, and I  have no clue how to fix this. I’m also still trying to clarify how to write conditional statements correctly the first time around.

What you see above is a limited version of what I was trying to accomplish, still kind of fun to look at though. The ellipses are bouncing back and forth as they touch the edges of the canvas, changing color depending on which side they bounce off of. I have a couple growing and shrinking rings that mask the snow globe effect to create a little more visual interest. The rings are supposed to be fading in and out, but I can’t get the “if” statement to work as of yet.

I’m hoping to get this syntax down quickly, because I’m thinking of incorporating a looping p5js animation into my final Sonic Arts sound installation. It would be really nice to have a projected dynamic animation accompanying my sound project, so I’m diving into sound interactivity tutorials with Dan Shiffman. Am I going way in over my head? Probably. Right now I’m looking at amplitude analysis so I can make my animations visually react to a soundtrack.

Mario Pong

Click in the window to play. A and Z keys move the left bar up and down.