APPLE: KEYNOTE ANIMATION ENGINE

I had two internships at Apple where I worked on Keynote's Animation Engine team from January 2020 to August 2020 and from May 2021 to August 2021. My work is confidential but here's what I can say:

• I researched, prototyped, architected, and implemented new features in Keynote
• I wrote unit tests and documented the architecture
• My second internship involved a lot of prototyping and cross-functional collaboration
• I used: Swift, Metal, Objective-C, XPC Services, CoreAnimation, WebKit, WebGPU, Xcode, and ARKit/RealityKit

The images below were not created as part of my co-op. They are simply images I created to teach myself the Metal rendering API in preparation for the internship.

LIVE PER­FORMANCE 6103

Live Performance 6103 was showcased at The Flea theater in Tribeca, Manhattan, New York City. A dancer, born into a metaphoical world, first begins to explore her universe. While initially breathtaken by the world's beauty, the dancer quickly realizes that she is trapped and unable to escape her world.

Accompanying the dance is an emotional soundtrack and live projection design controlled by data collected, via a Kinect V2 sensor, about the dancer's movements.

For this project, I worked with Rachel Wan from Columbia University and Jiwon Shin from New York University ITP. I programmed and designed the procedurally generated projection design using C++,GLSL, and OpenGL on OpenFrameworks. I also designed the live effects to be used by the VJ. I also helped plan the storyboard.

Jiwon Shin created the audio, storyboard, and Kinect V2 data collection program. The kinect data collected by her program was sent to my projection program via a Heroku server. Rachel Wan performed as our outstanding dancer.

Watch recording
Explore github

HeLX PROGRAMMING LANGUAGE

HeLX is a programming language designed to be uniquely easy to learn while fufilling the wants of a more experienced programmer. For example, this programming language features pointers but exposed through a novel and intuitive model.

Although I created this project entirely on my own in high school, I was not shy of asking teachers and peers for UX testing and advice.

I defined this programming language using a Bison grammer. The "compiler" for this language was built using C on Flex and Bison. Currently, I've only built a HeLX to Javascript "compiler" as this made HeLX very easy to share via the web.

This is a project I'm excited to revisit in the future.

Try it out
Explore Github

ALCANYTE WEBSITE

I created this website to introduce the High School organization, Alcanyte. I created this 3D enviroment throughout which an animated text sequence is featured. For this project, I used Javascript and GLSL on THREE.js.

I also wrote a distortion shader used whenever the user clicks anywhere on the site. Recently, as a quick experiment, I set up a stero camera so that this enviroment could be experienced in virtual reality.

Visit site

THE HUNGER MUSIC VIDEO

I worked with concert and visual designer Deborah Johnson, aka Candystations (based in NYC), to create a music video for the acclaimed modern 20-member chamber orchestra, Alarm Will Sound. This was a rather large project and my specific role was to create four thematic, organic, and particle-based motion graphics scenes to be used in the final music video.

To create the scenes, I used C++, GLSL, and OpenGL on Open Frameworks. The scenes were built upon fractal noises and the unique ways particles can interact with them. Each scene uses a unique particle system.

Watch on Youtube

VFS BOOKLET

This visually experimentally designed print contains all the projects I have created for the Visual Foundations Studio class at New York University.

Included is a Logo project, a physical application of the logo, an interface project, and more. I created this print using InDesign while the projects inside were created using a variety of tools in the Adobe Creative Suite.

View PDF

ORGANELLE PRO­CEDURAL GEOMETRY

Before this project, I used a lot of fractal noise in my work but mostly for particle transformations and terrain displacement. I wanted to explore the possibilities of fractal noise so here I attempted to create a truly 3D geometry entirely from fractal noise.

After much thought, I finally found a way to create such a geometry! I wrote an OpenGL program to generate a set of points, used sampling algorithms to normalize the distribution of those points, used surface reconstruction algorithms to generate a crude geometry, and finally remeshing algorithms to clean up the result.

I quickly added the resulting geometry to a WebVR scene. I created the geometry using C++ on OpenFrameworks and created the WebVR scene using Aframe/THREE.js. The geometry is shaded using its normals.

Enter WebVR scene
Enter Walkable WebVR scene (beta)

VIRTUAL REALITY CAVE SCENE

The final project for a Virtual/Augmented Reality Content Creation course at New York University was to create a VR scene in Unreal Engine from near scratch, meaning we had to create all the geometries, UVs, textures, scene, and effects entirely on our own.

However, I overcomitted that semester and only had 24 hours to complete this project! In 24 hours I:

• Taught myself the basics of Unreal Engine 4 to create the general scene, an ambient particle effect, basic movement controls, and a basic water shader
• Created cave and gemstone geometries using Maya
• Designed textures on Substance Painter.

