Loading
LOADING

Debug Controls

Cylinder
Face Labels
Spine
Scroll Position
Layout
Animations
Scroll: 0.00 | Y: 0.00
Spine: | Cyl:
Page: 0.0%

WENNY

INTERACTION DESIGNER

CREATIVE TECHNOLOGIST

NEW MEDIA ARTIST

Scroll

MY JOURNEY

education
NYU
NYU Tandon (Graduate)
Integrated Design & Media, M.S.  ·  GPA 3.89
2025 – 2027
work
SK
SK(Shuaiku Network)
Idol / Professional Performer
2024 – 2025
work
NetEase
NetEase Game (Intern)
UI Designer
2024 – 2025
education
CUZ
CUZ (Undergraduate)
Digital Media Technology
2020 – 2024

AWARDS & HIGHLIGHTS

2021
National Second Prize
China University Computer Design Competition (4C)
Issued by the Ministry of Education Higher Education Computer Science Teaching Steering Committee

CONTACT

Every great project starts with a conversation. As a media artist exploring interactive storytelling at NYU, I’d love to hear your ideas and see how we can bring them to life.

Wenny

HeartfeltCanvas

HeartfeltCanvas
Introduction

'HeartfeltCanvas' aims to enhance the psychotherapy process based on EMG&GSR techniques which are used to detect the children's emotions when they are taking art therapy. This work will help therapists see children's emotional changes more intuitively and make the most timely adjustments.

Video Link
https://youtu.be/DtVwOczw5P0
Inspiration

Since my mom owns a kindergarten, I learned that traumatic experiences are very common in childhood, but this phenomenon is often overlooked. Therefore, I would like to utilize digital media to help children with traumatic experiences in conjunction with my current field of study.

Inspiration
Technical research
Biofeedback

Biofeedback technology helps children understand and regulate their body's responses by monitoring and providing feedback on their physiological indicators, such as heart rate and electrical skin activity.

Recognizing Emotions from GSR and EMG

The following two signals were selected for their high reliability.

  • Galvanic skin response (GSR) is an indicator of skin conductivity (SC) and increases linearly with a person's overall arousal level;
  • Electromyography (EMG) measures muscle activity and has been shown to correlate with negative emotions.
Secondary Research
Expression Before
Expression Before
Leg Before
Leg Before
Hand Before
Hand Before
Expression After
Expression After
Leg After
Leg After
Hand After
Hand After
Observation

It is not difficult to observe that during the process of art therapy, children will have changes in their expressions or movements, and even the secretion of sweat will keep changing along with the treatment process. But we are likely to miss these them these emotional signals, reducing the effectiveness of the treatment.

Conclusion & Design Concept

Research indicates that current art therapies can be significantly enhanced by biofeedback technology. This technology offers a precise way to monitor children's physiological indicators like heart rate and skin activity for better emotional regulation.

My Design Focus: Integrating Art Therapy Methods with Biofeedback Tools
This merging visualizes a child's emotional signals via interest tracking, giving therapists real-time, actionable feedback for timely interventions.

Experimental Setup
EMG+GSR Setup

Dual-channel sensing system using EMG (muscle activity) and GSR (skin conductance) to capture subtle physiological shifts via Bluetooth.

User Testing
Setup Detail Setup Detail 2

User testing focused on detecting facial expressions and hand tension to correlate physical reactions with emotional states

Emotion Recognition
Arousal-Valence Model Bayesian Network

Utilized the Arousal-Valence model and Bayesian networks to translate bio-signals into actionable emotional data for therapeutic insights.

Iterative Design
Iterative Design

Utilized the Arousal-Valence model and Bayesian networks to translate bio-signals into actionable emotional data for therapeutic insights.

System Pipeline
System Pipeline

A multi-layer architecture integrating Arduino hardware with a Bayesian Network model to interpret raw physiological data into emotional insights

Game Design
Gameplay Logic

A meditative experience where the environment evolves based on user emotion. We use a Hexagonal Grid System for dynamic world-building and item placement.

Technical Implementation

Implemented in C# / Unity, featuring real-time brain-computer data processing and procedural mesh generation for the healing landscape

