ICAM 101

Digital Imaging: Image and Interactivity

Final Project in Processing

Synthesizer

For my final project, I knew I wanted to do was create a new interface for sound creation.  I wanted to combine what I learned about Processing with what I knew about programming sound.

This interface starts out as a blank gray canvas. There are two modes accesible to the user: draw and edit mode. They are reached by pressing ‘1’ (draw) and ‘2’(edit) on the keyboard. Also there is a toggle for muting the sound by pressing ‘m’ on the keyboard.

Draw mode: When in draw mode, the user can click to create circles. The location of where the user chooses to place the circle is important. The x values of the canvas correspond to pitch, with x = 0 being the lowest pitch, and x = width of the screen being highest pitch. This isn’t perfect; right now it is a linear scale mapped to frequencies, meaning every pixel increase is an equal pitch increase (e.g. x0 = 20Hz pitch, x2 = 120 Hz, x3 = 220 Hz). The linear scale means that the canvas has more high pitches than low, as opposed to equal distribution.  Ideally, it should be a logarithmic scale because that’s how frequency works (x0 = 20Hz, x1 = 40Hz, x2 = 80Hz; these pitches increase by a factor of 2). The y values of the canvas correspond to amplitude, with y = 0 being 0 amplitude, and y = canvas height being 1 amplitude.

Edit mode: When in edit mode, the user can click and drag circles, and delete individual circles by pressing ‘backspace’ when a circle is highlighted (mouse over the circle), or clearing the canvas by pressing ‘delete’.  When moving the circle position, the pitch and amplitude change accordingly.

The basic structure that this program uses is that each circle is an object. Each circle object has a pitch, amplitude, and XY position. Every time the user draws a new circle, a new circle object is added to an ArrayList. When in edit mode, there are tests to see if mouse position is over a circle, and when an object is selected, it correctly accesses the circle that is chosen by accessing the corresponding element value in the ArrayList.

I really enjoyed doing this project. I have previous knowledge of music programming in Pure Data (visual programming geared towards sound production), so I’m really comfortable with the properties of sounds and how to do certain things with sound; it was a bit different using the minim library (audio) in Processing, but the learning experience was cool.  Making the GUI and making it interact in the way I wanted to was tough; there were so many bugs I had to work through, but I am pleased with the way it turned out.

In the future, I hope to add more features to this (such as a fellow student suggesting that when a circle is dragged, when released it still moves with a certain velocity) as well as clean up the code (it’s really messy right now) and see if I can make the code more efficient (I’m sure there are plenty of ways, I just wanted to make sure I could get the program to work before making it more efficient).

Despite not really being a programmer (I know Pure Data pretty well, and took an intro to Java series last year) with enough time and interest, it was possible to turn my idea into a working program. Plus, I changed my attitude towards programming. Previous to taking this class, I had developed a sort of a hate towards programming (not including Pure Data; I think the visual programming aspect makes it more interesting). My Java classes were so boring, and the assignments I had to program were not that appealing to me, on top of them taking forever to do! But with Processing, I feel like when programming is geared towards an artistic output, it becomes way more fun as I get to create an interactive visual experience that can be accompanied by many things (such as sound). It’s like solving a puzzle to create something that I envision. It’s really cool. I think I will continue to explore the possibilites of Processing, as well as refine the projects I’ve already done.

Processing II

Fly

For our second Processing assignment, I kinda was messing around with ArrayList and ended up with this. My initial idea was to click to create a circle, and each new circle would connect a line.  Eventually this turned into bird/bat things that fly around the screen, connected by lines.

The first click creates the first bird/bat. This bird is the original bird, and every new bird that is created will be connected by a red line to this bird. Every other bird will connect to the mouse position with a black line.

The birds are given a random direction upon being created, and eventually they end up trying to follow the position of the mouse. 

The lines don’t have any function, but they suggest that there is supposed to be some sort of relationship between the birds. This was mostly done for aesthetic reasons.

Figuring out ArrayList took awhile, but eventually I was able to make this functional. Each bird is it’s own object and stored in the ArrayList.

Processing I

Clock

