A web art installation inspired by Xu Zhimo poetry

https://raining-poetry.glitch.me/

Functions

• Letters Array: I define a string containing a Chinese poem. This text is used to randomly select characters, creating the raining effect.
• Font Size and Columns: I set the font size for the letters and calculate the number of columns across the canvas. This calculation is based on the canvas width and font size, allowing even distribution of the raining letters.
• Drops Array: This array tracks the Y position of each letter (or "drop") in each column. At first, all values are set to 1, indicating the top starting point for each column's letters.
• Mouse Position for Transparency: This function captures the mouse's Y position to dynamically adjust the letters' transparency, making the effect interactive.
• Graphics: I attach two silhouette figures to represent Xu Zhimo and the women he med in the poem to recreate the scene described in the story.

Inspiration

The art installation "Gravity Theater" by Xu Bin, also known as "Gravitational Arena," is a significant exhibition at the Museum of Art Pudong in Shanghai. This expansive work, displayed from August 12, 2022, to June 1, 2024, is notable for its use of 1,600 metal Square Word Calligraphy characters, creating a visual depth of over 50 meters. The installation was specifically designed for the spatial dynamics of Exhibition Hall X at the Museum, showcasing Xu Bin's innovative approach to blending textual elements with physical space to create a visually immersive experience.

"Gravitational Arena" is a mixed media installation measuring 25.5 x 15.7 x 15.7 meters, which presents a "textual vortex" of characters. This vortex stretches from the third and fourth floors of the museum to the base level, engaging with a giant mirror on the floor to create a complex interplay of reflection and perception. This setup invites viewers to explore the work from various perspectives, challenging their perceptions of text and space. The installation acts as a physical embodiment of optical illusion, where the spatial extension of the text contrasts with traditional flat-surface reading and writing, pushing the boundaries of viewer perspective and understanding.

Future Plans

• Music and Sound Effects: I plan to add different sound effects for the rain which could change base on user interactions. For example, the sound could change from a heavy rain to a light rain depending on the mouse move, or start playing the sound of raining on an umbrella when clicking on the figures.
• Graphics: I also plan to add more pieces of scenery into the website, like background, architecture, trees, birds etc.
• More interactions: I’m not very sure what other kinds of interaction I could add to this installation yet, but I think it needs more interaction to make it more interesting for the viewers. I’ll think about it later.