Control Scheme
Control Scheme

When using mouse control, the left mouse button controls click and selection, and dragging on the blank canvas can rotate the canvas perspective. The middle mouse button can be used to zoom in and out.

Visual Feedback Loop
Placement Feedback
  • Shows available placement locations when adding a model.
Rotation Feedback
  • The placed model can be rotated left or right.
Weather Feedback
  • The sun represents "excited", the dark clouds represent "sad", the snowflakes represent "fear", and the absence of weather changes represents "relaxed".
The Immersive World
HeartfeltCanvas Video
Onstage

FlexiMotion

FlexiMotion
Introduction

FlexiMotion is a wearable device that combines EMG and IMU sensors to capture muscle activity and motion in real-time, enabling intuitive interaction with games, fitness systems, rehabilitation tools, and machines. Worn on the forearm with adjustable leather straps, it translates physical movements into digital actions, offering seamless control across various applications. Designed for comfort and flexibility, FlexiMotion enhances the user experience by bridging the gap between physical actions and technology, providing a new way to interact with the digital and physical world.

Background

Traditional gaming peripherals lack seamless physical-to-virtual integration, leading to a gap in immersion for complex interactions.

Core Insights

Traditional gaming peripherals lack seamless physical-to-virtual integration, leading to a gap in immersion for complex interactions.

-01
Limited Motion Integration
  • Current Devices Rely On Mechanical Inputs And Fail To Capture Subtle Or Complex Physical Movements.
-02
Lack Of Immersion
  • Interactions Are Often Imprecise, Breaking The Seamless Connection Between The Player And The Game.
-03
Accessibility Challenges
  • Many Peripherals Are Bulky, Expensive, Or Difficult To Use, Making Them Less Approachable For Casual Players.
-04
Limited Adaptability Across Genres
  • Devices Are Often Genre-Specific, Lacking Versatility For Various Game Types.
Tech Foundation
Biofeedback

Utilizing EMG sensors for real-time muscle contraction insights and IMU modules for precision 3D space tracking

EMG sensor

EMG Measures Electrical Activity From Muscle Contractions, Capturing Signals From Contractions To Provide Real-Time Insights Into Physical Movements.

IMU sensor

IMU Is A Device That Measures And Reports An Object's Specific Force, Angular Rate, And Sometimes The Magnetic Field. It Is Commonly Used To Track Motion In 3D Space.

Data Processing & Output
ACTION TYPE
EMG VARIANCE
DOMINANT FREQ
OUTPUT ACTION
VARIANCE: < 2.0
FREQ: ~ 0.0
NO MOVEMENT
VARIANCE: >= 2.0
FREQ: 0.3 ~ 1.0
WALKING ANIM.
Walking
WALKING
VARIANCE: >= 3.0
FREQ: > 1.0
ATTACK ANIM.
Attack
ATTACK
Design Challenge
  • Precise Motion Capture: Develop a device that accurately captures muscle activity and body movements, enabling natural mapping to game controls.
  • Enhanced Immersion: Strengthen the connection between players and virtual environments through intuitive motion-based interactions for a more immersive experience.
  • Versatile Adaptation: Design a device that supports various game genres and player needs, catering to both professional and casual gamers.
Experimental data
Device Connection
EMG and IMU circuit connections

EMG and IMU circuit connections

9V battery

9V battery

EMG

EMG

Electrode sheet

Electrode sheet

Arduino

Arduino

IMU

IMU

The EMG and IMU modules are connected to an Arduino UNO. The EMG uses two 9V batteries and outputs signals to A0, while the IMU connects via I²C. Data is transmitted to a computer through USB.

EMG Mean
EMG Variance
Dominant Frequency
Acceleration Magnitude
Frequency Energy
Motion Pattern Recognition

By Combining Time-Domain And Frequency-Domain Features, The Characteristics Of Different Actions Are Analyzed And Classified:

Static Vs. Movement:

  • Static: Low EMG Mean, Small Variance, And Nearly Constant Acceleration.
  • Movement: Large EMG Fluctuations, High Variance, And Periodic Changes In Acceleration Data.

