Student: Kacper Krasowiak
Partners: Isabella Malixi
Post: Internet Art Project “Christmas World Radio”
Christmas World Radio
Coming up with an idea for this project was both challenging and rewarding. It is the Christmas time so my partner and I wanted to make a projected deeply embedded in the Christmas culture. Simultaneously, we wanted to explore the topic of cross-culture differences related to this special holiday. Later, we wanted to share our findings with the user. Hence, at the beginning, we wanted to make a map where users could click on selected countries and read about their Christmas customs and possibly listen to their Christmas song. However, we received a constructive feedback and realized we needed to add more to it, to make it less informative but artsier. Hence, came up with the idea of Christmas World Radio. It is an interactive map where users can slider over a map and listen to a Christmas song the selected countries. It resulted in two things: 1) the project became more artistic, it allowed users to dynamically compare Christmas songs from different regions and cultures and 2) the level of user interaction increased dramatically and became an active, interesting and thought-provoking activity rather than just passive clicking and reading the displayed information. Gaining the deeper understanding of art was the challenging part for me. Interestingly, I experienced a similar challenge in another IMA class, Unmanned Aerial Storytelling, that I am taking this semester. During that class I had to make a documentary and going beyond technical details, which was putting storytelling into the core of the movie, was the challenge for me. At the end, however, I put experiences, knowledge, and conclusions from both classes together and now I think I have a far better understanding of art. It is the rewarding part.
As mentioned, our project is an interactive map where users can slide over the map and listen to a Christmas song from each time zone. After coming up with an idea for this project, Isabella and I had to think how to design it. We were searching on how we could divide the map of the world in order to make further user interaction easy and enjoyable and at the end decided to use the division for time zones. Later, we made a list of countries from each time zone and had to categorize them by culture, geographic location and of course state if people celebrate Christmas there. Upon completing the list, we moved to the part where we were searching for Christmas songs from the selected countries and found some very interesting ones, for instance from Sri Lanka or Pakistan. Shout-out for Bella for this! Later, we had to cut the songs so the final audio files contain only the most characteristic and interesting parts. Finally, we had to decide on the final form of the project in order to make it aesthetically pleasing, yet cohesive. In the core of our project was this sliding movement and music and we were searching for a way to link those two elements with some object in the real world. An old, vintage radio was a natural choice. Firstly, it was parallel to our core elements and second, it was meant to give users feeling they can hear the music from the whole world. It was even more powerful by the fact it was Christmas music and now we have the Christmas time. We went over dozens of photos of old radios and decided to primarily use warm colors, such as brown, gold and of course some Christmas ones, for instance, red. On the top of that, we also recorded a video that would be displayed before users could play with the map. The video is meant to look like a Skype call and imitates a conversation between two individuals living in two different locations but who miss each other because it is the Christmas song. The video was our way to make users understand the core values behind the project more and simultaneously become more immersed. We hoped those elements would make the user experience even better.
My primary responsibility in this project was coding the map page (Java, CSS, HTML). Since I had no to minimal experience with coding in Java, it was the most challenging aspect for me. Firstly, I had to figure out how to make an object follow the mouse and learn that I had to use p5 libraries in order to use “draw” function. Then, however, I wanted to limit the space where an image could be drawn. Hence, in “setup” function I used “createCanvsas” and ended up with the result presented in the video below.
At that point, the “drawn” image was the red ball. In order to make it out slider in “draw” function, I used “image” line where I specified the fill (a red photo, previously introduced as a variable and loaded in the “preload” function), the height and width. Also, since we needed the movement on the x-axis only, in the “image” line I also specified it should follow “mouseX”. Then it was the time to load the map as the background of the canvas and a for that I specified it in the “setup” function by introducing “current map” variable and in the “draw” function where I specified in “background” line that it needs to use “current map”. At this stage I had the following:
Finally, I started experimenting with what should happen in particular ranges on the x-axis. Firstly, I tried to change one background to another by using “if” function and “document.getElementById”. The problem, however, as I could not find a way to assign nor a class or id to the canvas drawn in java and not introduced in the HTML file. The solution to that was creating an array of all the available maps in “setup” function. Hence, if the mouse was in a particular range on the x-axis then “current maps” was changing to “map[e.g.18]” and since “current maps” was the previously introduced variable as “background” in the “draw” function it worked perfectly. The next step in the java code was making the sound work. Firstly, all the songs were introduced as variables and later loaded (“loadSound”) in “preload” function. Then, I had to specify that if song “isPlaying” then it should not be played again. It is because the songs were playing anytime I moved a mouse in the specified region and an unpleasant echo was the result of it. If the song was not playing and users move their mouse into the region then the song was being played in the “loop”. The last step was to determine the ranges for each country/time zone specifically and it was determined with the help of the function “text” which let me read the pixel position of mouseX.
In terms of styling, the biggest trouble was positioning the image of radio controls below the canvas and the solution to this was calling the canvas div as the “parent” in the “setup” function and later introducing that div in the HTML file above the radio image. Another trouble was making the page’s background fill the whole page and be reactive to the changes of the window size. For that, in CSS I applied “-webkit-background-size: cover”,”-moz-background-size: cover”, “-o-background-size: cover” and “background-size: cover;”.
It was a challenging project and it involved many sleepless nights and much more trails and errors that it might appear from the above description. In the end, however, I think it helped me develop my art understanding and coding abilities significantly.
Big thanks to the professor and all the IMA Fellows for the semester and their help!