Kinetic Typography with Chinese

Ongoing process of creating sketches with Processing / MatterJS since April 2019 👩🏻‍💻 More at @codebrewed on IG (linked below)!

@codebrewed

ofxFaceTracker experiments

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.

Code

#FF0000, #0000FF, #FFFF00, #000000

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.

Code

Lost Code

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.

Site / Code

Axis Mundi

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.

Site / Code

MICA Code Workshop

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.

Site

Kelly Li

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.

Site

remigai.com

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!

Site

The Internet is my Main Course

The Internet is my Main Course is a dinner party series curated by Hilda Wong. I developed the RSVP site and implemented custom video controls for the trailer.

Site / Code

A Study of Motion and Tension

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.

Code

FLUID

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.

IoT apps!

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.

Code / Playlist

binary smol object

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.

Try filter!

1984

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.

Virtual Jenga

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.

Blog

Virtual Ball Pit

Implemented with Leap Motion, the experiment Virtual Ball Pit challenges players to touch intangible, nonexistent objects with their hands in a tangible, virtual environment.

Code