Fast Vs. Slow Movements:

  • Fast Movements: High Dominant Frequency And More Pronounced Acceleration Peaks.
  • Slow Movements: Smoother Signal Changes And Lower Frequency Distribution.
Product Design
Device Concept
Device concept views
Materials and tools
  • Comfort and Flexibility: Leather offers excellent skin conformity, ensuring a comfortable fit for components like electrodes that need to be in direct contact with the skin. Its flexibility adapts well to the skin's contours, preventing discomfort from prolonged use.
  • EMG and IMU Sensors: This device integrates EMG and IMU sensors to translate the user's muscle activity and movements into real-time interactions with various machines, offering intuitive multi-platform interaction experiences.
Product Sketch
Product sketch
Scenarios
FlexiMotion Demo Video

Mood Hairpin & Ritual

Mood Hairpin hero
Introduction

Grounded in insider experience, this project investigates the emotional labor and identity challenges of Douyin girl group streamers under algorithmic pressure. It proposes design interventions to help performers build emotional resilience and maintain healthy boundaries between their digital personas and authentic selves.

Video Link

https://youtu.be/DtVwOczw5P0

Inspiration
Inspiration SK concert
Inspiration performance

Before joining NYU, I was a member of a Douyin girl group. This experience placed me at the heart of algorithmic pressure and spotlights, where I lived the intensity of "emotional labor" firsthand. Now, as a researcher and designer, I am revisiting that world to use technology to help individuals reclaim their authentic boundaries within the data-driven industry.

Video link:
https://www.instagram.com/p/DVcjnSkjKgY/

Background
Problem Statement: A Fragile Balance

Focusing on young women (ages 18–25) from vulnerable backgrounds, this research highlights how the live-streaming environment blurs the line between performance and intimacy, leading to systemic emotional exhaustion and the erosion of personal values.

Four Key Insights

Forced Positivity

Constant performative sweetness leaves no room for authentic emotion.

Competitive Isolation

The “group” structure masks internal rivalry and social isolation.

The Burnout Loop

Long hours and rigorous maintenance create a relentless cycle of physical and mental burnout.

Identity Erosion

Self-worth is entirely tethered to visibility and parasocial validation.

Core Insight: A Soft-Violence System

This is a soft-violence labor system where attention is survival and emotion is currency.

Initial Research & Mess Map
Initial Research Mess Map

These emotional outcomes are not personal weaknesses but structural consequences of algorithmic labor, parasocial emotional extraction, and competitive performance environments.

Stakeholder Map
Stakeholder Map
  • Core: Streamers, teammates, and their internal selves—the direct subjects of identity negotiation and emotional labor.
  • Operational: Management, coaches, mods, and fans—the actors who shape daily routines and dictate emotional expectations.
  • System: Algorithms, beauty norms, and parasocial culture—the overarching forces that define the rules and pressures of the environment.
  • Overall: This ecosystem demonstrates the intersection of algorithmic control, social expectations, and emotional performance, dictating both visible labor and invisible emotional lives.
Research Methods
Interview

To deepen this inquiry, I conducted interviews with three former colleagues who worked with me as female group streamers on Douyin. Their lived experiences provided firsthand insight into the emotional pressures, identity negotiation, and resilience strategies within this labor environment.

JJ portrait
JJ interview dialog
CC interview dialog
CC portrait
PT portrait
PT interview dialog
Livestream Observation

Instead of recording individual instances, I synthesized hours of livestream footage into a Behavior-Trigger Matrix. By mapping external algorithmic metrics against internal physiological responses, I identified a recurring cycle of "Compensatory Performance"—where streamers physically over-exert to counteract dropping data, leading to the "residual exhaustion" observed in my diary studies.

Diary Study Theme Analysis
Diary Study
Themes from Diary Studies
  • Daily Feelings: "After the stream, I felt like shutting down a machine. I just wanted to go home and lie down."
  • Performed Self Moments: Switch to interactive mode instantly when top fans appear; intense pressure to dance/smile during streaks.
  • Recovery Rituals: Synthesized list: hot showers, social retreat, smoking/drinking, simple repetitive tasks (like LEGO), pets.
