Internet Art Project
Partner: Tiger Tian
For this project, Tiger and I decided to actually incorporate music into our project, since we were unable to do that for our first comic project. However, this project went through a lot of idea revising and discussion sessions to make it more user friendly. Right when we were introduced to the P5 system, we knew that we wanted to incorporate it somehow within our project to enhance the visual aspects of our project, but we were unsure how. In this project planning stage, we started out by discussing ideas of the music piece. Tiger really wanted to incorporate the piece he wrote and I really liked this idea, however, I’m a little sad that the class is unable to hear Tiger’s beautiful voice and the lyrics he wrote for this song. We wanted this project to show the importance of the single beats that makes up the entire piece of music. Usually, audiences are introduced to the hottest song and just listen to the song purely as a whole, but hardly anyone takes time to analyze the importance of each beat that contribute to the finished product. If one directs their attention to each beat, they’d realize that a song is made of a lot of different beats and tempos. More importantly, these organic beats when played alone also illuminate a different kind of audio beauty. This meaning is actually secretly embedded into our website name “S.O.N.G.” We decided to use periods to separate the letters into single units to visually display how individual units make up larger entities even with words, and the periods are also correlated to the separated spheres on the monitor once the music is paused.
We surfed the web for quite some time to get inspiration and we landed on the idea of a launchpad. We wanted to create a digital launchpad on a website where the user is able to put their own twists on Tiger’s song (originally, Tiger was going to incorporate his lyrics) so the user is able to create different versions of the piece. Moreover, while the user inputs beats by pressing buttons of the launchpad there would also be visual displays encoded within each button so once the “onclick function” is carried out, a “visual art” piece would be displayed. Hence, the user would be able to compose a song while digitally creating a piece of art. After deep consideration of this idea, we came up with different ideas of how to place a digital launchpad online to make it visually pleasing. At first, we wanted to just download a launchpad image and photoshop all the buttons, so when the user presses the buttons another image would be retrieved to create the illusion that the button is pressed (retrieved image of button with color). Another idea was to use the code for the digital music boxs we learned in class and display those as the launchpad buttons. However, we deeply considered the effects of incorporating P5 to this launchpad concept and realized that it wouldn’t be as aesthetically pleasing with photoshopped buttons, or colorful music boxes because these colorful elements would distract from the visual art that would be displayed.
After realizing the clash of the colors from the buttons and the art that would be displayed, we decided to seek another idea to incorporate the concepts of buttons and the concept of art. We finally settled on the idea of a simple display of a play button on a background because we thought the simplicity of the first impression of the website could create an illusion that the website is purely a play button, but when users finally start to interact with the website, they’d realize that the simplicity is quite deceiving because they would be introduced to a lot of visual displays after their interactions. In order to incorporate the buttons, we decided to divide the screen into 5 divs and assign each of the 4 corners a different beat, while in the middle it would be the control for the pause and play. These are the following positions of the 4 buttons.
Next, the screen was originally divided into two halves with the top half being blue and the bottom half being pink while the background would display the colorful tunnel effect. However, we decided that the colors clashed too much and decided to change the entire background into black. This also provided a dark contrast to make the colors appear more vibrant as the tunnel starts to appear on screen. Although this allowed the colors to look better, it created a issue-users were unable to identify the 4 different buttons on the corners of the screen because it was all black.
Although there was the hover option that would lighten the buttons when users were taken onto the screen, most users would just click the center play button and just listen to the song because they could not identify the other 4 corners for interaction. So we decided to frame the boxes somehow. At first we decided to use white border for each other the divs, but the white made the screen look like there were only 2 panels, even with the division line between the boxes. Next, we decided just to change the boxes to have different color borders to make it more obvious that there were borders. We searched on a color palette and started with a simple ombre from red to orange to yellow hues, but it did not look aesthetically pleasing, next we decided to revert back to the original white color but instead of framing the boxes we wanted to fill them in. However, this made them look more like 2 distinct panels. We also considered the idea of setting each box on a timer and after the user clicks the play button, the first top right button would blink, then the next button would blink, and so forth. However, we were scared that this would create the illusion that there is a specific pattern of clicking the buttons. After multiple discussions and asking for outsider’s opinions we decided to use white and grey boxes to divide the 4 corners and for them to blink and then disappear so users would acknowledge their existence.
Next, we had to decipher how we wanted the digital art part to be displayed. In the beginning, the artwork was immediately displayed in color after the user clicks the play button, however, we thought that this would eliminate the surprise factor for the user and make them stop interacting with the screen. Afterwards, we thought it would be better to display the tunnel in grey color first and after each click of the four buttons, the user would technically be “changing” the color of the tunnel as well as silencing a beat on the screen, which would stimulate the visual appearance of the website.
After deciding the display of the art, we wanted to incorporate more visual aspects to each of the beats for users to identify the different elements that contribute to the whole song. To do this we decided to designate a different wave movement to each corner that would move according to their own beats.
in the midst of trying to come up with different animations, we wanted to make one of the four corners rotate or vibrate according to the beat. It looked kind of odd since the rest of the three corners were going in a straight direction with the animations while the fourth corner would just spiral around the screen. But, it looked really cool. So instead of applying the “rotate” function to the fourth corner, we decided to use it before the ending to create a different art display for the user. With the spiral, the ending of the song would also allow the balls to be more evenly dispersed to be more visually appealing after the song ends.
Additionally, to make the website more user friendly, we decided to incorporate hover options for users to interact with the wave lengths of the different sectors. Instead of just changing animations according to their own beat, once the user hovers over each of the 4 sectors, the wavelengths would also change according to the users mouse.
For this project, there were a lot of setbacks concerning design. We had a lot of different ideas to incorporate more animations such as dividing the song into 3 different sectors and designating 4 new animations for each sector, however, time did not permit these changes because it would require at least 12 separate animations. Moreover, we had multiple debates concerning the indication of the 4 buttons in the beginning of the page. From a visual aspect, we were not fond of the 4 boxes that blink before the page, but many users stumbled in the beginning because they did not realize the 4 buttons embedded at the four corners. We were left with the decision of either keeping the 4 boxes or having a screen of instructions displayed before the actual play button. However, either way the displays would interrupt the simplicity of the website which we wanted to keep. Therefore, we still ended up using the 4 different squares in the beginning. Moreover, we wanted to incorporate animations where users can interact with the balls on the screen after the song is paused, like the balls could bounce on click, or they could spiral on click, however we thought it would be unnecessary and we did not want to incorporate more interactions just for the sake of incorporating them. If we were to do this project again in the future, I would like to incorporate background music even when the music is paused so the user is not left with nothing on a blank screen. Moreover, I would like to think of a different way to indicate the 4 buttons because they are still not as visually pleasing as we wanted it. Moreover, maybe the sizes of the divs could be divided up more evenly so the center of the screen doesn’t look as narrow compared to the 2 other sides of the screen.