9.R Interactive Portraiture
The Picture of Dorian Gray
Concept & Inspiration
This sketch is inspired by Oscar Wilde’s novel The Picture of Dorian Gray. In the story, the artist Basil Hallward painted an extraordinarily beautiful portrait of Dorian Gray, a charming young man. Dorian was so afraid of losing his beauty as time passes that he made a wish before the portrait to stay forever young and let the portrait grow old. His wish, stunningly, came true. The portrait not only bore the traces of years, but also Dorian’s increasing sins and corruptions of soul, while Dorian himself remained unstained by sins and time. But the gradual degeneration of the portrait constantly hunted Dorian, leading to his suicide at the end. My sketch tried to showcase this dramatic setting and story, using Object-Oriented Programming and pixel manipulation techniques learned in class.
Demo
Coding
Fabrication
My original idea is to make the handsome portrait scatter and reveal the ugly version of Dorian beneath. To make the fragments look organic, I randomized the positions of vertexes but constrained them on the edges of the square (with a designated resolution). I tested the randomized fragments before creating the class and objects:
After constructing the class Fragment and passing the pixel values (average of r, g, and b) to the fragments, I translated the fragments to make them cover the portrait. I’m not sure why the fragments outside the portrait became filled and still squares (I forgot to screenshot the codes at that time).
The fragments were flashing crazily as they were being randomized every frame. Also, the resolution was too large (20) to delineate Dorian’s feature. Also, I found that using only the average values of the pixel didn’t work well both aesthetically and ideally (because my original aim was to shatter the painting and the fragments should stay colored in order to achieve that effect):
So I passed r, g, b values of each pixel into the fragment and decreased the resolution value to 10:
I also changed the image to a still of the story’s movie version because the pixel values could be extracted more easily:
I also found an old Dorian Gray’s still that had a very similar camera angle with the upper image:
I cropped the images and adjusted their sizes so that the two images were of the same width and height. I planned to put the old Dorian Gray beneath the young one and reveal it after the portrait is scattered.
I also found that the flashy effect was resulted from my putting the codes that extracted pixel values and generated the fragments in the draw function so that I regenerated the fragments every frame. I moved these codes to the setup function. When I ran the code again, the fragments became still when I pressed the trigger key.
But I constantly got an error message saying that “Cannot read property ‘update’ of undefined” when I displayed the fragments.
The message appears before I trigger the movements of the objects, so it might be the problem of the execution of for loop exceeded the length of the array. I checked that the length of the array was matched with the execution time of for loop in the draw function. And I was stuck here for a long time. After consulting professor Moon, I found that the problem occurred because I used a variable m as the array index, which increased each time the code was looped. After the first frame, the value of m was already increased to the last index value of the fragment array, causing it out of bounds at the second frame.
I then refresh the m value to 0 every frame by putting the code “let m = 0;” in the draw function and solved the problem.
Below is a funny effect resulted from my forgetting to draw the background in the draw function:
The fragments were moving now:
I tried to figure out a way to make the original image disappear so that the old Dorian Gray can be revealed. I made the fourth value of each pixel, the alpha value, 0 by letting img.pixels[index + 3] = 0. But the image didn’t disappear. Instead, some grey dots appeared in a regular form:
I found that the regular configuration resulted from the increment of i and j:
Since I set the “res” to 10, I skipped a lot of pixels when executing the pixel manipulation. I used two new for loops with an increment of 1, and the problem was solved.
In addition, I made corrected the flying directions:
Here are several experiments:
After getting the ideal effect, I imported the old Dorian Gray’s image (it seemed that the flying movements couldn’t be triggered by key interactions because the fragments just disappeared when I pressed the key. I later used mouseIsPressed instead):
I manipulated the pixel values of the old Dorian Gray to make it looked bloody and gloomy:
Lastly, I created a rectangle as a portrait frame and put on some instructions and lines in the novel.
Reflection
In this recitation, I practiced pixel manipulation using the index formula and the nested loops. By effectively incorporating the extracted pixel values into the class and object constructions, I gained a deeper understanding of pixel iteration and the structure of pixel array. I also became more familiar with the way a nested loop work by making mistakes in setting increments and variables. However, the fragments should be more organic as now they are still like some magnified pixels. Also, instead of using another image (old Dorian Gray image), I wanted to try manipulating the young Dorian Gray to make it look old and bloody in the future.
Attributes
1. Abandoned Dorian Gray image
4. Wilde, Oscar. The Picture of Dorain Gray. Dover Publications, 1993.