Insights Summary
  1. Performance Self vs Real Self: Streamers constantly perform a persona to survive.
  2. Algorithm-Driven Emotions: Viewer drops instantly trigger stress, over-performance, panic.
  3. Emotional Labor > Physical Labor: Overseeing fan interactions, atmosphere, and comment moderation is more taxing than the performance; ultimately, the job is emotional management.
  4. Identity Tension: Cute / cool / pure personas conflict with who they really are.
  5. Fragile Recovery: Hot showers, pets, drinking—none solve long-term strain.
  6. Social Instability: Team conflicts, fan pressure, comparisons amplify anxiety.
  7. System Punishes Rest: Break = viewer drop = more pressure.
Public Perception Scan
Public Perception Survey

I distributed a short survey by sharing a Tencent Questionnaire link through my WeChat Moments, inviting people in my social circle to participate.

Findings from 20 respondents reveal a stark consensus:

  • 100% Unhealthy: Not a single participant considers the industry healthy.
  • 100% Non-recommendation: Every respondent would advise against this career.
  • Public Labels: "Factory-like performance," "excessive emotional labor," and "consuming youth."
  • Support Needs: A critical demand for counseling, stress-relief tools, and regulated rest.
Design Opportunities

I identified seven opportunity areas for intervention: Boundary Prompts, De-role Rituals, Emotional Trackers, Peer Support, Fan Education, Identity Anchors, and Conceptual Installations.

To provide the most effective intervention, I selected Route A: a synthesis of De-role Rituals, Boundary Prompts, and Emotional Tracking. This direction focuses on creating a physical "safe space" through hardware to facilitate the transition from digital persona back to authentic self.

Ideation Prototype

The prototype uses technology as both a "boundary" and a "mirror" to concretize emotions and rebuild identity limits. The Loop: A holistic emotional-management system combining "The Emotional Aura" (on-air monitoring) and "The Residual Persona" (post-stream recovery) to cover the full cycle of detection, alerting, and healing.

Ideation Prototype Flow Diagram
Phase 1: The Emotional Aura
Prototype material 1 Prototype material 2
Material

The prototype uses technology as both a "boundary" and a "mirror" to concretize emotions and rebuild identity limits. The Loop: A holistic emotional-management system combining "The Emotional Aura" (on-air monitoring) and "The Residual Persona" (post-stream recovery) to cover the full cycle of detection, alerting, and healing.

Prototype material 3 Prototype material 4
Technical Implementation

The technical feasibility is validated via ESP32 and Wokwi simulation:

  • Input: Simulated heart rate changes (Potentiometer).
  • Processing: Real-time IF-THEN logic executed on ESP32 to categorize emotional states.
  • Output: Instant feedback through NeoPixel LED color shifts, signaling boundary thresholds.
Status Levels Table
Status Levels and Emotional Mapping

Using Resting Heart Rate (RHR) as a baseline, the system categorizes states into four levels:

  • L1: Calm (Blue): Baseline recovery.
  • L2: High-Intensity (Pink): Sustainable, healthy effort.
  • L3: Identity Tension (Orange): HR > RHR+25%, accumulation of physiological strain.
  • L4: Overload (Purple): Aerobic threshold reached; severe stress requiring immediate intervention.
Phase 2: After the stream — Releasing the Residual Persona

The post-stream ritual facilitates a psychological "de-role" process, releasing the "residual persona" and restoring the authentic self. Drawing from performance psychology, it translates recovery mechanisms into a structured, four-step interaction.

Phase 2 ritual diagram
TouchDesigner effect 1 TouchDesigner effect 2 TouchDesigner effect 3 TouchDesigner effect 4
Build effects with Touch Designer:
  • Use touchdesigner to create and connect three different visual effects experience.
  • Glitch Art distorted persona separating the persona from the actor, preparing to embrace a new self.
  • Particle dissipation implies completely breaking down and dissolving Persona.
  • Ocean blue light helps restore inner peace and enables actors to quickly calm down.
Story Board
Story Board part 1 Story Board part 2

