Live Video 3d Visualization / Depth Mapping (11/10/2009)

Live Video 3d Mapping – Video 1 from Noah King on Vimeo.

This is a study for a live image processing project which takes live video streams and visualizes them in 3d by extruding the pixels based on luminosity.

Concept and coding are original, using Processing and its built in video library.

Live Video 3d Mapping – Video 2 from Noah King on Vimeo.

This is a second video of the same exploration. You can toggle between color and b+w by pressing a key on the keyboard.

Sound Spiral Developments – MIDI Input + Chord Mode (11/01/2009)

Sound Spiral with MIDI input from Noah King on Vimeo.

My sound spiral project exploration has expanded to include input from a MIDI device. Certainly this makes it much easier to play a recognizable tune, however, only a single note can be recognized at a time with the current code. I hope to rewrite the code using a different approach for scanning the MIDI connection, so that ten keys may be pressed and/or read simultaneously.

Sound Spiral – Playing Chords from Noah King on Vimeo.

To work around the limitation of only being able to play one note at a time, I have programmed in a “chord mode” to my sound spiral project. When holding down the spacebar on the keyboard, chord mode is toggled on, and pressing a single note will play a 1-3-5 chord. I hope to add buttons to the interface which would allow you to turn on and off chord modes with various chordal combinations. That with a record and playback function will push this project towards becoming a true composition tool.

Sound Spiral Piano – Test 1 (10/25/2009)

Interactive Sound Spiral Piano from Noah King on Vimeo.

Last summer I designed an innovative way to visualize music in a spiral arrangement. As you move around the spiral, the pitch of the notes increases, and if you move in one step towards the center, the note increases one octave. The idea of the spiral is to put an emphasis on octaves, as they are lost in standard linear music notation. And the idea of visualizing music is to help listeners understand the relationships between notes by offering a second, supplementary sensory input.

Now that I am learning Processing, I decided to revisit my sound spiral and make it fully interactive. This video documents my first version of the Sound Spiral Piano.

ICM – Project Proposal (10/22/2009)

I have three ideas that I am considering for our first major project in the Into to Computational Media Course. I am equally interested in all three and hope to do each of this projects at some point, so I need to decide which one makes the most sense for this project and this timeline.

Concept 1 – Visualizing Data

I wish to look at a large dataset that changes over time (either stock market or record/average weather temperatures) and visualize this information in layers. With some playing around with graphic design and data visualization in the past, I hope to use processing to create a program that is a more effective communicator and fully interactive.

Concept 2 – MensWear Color Assistant

I have a strong background in color theory and I wish to create a web application that assists men in color coordinating their outfits. I envision the program using color sliders to allow users to dress the manequin in their proposed outfit, and then fun an evaluation function that would confirm or deny their choice and make an alternative suggestion for a better outfit.


Concept 3 – Sound Spiral

While in graduate school, I wish to revisit my sound spiral project and develop it further. I wish to use Processing to make a functional, interactive program that allows users to press keys and make sounds, or input a midi source and watch the music as it is visualized.


Sound Spiral from Noah King on Vimeo.

Interactive Spiral Generator (10/19/2009)


I am interested in exploring different shapes and various trajectories of shapes, expressed within Processing. This study looked at spiral forms, defined by the radius of the overall form, as well as the radius of the round brush size. Spirals are drawn in different colors and random diameters around a common center point. Clicking the mouse relocates the center point.

Colored Spiral Vortex from Noah King on Vimeo.

Visit this link for the Live Processing Sketch.

Frequency of Primes – Revisited and Automated (10/13/2009)

Last summer I explored several data visualization projects, one of which looked at the intervals in between prime numbers. Without any programming experience it was quite tedious to make all the calculations and drawings one cell at a time. This week I have gained the ability to parse large data files and extract the data from within, so I thought I would revisit this project and fully automate it. Below is a screen shot of the final image and a video of the program running. I will work on this more to add color and produce exponentially larger printouts, possible pushing the dataset up to one million prime numbers.


Frequency of Primes – Small Size from Noah King on Vimeo.

This is a visualization of the first 1600 prime numbers and the spaces in between them. The left margin of any colored block is one prime number, and the right margin is the next prime number. The width of the block therefor shows the space between the two, specifically the number of non-prime integers that occur between the two primes. The colors are automatically selected by the software to put visual emphasis on the largest intervals and to help visually identify repeating intervals.


Frequency of Primes – Medium Size from Noah King on Vimeo.

This is a visualization of the first 15,500 prime numbers and the spaces in between them.

Causation of Degeneration (10/03/2009)


This is the first successful Processing sketch using object-orientated-programming. Adding a bit of random to a 2-dimensional array of colored squares, the oscillating pattern of color change degrades over time until the whole window appears to be random (this takes several minutes). I still haven’t thought of a way to make this interactive.

To watch the actual program, click this link to the Live Processing Sketch

Processing Interactive Drawing Application (10/03/2009)

Processing – Interactive Drawing Application from Noah King on Vimeo.

This processing application is the first one in which I have successfully used functions. In the past I have used the controlP5 library to add a user-controlled variable to the top level of the sketch. This time I explored writing my own code to have fully-interactive, user controlled settings. This allows for several distinctively different drawing methods to be bundled into one program and accessed by clicking on buttons and sliders. The end drawing experience is decent, but mostly this was about the UI and the organization of the functions. I hope to program the sliders as objects, and then have many more variables to control, like color saturation and brightness, drawing tool shape, eraser, etc.

To try out the program yourself, follow this link for the Live Processing Sketch .

Source Code Here

Colored Circle Drawing Tool (9/28/2009)

I am particularly interested in created computation based art-making tools. This processing sketch is a drawing tool that creates circles of different colors (randomly selected) and different sizes (based on the speed of the mouse) that follow the position of your mouse. Click the mouse to start and stop drawing.

These captured frames show some of the images that can be created.


image 1


image 2


image 3

Circle Drawing Tool – Live and in Action from Noah King on Vimeo.

By moving the mouse quickly or slowly, the types of circles being made are drastically different. When the mouse moves off the screen and then re-enters, enormous circles are made that almost take up the whole screen. Turning drawing mode on and off by clicking the mouse gives the user that ability to make very deliberate strokes.

Live Processing Sketch
Source Code

Hot-Tempered Robot: An Interactive Character Sketch (9/24/2009)

Working on this collaborative project with Fu was a lot of fun. He has a design sensibility that is very playful and humorous, so together we built on his character from last week to make it much more interactive and funny. Overall, I think we were very successful!

Mostly I contributed the swinging hammer component. It all began with a simple test to see if I could get an object to rotate.


Live Processing Sketch of Hammer Test
Source Code of Hammer Test

Once this hammer motion was added into the joint sketch, there was a bit of tweaking to get it to work with his objects, to activate it with a button, and to animate the aftermath of his character being struck.


Fu + Noah make a Robot fly from Noah King on Vimeo.

Live Processing Sketch of Final Interactive Project
Source Code