APPLE: KEYNOTE ANIMATION ENGINE

Software engineering co-op/internship from January 6, 2020 to July 31, 2020. I worked as part of Apple's Keynote Animation Engine team. 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.
• I used: Objective-C, Metal, Swift, XPC Services, CoreAnimation, WebKit, WebGPU, Xcode.

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

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 definitely 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 a procedurally generated 3D enviroment throughout which an animated sequence with words takes place using Javascript and GLSL on THREE.js. The words were animated in, my current opinion, not the greatest spinoff of an apple ad.

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 low-level C++, GLSL, and OpenGL on Open Frameworks with a 2018 MacBook Pro. 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

Uses of fractal noise algorithms are often quite monolithic when they're used to generate particle transformations or 2D art/textures/displacement maps.

I wanted to challenge myself to use such algorithms to create something I've never seen before: a full 3D procedural geometry from scratch at real-time speeds (not using a 2D displacement map).

After much thought, I've finally found a way to create such a geometry! I wrote a OpenGL program to generate a set of points, used sampling algorithms to even the distribution of said points, used 3D laser scan algorithms to turn those points into surfaces, and then remeshing algorithms to reduce the geometry's complexity.

I quickly added the resulting geometry to a WebVR scene so that people can easily explore this work. 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)
Enter Spooky WebVR scene (reskin)

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 quick cave and gemstone geometries with slightly edited auto UVs using Maya
• Designed some quick textures on Substance Painter.

I ended up getting an A on that final and all my other finals! Mission accomplished! That was one hectic night.

Link will be posted once I figure out how to share UE4 enviroments over the web well.

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 but notably 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, respectively, 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 and/or 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 an interpretation of a New York City plaza. First, I sat down in said 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

The background is a scene from the video I wrote my essay about.

HAILIAX MEDIUM FONT

Most letterforms in a font 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 most dynamic arrays work. However, I thought they could be optimized by linking new segements of an array instead of actually growing the base array.

I am planning to work on this data structure and test it further. It's quite suprising that I couldn't find such a data structure from googling as this is a really simple idea I'm sure others have thought of. I created the current version in C.

Explore Github

SOUND EFFECTS

For a semester-long sound design class at New York University, I created, organized, and named a collection of over 100 sound effects. More than half the sounds were recorded/created independently and the others were mastered from royalty-free sources.

In this endeavor, I utilized REAPER (similar to Logic or Abelton Live), Max MSP, SPEAR, VCV Rack, and various recording equipments, techniques, and effects.

View Google Drive

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.

DOCS.JS HTML/JS LIBRARY

In high school, I wanted to create documentation for the web apps I created but I didn't find any of the existing documentation generators geared at the scope of my projects. 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 user has to do is link the Javascript file on their page.

I created DocsJS using, of course, 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 CLUB INTRO VIDEO

This is my oldest yet still decent project and it was sort of what made me fall in love with my field. In my freshmen year of High School, I founded a school club aimed at introducing Graphics And Web Design (GAWD) to fellow students. Here is a promotional video I created for the club using After Effects.

Watch Video

IDEATION AND PROTOTYPING CLASSWORK

Here's a list of projects I've made for an Ideation and Prototyping course at New York University!

• Audio Reactor Video was a collaboration between me and two other students. One student created a multi-layered audio track and another student created a basic 3D model. I used After Effects to animate particles from the 3D model and modify them to the tune of the audio tracks.
• Dystopia masks was another collaboration where we envisoned a future where rampant pollution had made necessary gas masks a fasion item in the same way deterioating vision made glasses fasionable. We designed what we imagined to be a few possible fashionable gas masks of the future using wire, paper mache, and 3D printed models designed on Maya. Finally, we created a youtube review video for these masks set in the dystopic polluted future.
• City as a site was a two part project. First, we observed the streets near a sidewalk by sketching and taking notes. Then, we had to design an intervention for the site. We created a bright red stand/rest for bags with newly aquired woodworking skills.
• Processes and more contains a few more additional projects as well as documentation on how I created these projects.

Audio reactor video
Dystopia masks
City as a site
Processes and more

FOLEY ATTEMPT

As part of an introductory audio class at New York University, I attemped foley for a random online chase scene. I recorded, mastered, and organized sounds using REAPER and varying recording/performing equipment.

Watch video

NYU LGBTQ+ CENTER MARKETING

While I was at New York University, I was an active member and student leader of the NYU LGBTQ+ center. Part of my volunteer work for the center included marketing materials for NYU's lavender graduation, where we honored graduating LGBTQ+ students. Here is a collection of my work. I used primarily Adobe Photoshop and Illustrator. Other links to come once organized.

Promotional Graphic

COMPUTER SCIENCE CLASSWORK

Here's a collection of most of my comptuer science classwork/labs. I haven't organized them yet, but I'll post the links when I have.

Data Structures and Algorithms, Java
Data Structures (NYU), Python
Intro to C++/Discrete Math, C++
AP Computer Science, Java