Brandon Roots and I have teamed up to create a sound experience for our next project.  We will be using the code from our worksheet assignment (composition below) to create the experience of being in a dark basement and finding your way through.   This piece will be played by moving through the space and blindly encountering objects.  The encounters will be through sound.  We want to have something playful and a little scary overall.

We didn’t necessarily have any particular piece in mind as inspiration but I have included a few examples that resonated with the experience we are looking to create. 

Robin Arnott’s piece Deep Sea.  Check out this interview where Robin explains more about his piece. 

Sonic Labyrinth by Aviva Endean

Here is another piece by Aviva Endean that doesn’t entirely relate but I thought was interesting:

Space Guitar

Final Piece

This piece originally started out with the idea of having a sound exploration/narrative that was also an instrument.  I an invasion someone walking around, running from place to place using the objects on hand to make music.  This turned into exploring what it would be like to have a piece replicating what it would be like to stumble around a dark attic.  I imagine this piece can still be used as a non traditional instrument, one where it takes patience, understanding and memory to reproduce the exact sounds. 

Memory because the sounds appear randomly on the canvas when the sketch is started.  The user will need to remember where the sound was on the sketch in order to replay it. 

Also, the walking as a sort of rhythm to the piece as well. 

Our final piece does not embed correctly, so please do try it out at this here.   Take your time and enjoy the slow, peaceful interaction of the piece. 
 

For the next iteration, I would like to update the following:

• Have the images fade at as the individual track plays.  I did try this using a for loop within the class’s method but kept getting an error that I could not figure out.   I would use the duration() function withing the Sound library tot determine how long the fade out will be.  I would also use a pixel array ( of the image) in conjunction with the for loop to face out the logo image. 

 Draft with poseNet added for Pixel Manipulation
Code

Lastly, here is our final piece!  Due to the use of the camera, I am not able to embed the sketch here, but please do check out the following links to view our piece. 

Final Project – Full screen
Code

Challenges:

Sizing – We had to scale down canvas to 400 by 400 pixels (vs full screen) as the sketch was not able to load when it needed to manipulate so many pixels.  Instead, we placed the sketch centered on a red background.

Centering – Ideally, the sketch would be centered both vertically and horizontally on the page.  Unfortunately, I had trouble getting that to work.  I tried both div.center() and div.position(CENTER) within the p5 sketch. 

Please do also check out Rajshree’s fantastic blog of this project. 

For our pixel manipulation project, Rajshree Saraf and I decided to make a piece inspired by a hologram card where, as you move the card, another image is revealed.  I am having trouble finding a image reference of the optical illusion but will update once acquired. 

Rajshree shared this piece by Kerry Rodden which inspired the user interaction we will work to create.  In Rodden’s piece, the sketch finds and tracks the user’s eyes in order to create the multicolored eye drawings.   The video below is a screen capture of my interaction with Rodden’s piece. 

Kerry Rodden Eye Sketch

 Currently, we are working individually on our code and will come together to create the final piece.

This week we were tasked with creating an object-oriented sketch, consisting of objects and arrays.   I was inspired by the following clip to create a jellyfish sketch where the jellies would interact with the environment and eventually an intruder. 

In order to track my progress, I made multiple drafts of the sketches so that I can present them here.

I envisioned a scene in the deep ocean where a school of jelly fish were floating around and reacting to the currents.  As the jelly fish floated downwards, their movement would be easy/gradual.  Once they hit the point where they wanted to swim up, their movement would increase.  Eventually, an intruder, possibly a shark, would enter their swarm entered causing the jellies to move away to avoid the intruders. 

 Draft 1:

Code

I began this journey by creating a jelly fish function that had all the capabilities I desired.  Once that was working, I created a class titled JellyFish which housed the the methods constructor(), show(), swim() and move(). 

I had originally wanted to have a more fluid shape for the jelly fish but, after experimenting with various combinations of functions, settled on using an ellipse and an arc.  I would like to learn how to crate different shapes outside of the ones we have available to us in the P5.js reference for 2D shapes.   Had I been able to create the shape I wanted to, I was worried as how to make those shapes interact with each other.  As noted in one of Dan Shiffman’s videos, it is possible to work with shapes other than rectangle and ellipse but it is just more complicated. 

Draft 2:

 Code

Next, I worked to create varying sizes of the jelly fish.  I do like this effect but am not totally satisfied with how the jelly fish are all oriented so that as you go closer to (0, 0) they get smaller.  I was not sure why that happens when I used push(), scale(), and pop(), to create the different sizes.  This is a nice effect and adds the dimension I would like but I am not sure why this effect happens this way. 

Draft 3:

Code

For the 3rd draft, I worked to make it appear as if the jelly fish were in a confined space.  I added the height and the width of the sketch as a boundary for where they could swim.  When the jelly gets to the edge, it reverses course and swims away.  As you can see, I also removed the scaling of their sizes. 

 
Shark:

 Code

Next, I looked at adding an intruder into the jelly fishes’ environment.   Above is the shark I created much in the same way I created the JellyFish class. 

Draft 4:

 Code

Since I wanted the scale of the jelly fish and sharks to be proportional, I shrunk the jellies.   Within this sketch the JellyFish and SharkAttack are in two different classes.  I played with getting the jelly fish to move out of the way of the shark unsuccessfully.  IN the next draft, I moved the SharkAttack into the JellyFish class, renaming it JellyFishLife. 

Draft 5 Final:

 Code

I merged the classes into one, but did create two different objects using for the jelly and the shark. 

In conclusion and questions:

In order to bring this project to where I would like it, I need to figure out the following:

• How can I get the two classes in draft 4 to interact with each other?  I would like to also have the sharks moving along both the x and the y axis .  Maybe even chasing after the jelly fish. 
• How can I make color change in a liner fashion in stroke.  Instead of the stroke being a strobe, I would like the color to move around the body like on actual jelly fish. 
• Is there a millis() function, or something comparable, within JavaScript?  I would like to know how to work with objects that have various timing in their effects.  Currently, I am working with frameRate() to adjust the rate at which the effects happen.  Unfortunately, this makes all the effects happen at the same rate.
• I need to look into scale() further in order to get the varying sizes I would like.  This will help to create depth within my sketch.