Jiayao (Gavin) Jin
New York University | Class of 2023 | Computer Science
jj2915@nyu.edu | +86 135-855-19987


This is my portfolio for the course CSCI-UA 380 Drawing On the Web.

This project aims to combine images and media in the browser to create an original, multilayered, HTML and CSS drawing.

My idea comes from the notion of "Vaporwave", which emerged in the early 2010s. I chose one of its features, Windows95 as my main theme, where I try to mimic a low-quality video on a Win95 computer.

This project aims to create an categorically and aesthetically related SVG icon system using plain code and illustration software.

The idea comes from my dream of having an apartment with rooms in my sense of design. Although the icons are simple in their shapes, but they capture the key of each room. Thus, I think they are descriptive enough, and also adorable enough.

This project aims to use CSS transforms to make a three-dimensional drawing and CSS animation to set it in motion.

The idea comes from a game that I used to play, the Sims. They have this iconic rotating 3d diamond shape in many parts of the game. I further abstract it by using only half of the original shapes to make it a bit more vacant

This project aims to add more interactivity to Drawing on the Web projects and also explore another animation strategy with JavaScript.

The idea comes from the everyday usage of the screen saver, e.g. when my computer is sleeping. The theme soda is out of my preferences for such beverage

This project aims to research web APIs that may be useful in Drawing on the Web and sketch an example page with one of my findings.

My idea comes from the AQI index, which shows the quality of the air. It can easily be incorporated into Drawing on the Web projects, such as transition, mapping, and etc.

This project aims to use the HTML canvas API with a custom template to dynamically create two-dimensional raster graphics in the browser.

My idea comes from the screen saver of my computer, which can changes its color on whether it is day or night. Initially, I planned to manipulate the pixel to simulate a dark effect, but it is much more difficult than I hvae expected. Therefore, instead, I adapted a linear change to show such time pass effect.

This project aims to create a dual-layer drawing consisting of a two-dimensional background canvas and a three-dimensional foreground canvas.

My idea is a rocket in the space. I made the 3d object of the rocket using Blender and use WebGL to render it on the web page. Sunlight is added and the background is using canvas animation to simulate the stars in the spce.

Ghosts, being the symbol of the evil and the dark side of world, always appear as terrifying figures. However, its invisibility in the reality enables us to draw totally different versions in our minds. From our perspective ghosts can be very cute and human-like instead of being harmful and scary. Therefore, in this project, we are going to use the drawings to present these tiny ghosts as adorable and joyful creatures.