Author: Sam Shi

Title: “Pause, take a moment.”

Link: https://samantas.github.io/net_art_project/

Description:

“Pause, take a moment.” is a website that randomly generates shapes and colors on top of a SVG variation of M.C. Escher’s Concentric Rinds. The background music is a piano cover by Vincent Corver of my song “Lies”. This piece encourages the user to explore shapes, movement, and color – to pause, slow down, and appreciate things for how they appear without moving too fast. The central theme is that if you move too fast, you won’t have time to appreciate. If the user scrolls too fast and reaches the bottom of the page, the experience stops and their only choice is to restart. The goal is for the user to interact with the piece in such a way that they feel mesmerized and relaxed, perhaps even encouraging self reflection. 

Process:

For this project, I was clear on the theme I wanted to address, but I struggled quite a bit with the execution of it. I spent a lot of time trying to figure out the best way to use simple shapes and movement to represent moments in life and progress. I tried a lot of variations of how the shapes were instantiated on the page, where they appeared, how fast they should appear, number of shapes, and so on.

At first, I didn’t use any color and the experience felt quite lifeless and boring, so then I decided to implement a random color generator. The random color generator along with the random shapes generator created quite a mesmerizing experience. After coding for several hours, and as I was QA-ing the experience, I found myself sitting on my couch staring at the random shapes and colors, getting lost into the music and into thought. I wondered: what is really the point of all of this? But then I also thought: wow, I just sat here for 10 minutes watching random shapes and didn’t even realize it.

As for the code, I decided to use this project as an opportunity to practice OOP. I used github to track all of my changed, so if you look in my commit history, you will see a lot of frustration in the comments (lol). My project is just short of 400 lines of JavaScript, which for such a simple experience, sounds like a lot, but I really enjoyed creating this piece. (Even though, at times, I would yell I HATE JAVASCRIPT ¯\_(ツ)_/¯).

Throughout my process, I tried to be diligent about organizing my code. Below are some examples of how I structured my code.

I utilized classes to define the basic parameters for the shapes.

Then, I instantiated these shapes using my triggerShapes(); function, which I call in the toggleMusic(); function, so that the movement and the music is connected. toggleMusic(); then gets called in the init(); function, which gets called upon document.ready. 

I also created separate functions for features such as the circle that ripples based on mouse click, generating a random color (found online!), and animating the shapes on click. The function animateShapesOnClick simply toggles a class in the CSS which utilizes a keyframe animation to transform the scale property. 

As I shared my project with friends, I realized that it would be helpful to make a mobile friendly version of the piece, so that people can access it on the go. So I implemented a media query to make it responsive. I changed the introduction to make more sense for mobile, for example instead of “press enter to start” you tap a start button. I also removed the background image (Concentric Rinds variation) on mobile as the dimensions were not mobile friendly. 

Challenges:

One thing that I struggled a lot with was utilizing scroll to instantiate shapes at a reasonable pace. Triggering shapes based on user scroll proved to be very difficult because, if the user scrolls too fast, then too many shapes would instantiate and the browser would slow down and stop functioning. I tried to incorporate a scroll speed listener as well as a setTimeout function, but none of these solutions worked well enough for me. This is why I ultimately decided on triggering shapes only based on a setTimeout function and not upon scroll. However, since the page auto scrolls, it appears as if the shapes occur upon scroll. So I ended up hacking together a solution. 

I also struggled a bit with the audio, learning that Chrome does not allow audio autoplay. I found a solution online that helps catch an error with audio playing:

Post mortem:

I believe my project was successful in accomplishing the goals I set for myself. I was able to create an internet art piece that utilizes JavaScript to provide an experience and convey a message. If I had more time, I would have added more features, such as changing the saturation of the color based on scroll position. I also would have made a mobile friendly version of the M.C. Escher background image.  However, I wouldn’t have added too much, as I enjoy the simplicity of the project.  

