Back to Parent

Outcome


Curatorial Statement

"White Noise" provides the user with the ability to populate a space with objects and to navigate that space while experiencing sounds associated with those objects. In this way, one can doodle as a child would but with premade assets. Then, the user can create a more individual experience by increasing or decreasing the quantity of a certain ojbect, which changes the relative volumes of the objects' sounds. The user gains the ability to engross himself or herself in a relaxing or otherwise pleasing experience when interacting with this work. He or she can also explore the world created and play around with what is given to them.

Product 

In "White Noise," the user begins as a tree spirit-like creature who can freely navigate a blank map with arrow keys. 

Deku.thumb
Show Advanced Options

Additionally, the user can press particular keys on the keyboard to generate an icon from nature (thunderstorm, wind, trees, etc.), which itself has an associated sound. The sound loops in the background and changes in volume depending on the relative quantity, intended to create an immersive and realistic audio experience, even in a 2D setting. 

In process.thumb
Show Advanced Options

"White Noise" was made in Processing 3 and coded in Java. It utilizes the Minim and PGraphics libraries for the sound and graphics, respectively. The link below directs to Dropbox, where you can download the folder and run the application called "White Noise" within it. Because the application relies on external files within the folder, it is important to download the whole folder. 

https://www.dropbox.com/sh/cj9ema000432qta/AAB0Xw0I1aYou9wA1GrBPKDka?dl=0 

Intention 

We were motivated by other projects we had seen such as Patatap and knew we wanted to create something that focused on audio. However, we also wanted to make the user more involved in the experience, and so we sought to find a way to give the user the power to control certain aspects of our work. We also liked the idea of exploration, so we aimed to create a sort of map that would hold objects that the user could place out of his or her own will.

The intent of this project was to give the user a way to create a peaceful and unique experience for themselves. The interactive nature of the program draws on the users own creativity and preferences during creation. Then they gain a sense of play as they navigate and experience their creation. They may come to appreciate the experience more as they had a role in creating it.

Context 

http://sayingimages.com/click-the-squares-to-make-music

The combination of sleek visuals and user involvement in both the visuals and the sounds of this piece create a very engaging experience for the user. This served to inspire the involved nature of our work. 

https://www.youtube.com/watch?v=UoOffpFAkpw

Along a similar vein, the swings in Montreal deal with user involvement to create media, although there is more of a detachment here between user and product.  

https://coffitivity.com

This website provides an experience similar to the one we wished to create, although this one is intended to be left in the background. It simulates a relaxing coffee shop atmosphere in which one can presumably work more effectively. We have done a similar thing, although the user is meant to pay a bit more attention. 

http://www.patatap.com

This piece got us to consider the idea of using each letter key to create an object on the space provided. This initial mystery of what key creates what object would encourage exploration of ones capabilities as provided by the program. Although, ours uses significantly fewer keys. 

http://www.typatone.com  

This website associates a sound with each letter of the alphabet and plays the associated sounds given a message the user types in. This also served to inspire the involved nature of the project.

http://a-way-to-go.com/

This game served to inspire the exploration of the user through the environment they create. 

Process 

Below are some pixel art pieces used in the project created on http://www.piskelapp.com/

Below those is the Audacity file in which the sounds were adjusted and made loopable. 

Drizzle.thumb
Show Advanced Options
Tall grass.thumb
Show Advanced Options
Owl tree.thumb
Show Advanced Options
Bird in a tree.thumb
Show Advanced Options
Thunderstorm.thumb
Show Advanced Options
Show Advanced Options
Show Advanced Options
Audacity.thumb
Show Advanced Options

Below is the early source code and corresponding output in Processing 3. At this point, the images had been imported and loaded and the background created in the setup function, which runs only once at the beginning of the program. In the draw function, which runs continuously (or in this case, runs once upon keyboard input), the early code for keyboard movement (arrow keys) is shown. One of the first bugs that appeared was that the sprite had trailing frames, which signified that the background had to be cleared with each run of draw.  

Process 1.thumb
Show Advanced Options

Another issue that was discovered after writing all the keyboard inputs was that because Processing 3 prioritizes the most recently run function, the icons were overlapped with the background color and then the character sprite almost immediately after being generated. 

Process 2.thumb
Show Advanced Options

This is where PGraphics comes in, which allows the user to create multiple layers of graphics, independent of each other. The issue was then easily resolved. 

Process 3.thumb
Show Advanced Options
Process 4.thumb
Show Advanced Options

Below is the process for incorporating sound. Minim, a third party library that allows users to manipulate sound files within Processing, was utilized to import the sound files, loop them, and adjust their gains (since volume was not compatible with the current version of Processing).

Process 5.thumb
Show Advanced Options

At this point, it became apparent that the brute-force, non-object-oriented programming approach used was incompatible with associating sound with images and volume with proximity, as originally intended. Ultimately, the alternative was to adjust audio gain corresponding to the quantity of a particular icon on the screen, which is more easily implemented below. When a key corresponding to an icon is pressed, the draw function checks whether the sound file is already playing. If it is, it increases the gain (the "power" of the audio) by an increment of 10. Otherwise, it begins looping the audio at a gain level of -10. 

Process 6.thumb
Show Advanced Options
Show Advanced Options

Collaboration


Ashley Lee- Pixel Art and Coding

Vicki Long- Coding

Jeffrey Bradley- Sound

Show Advanced Options

Reflection

We think our project could definitely be improved by having a greater variety of objects that could be added to the map, as well as a way to reset the map without having to restart the program. Also, the background is quite plain, and although it gives the user freedom to place things on the map, the background music suggests that the surroundings are not completely empty. The user could be given more freedom as well by allowing them not to simply add set objects to the map, but allow them to draw on the map as well as draw their own objects and associate their own sounds with each object.

Some of our original goals were not achieved; we were not able to change the volume of the sound according to the character's proximity to each object. We feel that this would have made more sense as a character surrounded by an environment.

Our inner critics believe that White Noise does give some amount of freedom to the user but could use more content to allow the user to explore more than the small amount of objects we have given them to use.

Attribution

Sounds taken from freesound.org.

Pixel art created using http://www.piskelapp.com/

Program made in Processing 3 (https://processing.org/) and written in Java. 

Libraries used include Minim and PGraphics. 

Drop files here or click to select

You can upload files of up to 20MB using this form.