openFrameworks, Processing, Max/MSP, TouchDesigner, GLSL
Ongoing process of creating sketches with Processing / MatterJS since April 2019 👩🏻💻 More at @codebrewed on IG (linked below)!
These visual sketches are created with ofxFaceTracker. The first mimics the effect of breath condensed on glass surface when we exhale, the second portrays a rather comical effect of swirly eyes in animations, and the third is a ofxBox2d test using facial features as obstacles that bodies can bounce off.
The idea of animating a Mondrian painting never left my head after visiting Stedelijk Museum. #FF0000, #0000FF, #FFFF00, #000000 pays tribute to Mondrian's Compositions with Red, Blue, Yellow and Black with GLSL shaders. With the use of Perlin noise, it generates a unique Mondrian composition at each frame.
HTML5 canvas, p5.js, Three.js
Lost Code is a graphic design project exploring the friction in translation. Made with Paper.js. Featured on It's Nice That!
Design by Hilda Wong. Development by Ellen Lo.
Axis Mundi is an experimental exhibition project exploring man’s attempt to override nature with technology and nature’s resistance. Made with p5.js. Featured on klikkenthéke!
Identity design by Hilda Wong. Web and installation development by Ellen Lo.
I led a code-based design workshop for first year MFA graphic design students at MICA. The workshop aims at introducing p5.js as a design tool. Over the course of 3 days, the students designed and coded an interactive calendar for the year 2020.
Portfolio site for Kelly Li, featuring her photography, reel, and 2D animations as stickers which users can drag around.
Design by Kelly Li. Dev by Ellen Lo.
My 1st time doing both design and full stack dev! 🎉
I designed and implemented a fully custom Wordpress theme and CMS from scratch for Remi's blog, where he shares insights on blockchain, cryptocurrency, and technology. The site has a minimalistic look and playful hover interactions to preserve the informative nature while retaining the elements of play. Estimated reading time and reading progress bar are also included to increase user engagement. To support Remi's enthusiasm for crypto, I integrated MetaMask API so you can tip him in ETH with the Chrome extension.
If you would love a site with custom CMS and interactive elements, feel free to reach out for a quote!
C/C++, Python, Arduino, Raspberry Pi, Linux Kernel Programming, Qt
The kinetic sculpture is a work of collaboration with Jake Abraham. As a study of motion and tension, it was developed over the course of our internships at Volvox Labs. It comprises 16 micro servos with custom cut servo arms, 1 Arduino Uno, a 12" x 12" cheesecloth, steel cables, crimps, 3 Aluminum rods, and plywood.
The installation continuously runs a sequence of 6 different animations at an update rate of 60 Hz. By altering the speed, the amplitude, and the wavelength of the sine functions, the sculpture embodies sea waves under different weather conditions.
FLUID is a study of dynamic motion as an ever-changing form. This interactive installation involves laser sensing, custom LED lighting, and physical computing technology. The triptych features interactive animations, titled - DEW, WAVES, and RAIN. The installation recreates and pushes the everyday interaction humans have with matter in different fluid forms.
The triptych is a 95” by 40” digital canvas mounted onto the wall. The lights are encapsulated in a custom CNC cut alucobond frame with patterns. They mimic the natural flow of fluids through a scalloped-like pattern. By using LiDAR sensing technologies, distance between each canvas and any object in front becomes the major interface for interaction. The audience is invited to observe the flow of lights from afar as well as approach the installation to introduce a change in the display.
This is a self-driving car for BU's Smart Systems class, one of the many IoT / embedded systems applications I developed with ESP32 Huzzah board and Raspberry Pi in C / Node.js / NoSQL / Python.
The repo and playlist contain source code and demo videos for RC car with live camera feed and node server, smart key with real time graph and IR message decoding, and alarm clock with servos and alphanumeric display.
Unity, OpenCV, HTC Vive, Leap Motion, Kinect
1st face filter made with Spark AR – I used SDF circles, moved them randomly with noise, and applied SDF Union on multiple layers to create the blobs and mask the face mesh.
1984 is a theater adaptation of George Orwell's novel, where the dystopian landscape is reimagined with modern technologies. Directed by Clay Hopper.
I designed and developed interactive projections for the Ministry of Truth scene with openFrameworks and Kinect, and also created renders for Ministry of Love scene.
Surrounded by skyscrapers made from vertically stacked blocks, which resemble the look of jenga, players can shoot bullets into the architecture with their controllers and experience the apocalypse within the virtual environment.
Implemented with Leap Motion, the experiment Virtual Ball Pit challenges players to touch intangible, nonexistent objects with their hands in a tangible, virtual environment.