In many ways, machines today are becoming more and more human. They perform intense computations, learn from their mistakes, and respond to stimuli. However, they lack finality. My piece aims to explore, bridge, and ultimately delineate what it means to be human by contrasting themes of growth, response, and death through a coded medium.

Visually and thematically, the piece echos MC Escher’s 1953 lithograph Concentric Rinds, a series of well ordered, concentric, and circumscribed spheres grounded on an inky void with light emanating from the center. Escher was a classically trained mathematician, and technically, his etchings have a machine-like perfection to them. Intellectually though, his pieces rebel against perfection through illusions and contortions of perspective. While machines excel at performing repetitive and well organized tasks, they lack the creativity to expand artistically – or non-functionally – beyond rote tasks. Escher is still relevant in a world of perfected digital art for technical prowess and the creative genius to harness and manipulate mathematical perspective.

For my piece, I want to explore the finality and uniqueness of human life. Machines differ from us in that they can reproduce without losing knowledge. My piece aims to echo MC Escher’s genius by contrasting the technical successes of coded routines with the finality and unique spark of human life. Concentric Rinds is a whole and encompassed shape, a bright and lonely vessel in a stygian darkness. In its concentric shapes and centralized composition, my piece draws heavy visual inspiration from Concentric Rinds. It seeks to reproduce the loneliness and uniqueness of human life in emptiness. By expressing this through code, I hope to both reference MC Escher’s technical perfectionism while contrasting the distributed nature of code with the uniqueness of human life.

A fundamental condition of humanity is individual growth and reflection before ultimately succumbing to death. My piece is further inspired by Claude Monet’s early 20th century Water Lilies series, a collection of over 250 paintings that encompass the growth of a productive career while arrestingly documenting the setbacks of physical fragility. Monet was an early pioneer of the groundbreaking impressionistic style that revolutionized modern painting from austere classical perfection to loose interpretations and inferences. Tragically, by the end of his life he was beset by cataracts that rendered him nearly blind. The Water Lilies series is the final capstone on his impressionistic style. While smudged lines, blurred shapes, and blended colors hint at his subject and harken to his pioneering painting technique, the blurriness of the paintings also reveal his personal struggle with encroaching blindness.

My piece references Monet’s career as a groundbreaking painter and his struggle with physical fragility with themes of growth, encompassment, and reaction. It’s a common UI assumption that paging or scrolling will carry an audience through a medium. Building on that assumption, I will combine a growing visual ripple with a soundtrack to signify the  growth and appreciation of life. As the user scrolls, concentric shapes emanate from the center, like rings on a tree, signifying growth. At the same time, an accompanying soundtrack plays paced to the rate of scroll, encouraging the audience to explore at a reasonable pace – like life, the piece cannot be enjoyed too quickly. To represent the indelible marks that setbacks and events can leave, as the user clicks on the piece – literally triggering events on a symbol of growth – further ripples and shapes will appear like water lilies rippling on the surface of a pond. Once the user approaches the end of the experience, all of the content but a black background will disappear to represent the finality of death.

I will use JS to accomplish the scrolling effect: animate the shapes, manipulate the speed of the music, and create the ripple effects. I will use CSS to style the web page and might use CSS keyframes to enhance the animations. For the background music, I will use a piano cover by Vincent Corver of one of my original songs.

Internet art is fascinating, as the browser is an incredibly powerful medium to deliver your message to a large medium — basically anyone in the world who has a device and an internet connection, which is more than half of the world’s population at approximately 3.2 billion people(!).

I have never really been one to appreciate internet art to be honest, but reading about its history has highlighted its prevalence in movements and making statements. For example, “The VNS Matrix (read “Venus”) were important forerunners for net.artists exploring feminist issues” (Greene 165). The internet as a medium can be used to push boundaries, provoke thought, and express emotions like frustration or happiness, similar to other mediums, but the biggest differentiator is its interactivity. The medium depends on a user’s input to truly come to life, and this is exciting.

