Studio Ānanda

New website + CMS for Studio Ānanda ❣️

Had a lot of fun with some CSS properties like drop shadow, blend modes, and pseudo-elements. To create the interactive logo on the home page, I used to draw circles along SVG path and changed hue over time on mouseover.

Design + Development by me

Site

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

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. 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.

Code

FLUID

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.

Wireloop

Inspired by childhood science fair buzz wire project, Wireloop is a series of AR games built with the New York Times. Users are encouraged to move the ring ("phone"), trace and light up the dark wire, and reveal hidden shapes.

Limited by IG's lack of support for haptic feedback, we have to recreate the "buzz" of the experience with only visual effects. To track users' performance, the wire is "lit", segment by segment, with its brightness level mapped to the proximity of ring to wire.

As the ring moves away from the center of the wire, its color changes from yellow-hot to partially red-hot and eventually cool down to black. The ring's "hotness" not only monitors users' performance but also evokes a sense of alert and danger. When the ring falls off the wire, the ends of the wire would taper and crumble into ash.

I II III IV V VI VII

Nasal Swab AR Effect

Read How Far Should a Coronavirus Test Go?

We worked with Julia Rothman to create a selfie AR effect to show the interior of a nasal cavity in a 2.5D approach.

Try it

Dalilah Muhammad AR Effect

An IG filter to visualize Dalilah Muhammad's motion over the hurdle in real-scale, published to go along with her interview with the New York Times.

Try it

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 it