Project: Internet Art Project
Partner: Yu Sang
Date: December 17th, 2018
Documented by: Bosen Yang (Burson)
👇👇👇hit Github for complete codes👇👇👇
👆👆👆hit Github for complete codes👆👆👆
This documentation will be divided into 3 parts, corresponding to three chronological stages of the creation. In each stage we prepared different components of this project. The documentation will end with an epilogue about our considerations for possible improvements.
- Stage I – The Idea and Inspirations
The invention of web has changed people’s lifestyle in nearly all aspects, including how people appreciate art. Of course there are many possibilities of how web can change the process of art appreciation. We want to exploring one possibility by this project.
We’re firstly inspired by a class example called the Color of Motion, where the creator calculated the average color of each frame in a film and place the colors in a stack order so that we can see the color dynamics of a film. We believe there’s a profound psychological link between the color and human emotions. Users may be unconsciously stimulated into different emotional states while seeing different colors.
Back to art appreciation, while creating classical paintings, normally the painter is very careful with the selection of color, which means the use of color has a strong emotion-wise or vibe-wise influence on the whole viewing experience. Additionally, we think paintings that share the same subject or theme, may have similar methodology in use of color. Therefore, we extract colors from paintings sharing the same subject or theme, and apply them to each individual painting for an augmented color effect to show the influence of a certain color. We do this by putting a filter of a selected color onto the video.
Apart from the color effect, we believe we can improve the whole experience by adding audible elements, which I’ll give more detail in the following section. We hope this mixed experience of both visual and audio elements can let audience appreciate art in a way they never experienced before.
- Stage II – Material Collection
As for material collection, we decide the body of our project is the painting. At first we chose static paintings, because our intention was to improve the traditional art appreciation experience and we intuitively looked for things similar to art exhibit in a museum (static painting) to improve with web elements. While searching for our materials, we found a creation of animated painting. We thought it’s a better choice, because animation makes the subjects in the paintings more lively and they’re more evocative of human emotions. Also, we think this decision also reflect one feature of Internet, the speed and convenience of information spreading. Our decision to some degree complies to the Internet spirit (of course it’s based on the fact that we credited the creator while using his work).
Our project is based on the use of color in classical paintings. The body of each work is a video of animated classical paintings. Each video contains several paintings, sharing the same theme or subject. We extracted the most frequently used colors each painting with Photoshop by taking the subject or major object out of the painting and then calculating the average.
Apart from color effect, another dimension of our project is audible effect. Our first intention was to add a background music and we did it. We later figured out that we can also assign a musical note to each color calculated. While adding color effect, the corresponding musical note will also be played. We chose the notes from the same musical scale so that the notes can fit into the background music. We collected more musical notes than needed and picked the most proper ones out of them to guarantee the best resonance.
Of course there are cases when the user wants only the sound effect but not the color effect, or the other way around. We also made features for that (the buttons on the side).
- Stage III – Web development
We used a dive with certain opacity and the background color of the selected average color to create the filter effect. For layout of the webpage where we present out work, we wanna highlight the painting so we chose a dark layout. For the information page, the background colors are all the average colors calculated because they look very harmonious together with the paintings where we derive them from.
There is one small problem with web coding, the sound balance. We have to kinds of music, the background music and the discrete musical note. The note sounds much louder than BGM in my earbuds while much weaker then BGM if we play it with the laptop speaker. So I made two web pages for each work with different volumes for both music types.
- Epilogue – Reflections and Potential Improvements
Based on the feedbacks, people think it’s a great idea to create a project that features manipulation of color and sound. Actually, we’ve never seen a project like this before from the class examples or extracurricular sources (but I’m sure there is). The completion of this project is based on many discussions and brainstormings. Thea and I wants to conclude it as a successful attempt and the website is a good enough prototype. Besides, we very well exploit the web as a new medium to create this new art appreciation experience (for example, one of our source materials, the animated painting, is typical creation on the medium of web).
Also, thanks to the feedbacks, we see more possible improvements to this project.
The first one is that concept of applying frequently used color as filters so as to achieve a deconstructive (or reconstructive) experience of paintings might be hard for users to understand. It really makes sense because we define our project as not only something to relax or have fun with but an art exploration for users to explore the psychological connection between art and their mind. So it’s of vital importance for the users to know our intention and feel their psychological level change while interacting with this project. So we would clarify our intention at the very beginning of the project if we’ll do it again.
The second improvement is the color effect. We create the color effect by adding a div on top of the video and adjusting the background color. However, this method causes the video to be more unclear, as some small details will be masked. Some people suggested we create different videos and change video sources when we need a different color effect. Actually we’ve tried this as our first attempt to create the color effect. In this implementation, when we change the source of the video, there will be a flash effect. When the user press the keys at a high frequency, the flashes will ruin the whole experience. Our second attempt was to use web coding to change the color effect, like changing the hue-rotation parameter in CSS. This wasn’t a successful try either, because the change of color wasn’t obvious enough foe the user to notice. So at last we used div. Maybe in the future we can study more about color theory and trying changing several image parameters (more than hue rotation) to create a natural and fluent effect.
The third improvement can be the sound effect. We select the music notes based on our intuition as we’re confident of our background, but it seems our selection is still subjective and limited, because another student with musical background suggested we should refer more to musical theory and select notes of the same musical scale (their frequencies have some shared features).
Also, web design is something we can work on, too. An important suggestion is that the buttons can be made more intuitive by replacing the letters on the button with icons (like the letter “i” in a circle to represent information page). Additionally, some people thought the background color is kind of rigid. We don’t want to change the background color as we apply different filters, so we might use lighter colors instead.
Overall, we’re really satisfied with this project and appreciate all the feedbacks. I had a great time with comm lab!
******** hit Github for complete codes ********