During the live stream, the bear clip visualizes the performer's emotional intensity through real-time color changes. After the show, a four-step ritual guides her to physically and psychologically shed this performance persona and reclaim her authentic self.

Display video

HallucinoFungi

HallucinoFungi installation
Introduction

This immersive experience simulates the hallucinations caused by poisoning from the See Hand Blue mushroom, known for its toxic and hallucinogenic effects. Using a deep learning network built with Python and Caffe, users upload images that are transformed into dreamlike, surreal visuals through AI-driven image-to-image and image-to-video techniques.

The goal is to provide an interactive, immersive experience that allows users to safely explore altered perceptions of a hallucinogenic state in a controlled environment.

Inspiration
Wild mushrooms market 1 Wild mushrooms market 2

My hometown in China's Yunnan Province, which is located in southwestern China, by the South Bengal high-pressure air flow, it has seven temperature zones climate type, because of its unique ecological environment, known as the “Kingdom of plants and animals”.

Background
Wild mushroom

A small number of edible wild fungi are poisonous. The main symptoms of wild fungus poisoning are nausea and vomiting in the digestive tract, coma in the nervous system, mental abnormalities and other symptoms. In more serious cases, it can lead to organ failure and death.

Lurid bolete
Lurid bolete and chemical structure

Lurid bolete can be poisonous if cooked improperly. Common manifestations include double vision, seeing many little people dancing, and other hallucinations. In severe cases, symptoms such as drowsiness and unconsciousness may occur.

Neuropsychiatric poisoning interview
Yuanliang Yu
Yuanliang Yu hallucination
Nayuan Yang
Nayuan Yang hallucination
Keyao Li
Keyao Li hallucination
Principles of hallucination
Normal mode brain sphere
Normal mode
Psilocybin mode brain sphere
psilocybin mode

Hallucinations may cause perceptual confusion, causing an individual to feel that they are experiencing heightened or altered senses, but are actually due to abnormal activity in the brain.

The psilocybin opens up a new connection in the brain, so the brain is stirred up to establish a new pattern that is different from the usual one.

Illusion of different scenario uses
Illusion of different scenario uses
The specific role of hallucinations in pioneering thinking
Role of hallucinations in pioneering thinking

In scenarios where creative thinking needs to be developed, hallucinations may work in these ways.

Summary:

  • From the background research, we can find that hallucinations have not only triggered curious explorations of toxic bacteria and neurological effects, but also experiments on the application of hallucinations in creative scenarios.
  • In the field of art creation, hallucination is regarded as a tool to stimulate creativity, express emotions and break through the bottleneck of creation. Therefore, art creators are a major group of people in need of hallucinations, and they seek hallucinatory experiences to enhance their creative inspiration, emotional expression, and self-exploration.
Persona
Alex Gray persona
Kacey Musgraves persona
Stephen King persona
Design Insights

Painter:

  • We want to improve artists' focus while creating so they can focus more on coming up with new ideas.
  • We want to break the normal visual correlation and provide artists with a unique visual and perceptual experience, allowing more connections between ideas to stimulate artists' creativity.
Connecting line 1

Music creator:

  • Create an independent space that is isolated from the outside world, allowing users to explore their ideas more focused.
  • Helping users explore unique sounds and expressions to make their music artistically unique.
Connecting line 2

Writer:

  • By imitating the effects of hallucinogens, the user's perception and consciousness are changed, and in this way, the user can explore the depths of the soul and understand themselves and the world.
  • Provide an experimental way to experience immersive art, and create new story perspectives by reorganizing previously accumulated inspiration.
Design Challenge

Can the illusion of artificial intervention be formed through the intervention of digital technology, and be used to expand another way of thinking for art creators from an objective perspective?

Ideation

Create more randomness

  • By looking up existing hallucination simulators and experiencers' descriptions, hallucinogenic mushrooms will create new connections between memories in the hippocampus.
  • Reintegrate images, audios, feelings, etc. in memory to form new connections.

Sensory Deprivation

  • External distractions are weakened during sensory deprivation experiences, making it easier for individuals to focus and explore their thoughts and emotions.
  • Sensory deprivation can increase sensory sensitivity.
  • Sensory deprivation helps reduce anxiety, tension, and stress.