I was pleased to see that my colleague Mark Napier was featured on the last page of this reading. “His Digital Landfill (www.potatoland.org/landfill) and Shredder (www.potatoland.org/shredder) tear the components of any Web page away from their code and either reconfigure them into a new design (Shredder) or add them to a dump pile of components from other pages (Landfill)” (190). As Greene mentions, “these works are dynamic and fun”, but to me they also comment on the fragility and manipulability of code as well as the possible interaction between distinct websites themselves. How might we take what’s already out there and consume it differently?

Project title:

“When we all fall asleep, where do we go?” A Billie Eilish Inspired Documentary

Project description:

Our project is a short, interactive documentary film that investigates the question of “Where do you go when you fall asleep?” by probing the brains of different people on campus. The goal of this project was to uncover how people interpret this question and to discover the differences between peoples’ responses. The documentary cuts between shots where different people talk about where they physically go when they sleep and where they go in their dreams. 

Process:

For this project, we divided up the work according to our strengths, but we all started by walking around campus and gathering initial footage. I put together the rough cut of the initial footage, which we shared in class. Then, Abdullah and I worked on creating the website and Kyra worked on getting more, improved footage. Kyra put together the rough cut v2 and then I worked with her rough cut to add the image and text effects as well as creating the “dream” variation of the cut. Abdullah helped by gathering image assets and wrote the code for the toggle between normal and dream view on the site.

For the dream cut, I explored a few different video effects, such as turbulent displace, lens distortion, blur, and glow. I finally settled on the blur and glow because I found the displacement and distortion to be a bit too jarring.

I also added some audio effects, including a scientific filter and reverb.  Personally, I felt like this was an accurate representation of me trying to remember my dreams: can’t really remember anything I see or hear, it’s kind of just a blur…

Issues:

Technical issues

I had some issues with importing the large file into Premier Pro. When Kyra exported her file it was 5GB+. This ended up freezing my computer several times. Once she exported a smaller file, I was able to import it into Premier with no problems and proceeded with the editing. However, as I got around to adding video and audio effects in order to create the dream effect, I ran into some more issues. Some effects really slowed down my computer, requiring too much processing power. When it came to exporting the dream cut, it took 40 minutes! Hence, why our submission was a bit late, as I did not expect that. (The normal cut only took max. 5 mins to export.)

Concept issues

While I genuinely enjoyed investigating the question “Where do you go when you fall asleep?”, I personally struggled with ideating around the concept of an interactive video. In my opinion, video is more immersive and enjoyable when it’s not interactive, so this was definitely a huge barrier to entry into ideation for this project.   Ideally, if we had planned our time better (I must admit my time has been consumed by capstone), then we would have recorded some scenes where we (or someone else) would have attempted to act out what the interviewee was describing. I think this would have been more interesting to toggle between.  Another idea I had was creating like an archive of stories that the user could watch in any order, but we decided to not pursue this idea because we didn’t have any immediate solutions to the problem of “but how do we encourage the user to explore?”.  To be honest in my reflection, I found this project prompt to be uninspiring mostly because I prefer to consume videos and films passively, as opposed to interactively. 

Post mortem:

I don’t think we met all the goals we set for ourselves, although we did successfully gather footage about people’s opinion on Billie Eilish’s question “When we all fall asleep, where do we go?”. It was fun to engage in such a strange question with different people.  As for our other goals, we should have spent some more time editing the final cut to make it look more professional, especially since our interactivity is pretty basic. Overall, I wish we would have felt more inspired to take this concept further.

This project taught me that using Premier Pro will always take longer than expected, not necessarily because you don’t know how to do something (which of course I found myself googling “how to…”), but because it takes time to process and export(!). In hindsight, we should have started editing sooner, which would have given us more time to adjust and polish.  This project also revealed to me that interactive video is challenging and has, what I believe, a high barrier to entry. Not everyone is going to like or appreciate it, as the typical behavior of consuming film is passive.