Shadow Dance:
An Interactive Installation Using Shadows as Imaging Device

Video + Spatial Installation
2023
Python

Shortlisted for Best Demo in International Conference on Computational Photography (ICCP), 2023
Judge’s Choice Best Course Project in Computational Phogoraphy, 2023

Cast shadows and projectional imaging systems are commonly used in computational photography and artworks, but shadows are commonly perceived as the antithesis of images. My project, "Shadow Dance", creates an art installation that highlights the dual nature of projectors as a source of illumination and an imaging system, and the fact that they simultaneously create images and shadows. Building on Rafael Lozano-Hemmer’s “People on People”, the installation reveals images inside the cast shadows of the viewers as they interact with the projected imagery. The physical installation involves three projectors oriented at different angles. The videos fed to the projectors are preprocessed with planar homography and image decomposition, so the projections align with each other and must be linearly combined to reveal the legible frames. The viewers are encouraged to spontaneously interact with the installation, and reflect on the duality of images and shadows through the discovery inside their cast shadows. This project demonstrates the potential of applying computational photography in art and generating artistic effects that challenge visual conventions and reveal scientific facts beyond general optics.


GitHub
Paper

Spectacle of Remnants: Redefine Urban Leftover Spaces

Virtual Exhibition UI/UX Design
2021
HTML, CSS, JavaScript

In close collaboration with the curators, this website was designed to host over 30 entries from an open call organized by ChinaGSD. Reflecting on the remnant urban spaces, the exhibition is in five chapters with different subjects and artists’ intervention: “room/documentation”, “building/reminiscence”, “landscape/renovation”, “community/design”, and “city/research”. Looking for a post-pandemic language of virtual exhibition design, the visuals and user interaction design seeks to nod to the curation while providing an additional layer of context specific to the web platform. 


Exhibition Portal

Computer Graphics Final Project
Collaborator: Milan Eldridge
2020
JavaScript, ThreeJS

8-Track Payback is a mini game that allows the player to visualize and interact with music they are hearing. Upon entering the game, the player can select the music to be played from a list. The player then controls an avatar through a tunnel-like scene, trying to dodge the 3D obstacles coming from all directions that are generated from the music being played. Getting hit by an obstacle costs the player’s lives. The player loses the game when all lives are lost, and wins when they survive a complete piece of music.

Yunzi implemented the camListener, the analysis of audio, the obstacles that respond to frequency, the music selection menu, the life counts, and collaborated with Milan on building the scene.


Online Demo
GitHub Repository
Project Report 

Raytracer and rasterizer: Implementing the core components of a photorealistic raytracing engine in GLSL and a rasterizer in Javascript,  including the raytracing and rasterizing pipelines, light effects including  soft shadow and transmission, Phong and Perlin noise materials, and texture mapping.

GitHub:   raytracer   rasterizer

Cloth Simulation and Mesh Editor: Animating a cloth as a mesh of particles and restraints and using Verlet integration to to simulate gravity and collision with simple objects. The 3d mesh editor uses the half-edge data structure to filter, transform, and warp meshes.

GitHub:  cloth simulation   mesh editor

Image Processing: Implementing basic image processing functionalities including blurring and edge-finding filters, dithering, resampling, and warping.

GitHub

2021
DCGAN, Python

This experiment explores the use of AI and neural network in design. Interested in the visual elements of cyber cityscapes present in contemporary media, I used Python to scrape Shutterstock.com and curated an image collection. This collection was then augmented for a dataset of around 12,000 images. Using the collection, I trained a DCGAN and made animations to visualize the latent space of the generated images. This experiment paints an image of the hypothetical cyber urbanism in visual motifs and montage, and reflects on the agency of the designer in HCI, data curation, and computational design.



Left: sample dataset; right: sample generated images

These exercises use the Grasshopper script to program ABB robotic arms and resolve bugs in the process. Connected with a hot wire or an LED light, the ABB arms can effective tools for cutting foam molds with ruled surfaces and creating light paintings. 

2017
Processing

The Processing programs respond to keyboard inputs and generate animated typographic results accordingly. Both scripts seeks to redefine the positive shape of the typed character with the negative and implied space, either through the deformed lines or through the flickering scratches. 

OpenProcessing Demo:   curves   dashes