Immersive experience

  • Both virtual reality and immersive experiences can be used to disrupt the rigidity of sensory experience and enhance the sense of embodiment.
  • Immersive experience spaces can effectively isolate external distractions, providing a quieter and more focused environment.
Hallucinations Through AI-Powered Visuals

Image-to-Image Generation

Input Image

Original input image, serves as the base for transformation.

→

Intermediate Layer Activation

Each layer adds details: edges in lower layers, patterns in higher layers.

→

Final Output Image

The final image is dreamlike, with vibrant colors and abstract patterns.

Image-to-Video Generation

Frame-by-Frame Processing

Each frame is processed individually with hallucination effects.

→

Temporal Consistency

Ensures smooth style transitions between frames.

→

Final Video Output

Processed frames are combined into a dynamic hallucination video.

Design Concept

Build an immersive experience space in which artists can simulate the hallucinogenic effects of lurid bolete poisoning through vision and hearing. Users can upload the image they want to generate and then choose the blending level.

Design Concept
Storyboard
Storyboard
UI Design
User flow
UI Design — User flow
UI Design — Phone mockups

The first path allows users to upload images, apply filters, and customize content with music before synthesizing the final output.

Users can explore various filters, preview their effects, and unlock premium filters for advanced visual styles.

The second path is designed for inspiration discovery, allowing users to explore tags, collect ideas, and search for thematic content.

Users can manage their collections, view feedback, and organize their generated content for further refinement or sharing.

Immersive Experience Space Design

Air Tapestry

Air Tapestry installation
Introduction

An artistic experiment in telepresence, Air Tapestry utilizes an ESP32 sensor network and custom algorithms to translate the air quality and climatic rhythms of a remote backyard into a soft, tactile LED matrix. As viewers approach the installation, a blurred livestream gradually resolves into clarity—forging a fragile yet profound emotional connection between a physical site slated for demolition and the observer in the present moment.

Video Link

https://youtu.be/6mq76L-n648

Inspiration
Backyard site inspiration

Context: This site is ephemeral; the backyard is scheduled for demolition and expansion next year.

Concept: The project serves as a digital preservation effort, capturing a "live snapshot" of the site’s micro-infrastructure—its wind paths, thermal gradients, and Wi-Fi coverage zones—before they disappear. Instead of displaying cold charts, the installation renders this data as a soft, flowing digital textile, creating an emotional connection to a remote physical space.

Concept

Air Tapestry is a site-specific telepresence installation that transforms a remote backyard into a living "light painting" in the classroom. By combining IoT sensing with textile diffusion, the project turns invisible environmental data—PM2.5, temperature, and humidity—into a breathing visual experience. Additionally, a proximity-reactive livestream connects the viewer directly to the remote site.

Material
Electronics & Sensors
  • 2× ESP32 Development Boards (ESP-WROOM-32)
  • 1× BestParts PMS5003 Digital Particle Concentration Sensor (w/ Q5 Adaptor)
  • 1× Waveshare BME280 Environmental Sensor (Temperature/Humidity/Pressure)
  • 1× HC-SR04 Ultrasonic Distance Sensor
  • 1× BTF-LIGHTING WS2812B RGB ECO LED Strip (16.4ft, 150 Pixels, IP30)
  • 1× 5V 30A (150W) Regulated Switching Power Supply
Fabrication & Hardware
  • 1× Custom Wooden Frame (approx. 120cm × 60cm)
  • Diffusion Fabric (Cotton Cloth and Canvas layers)
  • DJI Osmo Pocket 3 (for RTMP livestreaming)
  • 5V USB Power Adapter (for Sender Node)
  • Jumper Wires & Breadboards
System Architecture

The system consists of two physical nodes connected via the MQTT protocol (Wan), bridging the domestic space (Backyard) and the exhibition space (School).

Node A: The Backyard (Sender)