DIGITAL TUTORIAL HCI RESEARCH

Over the Summer of 2019, I worked with New York University's department of Technology, Culture and Society to investigate the impact of various factors, including design and organization, in online tutorial effectiveness. Our research pertained to online tutorials in physical computing.

In our research, we conducted a literature review, investigated many online tutorials on various sites like Instructables, formulated hypotheses, and finally conducted a study with 9 random participants to test our hypotheses.

We found some possible influence from the factors we tested but more importantly, we raised great questions for further research.

Read writeup
Our study's Instructables

Below is, in order, a writeup screenshot, research poster, documents supporting our study, and pictures of the study being conducted.

3D MODELING AND SCULPTING

Below are a couple 3D objects I modeled/sculpted for a class at New York University over the Spring of 2019. Most of these were based on photographs or 2D concept art. I used Maya and zBrush.

VISUAL MUSIC PIECE

This abstract animation is a multimodal interpretation of a New York City plaza. First, I sat down in the plaza and transcribed the enviromental sounds onto a spreadsheet. Then, I created an analog artwork based on the spreadsheet and created a soundtrack based on that artwork. Finally, I created this animation based on that soundtrack.

I used REAPER, VCV Rack, and Garage Band to create the soundtrack and After Effects and OpenGL to create the animation.

Watch video

PERFORMATIVITY ESSAY

For a humanities/writing focused course at New York University, I analyzed a contemporary queer dance, "The Arrow" by Matthew Richardson, and the historic painting, The Death of Socrates, to investigate the use of performativity in different contexts.

Per my instructor's recommendation, this essay was submitted as a candidate for "Mercer Street", a collection of the best essays written as part of the course at New York University.

Read essay

HAILIAX MEDIUM FONT

Most letterforms thin out at joints in order to reduce the visual weight at joints and help produce a more consistent overall letter. I wanted to try to create a font where, instead of thinning out at joints, I would create a gap in the letter.

The idea behind this font is that thinned-out joints can look odd when blown up to a big font size. Hopefully, the gap in the letter, instead of thinning, would produce a better large-point display font.

I created this geometric sans font using Illustrator and FontForge. I drew inspiration from Helvetica's vertical proportions as they looked quite nice and Helvetica's x-height + decender is conveniently equal to its baseline to ascender.

LINKED ARRAY DATA STRUCTURE

At the start of a data structures course, I was introduced to how dynamic arrays work. However, I thought they could be optimized by linking new segements of an array instead of actually growing the base array. To demo this data structure, I implemented it in C.

Explore Github

COMPUTER SCIENCE CLASSWORK

The following are computer science courses I have work for and have gotten near perfect scores for all assignments. In the interest of academic integrity, I will not be posting my code at this time. Please contact me if you are hiring and want to see my code.

• Data Structures and Algorithms, Java
• Intro to Computational Media, Javascript
• Computer Organization and Programming, LC3 Assembly, C
• Objects and Design (Software Engineering), Java
• Intro to Artificial Intelligence, Python
• Computer Graphics, Javascript, WebGL
• Design and Analysis of Algorithms, Pseudocode
• Machine Learning, Python
• Junior Design Part 1, Swift
• Computer Vision, Python
• Computer Animation, Python

DOCS.JS LIBRARY

In high school, I wanted to create documentation for the web apps I created but couldn't find a solution that satisfied my needs. I created DocsJS as a very easy to learn declarative documentation generator.

DocsJS works entirely client side by reading the target pages' custom DocsJS HTML tags and generating styled, structured, and interactive documentation to display. All the documentation writer has to do is include the DocsJS library on their page.

I created DocsJS using Javascript and tested it using BrowserStack. DocsJS supports browsers as old as IE6. DocsJS is hosted on npm and jsDelivr where it still features, to my suprise, over 25-100 hits per month! (this is a really old and outdated project)

Explore Github
Visit DocsJS' documentation page

HIGH SCHOOL WEB APPS

I created some web apps for my high school administration while in high school. Screenshots are included below after the 4th image.

LAMP OF LIFE

As part of a summer design course at Cornell University, I created an artistic paper lamp to represent the story of life. The entire lamp is made from a continous strip of paper, symbolizing the path of life. Along the path, the folds change and evolve according Erik Erikson 8 stages of development.

This lamp design involved much prototyping and sketching as well as paper sculpture techniques.

View all images

3D MODEL TEXTURES

As part of a Virtual/Augmented Reality Content Creation course at New York University, I created a set of high quality textures for skateboard and ray gun 3D models.

These textures were procedurally generated using Substance Painter and rendered on Iray.