For our first Processing assignment, I decided to make a clock by visually representing time elements as arcs. The clock constructed a series of arcs and ellipses drawn in draw(), and defaults to a sky blue color (to try to represent the sky. The clock uses a HSB (Hue Saturation Brightness) color code. 

The arc “hands” are ordered (from outer most to inner most): seconds, minutes, hours, days, months.

It has some elements of interactivity as well.  If the mouse is hovered over the second, minute, hour, day, or month element; the arc will be “highlighted”.

In addition, if the year element is clicked, the color of the background will change. I thought adding variety to the color would be cool. 

I also thought it would be cool if the background changed according to time of day. When it is noon, the background is at its brightest. When it is midnight, it is at its darkest.

I really enjoyed making this. My code is definitely not the most optimized as I am not an expert programmer, but it works! And I think it’s awesome looking!

I do plan to make the code run faster at some point in the future, just on my own outside of the scope of this class. I also hope to figure out a way to incorporate seasonal changes as well as weather/temperature changes.

Processing is an amazing language. Personally, I did not enjoy Java very much when I took it last year. But Processing (pretty much Java) throws out any “programming hatred” I had and welcomes me as it is geared towards making visual pieces. Plus the programming is relatively simple, pretty much all that is needed to know is the basics of Java.  

This piece, visualization of sound with Processing, maybe something I might want to try…(being an ICAM music major).

Project II - Transmedia

Sorry about updating this so late!

For our second project, we had to do a transmedia project.  Our group had the idea involving shoes and some sort of fetish and a man named Sam Burtoff (completely random name, any coincidence is unintended) as a commentary of multiple internet personalities that people can have on the internet. (e.g. Joe has a professional-looking Facebook, but his youtube has videos of him drinking).

Our execution of the project was not very well. I think it’s safe to say we didn’t develop the idea well enough. I hold no one in our group accountable for the mess up, we were all part of the group and had equal responsibility. We just had some miscommunication and last minute changes that did not benefit the project.

Sometimes people mess up. The important thing is accepting it, understanding what went wrong, learning from mistakes, and moving on. 

The link above was my contribution to the project, and contains pictures of a lot of shoes.

Paul Ripke - Kindsköpfe Procrastinating led to discovery of this work. This work is by a German artist, Paul Ripke, and is a series of photoshopped images. I thought that this piece was clever, but such a simple idea that is executed well in a unique way. (Clicking the photo links to the website with more images).

Paul Ripke - Kindsköpfe

Procrastinating led to discovery of this work. This work is by a German artist, Paul Ripke, and is a series of photoshopped images. I thought that this piece was clever, but such a simple idea that is executed well in a unique way. (Clicking the photo links to the website with more images).

Public Persona 1920x1080 (original 3840x2160 exceeded upload file size limit) My project was a representation of searching for the name “Lalli Flores.” It is very detailed and best described as a diagram.  I wanted to show every option of search in an organized way as a comment of the Internet and its vastness of data.  I also wanted to reflect the creepiness I felt when I first heard about this assignment, and I think this adequately reflects this by showing that the search of “Lalli Flores” leads to all of this data and various outlets. 

Public Persona 1920x1080 (original 3840x2160 exceeded upload file size limit)

My project was a representation of searching for the name “Lalli Flores.” It is very detailed and best described as a diagram.  I wanted to show every option of search in an organized way as a comment of the Internet and its vastness of data.  I also wanted to reflect the creepiness I felt when I first heard about this assignment, and I think this adequately reflects this by showing that the search of “Lalli Flores” leads to all of this data and various outlets. 

Analog or Digital

Interactive 8-bit music video for the song Analog or Digital, by Wildlife Control. It all takes place within the browser. From the site:

This here’s a brand new kind of music video that’s not really a video at all (ever see a video where your comments appear IN THE VIDEO?) It’s more like a dynamic animation that uses newfangled web stuff like HTML5, CSS, JavaScript, and the SoundCloud API to throw a party in your browser. 

This photoset is part of what is known as The Johnny Cash Project. It is basically a music video composed of user-submitted drawings for different frames of the animation. With this assignment I discovered that I am much better at drawing than I previously thought; I tried to incorporate the four different styles to choose from (Abstract, Sketchy, Realistic, Pointillism). From the website:

A “Living Portrait” of the Man in Black

The Johnny Cash Project is a global collective art project, and we would love for you to participate. Through this website, we invite you to share your vision of Johnny Cash, as he lives on in your mind’s eye. Working with a single image as a template, and using a custom drawing tool, you’ll create a unique and personal portrait of Johnny. Your work will the be combined with art from participants around the world, and integrated into a collective whole: a music video for “Ain’t No Grave”, rising from a sea of one-of-a-kind portraits.

Strung together and played in sequence over the song, the portraits will create a moving,ever evolving homage to this beloved musical icon What’s more, as new people discover and contribute to the project, this living portrait will continue to transform and grow, so it’s virtually never the same video twice.

Ain’t No Grave is Johnny’s final studio recording. The album and its title track deal heavily with themes of mortality, resurrection, and everlasting life. The Johnny Cash Project pays tribute to these themes. Through the love and contributions of the people around the world that Johnny has touched so deeply, he appears once again before us.

The Johnny Cash Project is a visual testament to how the Man in the Black lives on - not just through his vast musical legacy, but in the hearts and minds of all us around the world he has touched with his talent, his passion, and his indomitable spirit. It is this spirit that is the lifeblood of The Johnny Cash Project. Thank you for helping Johnny’s spirit soar once more. God bless. 

-Chris Milk

Permalinks to my drawings:

TURN A BEAUTIFUL SCENE INTO AN OMINOUS SCENE

My interpretation of the randomly given note.I did a quick Google search for a beautiful scene, and settled on the picture that is displayed first. After opening it in Photoshop and playing around with some parameters, I ended up with the second picture.

I’m really excited with the result I got, and think it achieves the quality of being ominous, yet still beautiful.

Project Glass: One day… (by Google)

Google unveiled “Project Glass” today, an augmented reality device that would be worn by the user in the same fashion as glasses. It’s a pretty cool idea. Here’s what the Google+ page for Project Glass has to say:

We think technology should work for you—to be there when you need it and get out of your way when you don’t. 

A group of us from Google[x] started Project Glass to build this kind of technology, one that helps you explore and share your world, putting you back in the moment. We’re sharing this information now because we want to start a conversation and learn from your valuable input. So we took a few design photos to show what this technology could look like and created a video to demonstrate what it might enable you to do.

Glasses

A unique camera known as the Lytro allows users to capture what the company calls “living pictures.” It works by capturing the light field: all of the light traveling in every direction and every point in space. (A traditional camera that captures only a single plane of light).  Because of its ability to capture the light field, the picture can be focused and refocused anywhere in the picture. Check out the example of a living picture of two cats below: The website can be found here, along with how the Lytro works and some more pictures taken with the Lytro.

A unique camera known as the Lytro allows users to capture what the company calls “living pictures.” It works by capturing the light field: all of the light traveling in every direction and every point in space. (A traditional camera that captures only a single plane of light).  Because of its ability to capture the light field, the picture can be focused and refocused anywhere in the picture. Check out the example of a living picture of two cats below:

The website can be found here, along with how the Lytro works and some more pictures taken with the Lytro.