Responsible for collecting precise environmental data and transmitting it to the cloud.

  • Microcontroller: ESP32 Development Board.
  • Particulate Sensor: BestParts PMS5003 Digital Particle Concentration Sensor.
    • Function: Captures PM2.5 and PM10 levels to detect air quality and smoke.
  • Atmospheric Sensor: Waveshare BME280 Environmental Sensor.
    • Function: Captures high-precision Temperature, Humidity, and Barometric Pressure via I2C.
  • Data Flow: Sensors → ESP32 → MQTT Broker (Cloud) → Subscriber.
Node B: The School (Receiver & Display)

Responsible for rendering the data into light and managing the interactive livestream.

  • Microcontroller: ESP32 Development Board.
  • Visual Output: BTF-LIGHTING WS2812B RGB ECO LED Strip (150 Pixels).
    • Configuration: 5050SMD Individually Addressable LEDs arranged in a matrix behind the canvas.
  • Power System: 5V 30A (150W) Universal Regulated Switching Power Supply.
    • Function: Provides stable, high-amperage current to drive the 150 LEDs at full brightness without voltage drop.
  • Interaction Sensor: HC-SR04 Ultrasonic Distance Sensor.
    • Function: Detects the presence and distance of the viewer in real-time.
Materiality: The "Light Painting"

Unlike a harsh digital screen, this installation mimics the texture of a traditional painting.

  • Structure: A wooden art frame serves as the chassis.
  • Diffusion Layer: A combination of Cotton Cloth and Canvas.
  • Effect: The LED strip is mounted behind these layers. The fabric fibers diffuse the sharp LED pixels into soft, blending color washes, creating an organic, glowing "light painting" texture.
The Bridge (Cloud Layer)
  • Protocol: MQTT over TCP (Port 1883).
  • Broker: Public Cloud Broker (broker.hivemq.com / emqx). This allows for real-time, low-latency communication across different networks, bypassing the need for a static IP.
Mapping rules
Ambient Layer Mapping

The Ambient Light Layer (LED Matrix): Driven by Remote Backyard Data via MQTT

Interaction Layer Mapping

The Interaction Layer (Live Stream): Driven by Local Proximity Data via Ultrasonic Sensor

Interaction & Software Logic

This project operates on a decentralized architecture where data collection, visualization, and interaction occur across independent systems bridged by cloud protocols and serial communication.

Data Collection & MQTT Transmission (The Sender Node)

The code on the sender ESP32 is designed for stability and efficiency. It polls hardware sensors via UART (for PM2.5) and I2C (for BME280) protocols, packages the data, and uplinks it to the cloud.

  • Sensor Initialization:
    • The PMS5003 is set to passive mode to read data only when requested, ensuring timing stability.
    • The Adafruit_BME280 library auto-detects the sensor address (0×76 or 0×77).
  • Data Packaging (JSON):
    • Instead of using a heavy JSON library for the sender, the code manually constructs a JSON string to minimize memory usage.
    • Format: {"pm25": 10, "temp": 23.5, "hum": 45.2, "pres": 1013.2}.
  • Transmission Protocol:
    • The PubSubClient library connects to the public broker broker.hivemq.com on port 1883.
    • In the loop(), data is published every 3 seconds to the unique topic nyu/backyard/sensor, creating a real-time data stream accessible from anywhere.
Physical connection
Arduino kit in transparent box
Box placed in backyard

Put Arduino kit in a transparent box, then placed the box in backyard.

Generative Light Visualization (The Receiver Node)
HiveMQ dashboard Receiver code 1

The receiver ESP32 acts as the visual engine. It does not simply display raw numbers; it translates environmental data into an organic "Water Ripple" animation using the FastLED library.

  • Data Reception (The Callback):
    • The system subscribes to nyu/backyard/sensor.
    • When a message arrives, the callback() function triggers.
    • ArduinoJson (v7) deserializes the incoming payload, updating global variables (remoteTemp, remoteHum, remotePM25) instantly.
Arduino IDE code LED matrix installation
  • Visual Algorithm (visualizeWaterRipple):
    • Base Texture: A Perlin Noise function (lnoise8) generates a smooth, flowing noise field across the LED matrix.
    • Dynamic Mapping:
      • Temperature → Color: Switches palettes (CloudColors for cold, LavaColors for hot) based on remoteTemp.
      • Humidity → Speed: remoteHum maps to the time divisor of the noise function. Higher humidity results in slower, more viscous movement.
      • PM2.5 → Distortion: remotePM25 affects the scale of the noise and introduces a desaturation filter (color.nscale8), making the light look "hazy" when air quality drops.
