Create a button (with a partner) & create an algorithmic design & combine the two

This week, we were assigned to partner up and create a button. The idea of creating a button on javascript, after a couple weeks of making sound interactive programs with shapes that move at the position of your curser, sounded very easy. But, it actually wasn't it all. After a couple days of playing with numbers and looking at examples, we finally got it and were able to get a bit more creative.

We made ellipses that flashed black and white on the inside, changed the background's color and made the stroke weight increase with every other click, when they were pressed.


Here's our collaborated project:

[Try it]


After we collaborated, I played even more with our project and made it sound interactive. Now, the buttons change in diameter to the amplitude of the music.


Clicking on the buttons continued to change the background to different colors. The diameter continued to interact with the amplitude of the music, and you could also draw dots all over the screen. [Try it]

And after a while, I just continued to add and take out different elements to make it more or less sonically interactive.

Then, I added this similar techniques to my algorithmic design and made it mouse cursor/press and sonic interactive.

[try this one & my other like it]

Sound Interactive Visual

After the second class, and learning how to manipulate my code with mouse movements, I became incredibly intrigued with other possible ways of making my code interactive. So, I decided that maybe the next level of interaction should be with sound. I had no idea how to make it sound interactive and wasn't finding much help online. I resorted to asking for help on the ITP Facebook page and was grateful for the resources people contributed to me. After studying and observing other sound interactive code, I was able to make mine sound interactive as well.

This project was very exciting for me as I have so many future projects I want to create that continue this sound interaction method. Next, I would like to learn how to load sound into my code as opposed to using my mic to interact with sound that I play, live.

I especially enjoyed how the beat in this song, interacted with the visual.


One Circle Sound Interaction

These are screenshots of the code while in the midst of it interacting with sound entering the mic. The color changes both as you move your cursor over the screen and as the amplitude of the sound increases and decreases.

[Try it]

Circle + Triangle Sound Interaction

I also made a much more complicated visual that continues the color changing via mouse cursor location and the sound interaction. This one was created by placing ellipses in the center of the canvas, all of different sizes and color opacities. I also added a few triangles with programing that "blink" as it hears harder beats. It was very interesting to create this and see how the shapes interacting with the different levels of amplitude.

Here are screen shots of the code in the midst of sound interaction.