Telepresence Pipeline & Proximity Interaction
Step 1: RTMP Injection (Pocket 3 to Twitch):
Backyard RTMP setup
  • The DJI Pocket 3 uses its built-in livestream capability.
  • It pushes a video feed via RTMP directly to a private Twitch channel URL, bypassing the need for a local computer in the backyard.
Step 2: OBS Studio Integration:

On the exhibition PC, OBS Studio captures the Twitch browser window. This acts as a stabilizer and allows for cropping/formatting the feed before it reaches the code.

Step 3: Interactive Blur (p5.js):

p5.js link: https://editor.p5js.org/Wenny/sketches/mUqcHZrk-

p5.js interactive blur sketch
  • Input: A p5.js sketch captures the OBS window as a video source.
  • Sensor Data: The receiver ESP32 measures viewer distance using the HC-SR04 sensor and sends it to the PC via Serial (Serial.println(distance)).
  • The Blur Logic:
    • The p5.js sketch reads the serial port (DIST: 25).
    • It maps the distance value (0cm - 200cm) to a Gaussian Blur filter strength.
  • Outcome: When the viewer is far, the backyard is an abstract blur; as they approach physically, the image resolves into clarity, rewarding the viewer's presence with a clear view of the remote site.
Showcase

Game Design

Hechonghui
Introduction

Hechonghui is a cel-shaded (NPR) 2-player fighting game developed for the Xbox platform. Rooted in traditional Chinese martial arts, the game features character designs and combat movements meticulously modeled after authentic martial arts techniques. Set during the late Qing Dynasty, the narrative explores the historical rise of various martial arts sects during a period of profound social change. The visual identity of the game is a tribute to the historic city of Hangzhou, featuring UI elements and combat arenas inspired by iconic landmarks such as West Lake and Lingyin Temple.

Key Responsibilities

UI & Visual Design

Technical Art & Programming

Video Link

https://youtu.be/a3o_3fSTPTM

Yidaiyicheng
Introduction

Herbal Workshop is a 3D, chibi-style, couch co-op game featuring a classic local split-screen interface. The gameplay focuses on the collaborative processing of Traditional Chinese Medicine (TCM). Players take on the roles of "Master" and "Apprentice," working together to perform tasks such as slicing, grinding, and pounding herbs to fulfill medical prescriptions under tight time constraints. The project combines frantic time-management mechanics with the rich cultural heritage of TCM processing techniques.

Key Responsibilities

UI & Visual Design

Technical Art & Programming

Video Link

https://youtu.be/nZ3TlvVZh5U

Push Puzzles
Introduction

Push Puzzle is an innovative puzzle title that harmoniously blends the logic-driven mechanics of "Sokoban" with the spatial reasoning of "Jigsaw Puzzles." Featuring a charming Japanese hand-drawn aesthetic, the game follows the journey of a kitten navigating through cozy, illustrated environments. With a core loop focused on efficiency, the game includes a time-based scoring and ranking system that challenges players to optimize their pathfinding and puzzle-solving speed.

Key Responsibilities

UI & Visual Design

Technical Art & Programming

AR Ancient Chinese Poetry

Four seasons
Introduction

Poetic Echoes is an AR-powered educational interactive platform designed to help children and teenagers master classical Chinese poetry. To bridge the gap between abstract text and mental imagery, the system allows users to tap on specific keywords within a poem to trigger animated landscapes, the evolution of pictographs, or informative cards about historical artifacts. As the interaction progresses, a complete visual representation of the poem is assembled. Finally, users can scan the completed artwork with their smartphones to experience the poetic world in 3D through Augmented Reality.

Key Responsibilities

UI & Visual Design

Technical Art & Programming

3D Modeling

Character modeling
Character model
Hard surface modeling
Hard surface
Architectural modeling
Architectural 1 Architectural 2 Architectural 3 Architectural 4