Useful Links

Documentation

JavaScript

JavaScript (JS), the primary language students will use in this course, is a highly-flexible, interpreted scripting language and is well-known for powering the front-end infrastructure of the Web. The JavaScript language is prototype-based, multi-paradigm, single-threaded, and dynamic; it supports object-oriented, imperative, and declarative (e.g. functional programming) programming styles.

Because of its widespread use, the specifications for JavaScript, known as the ECMAScript specifications, continue to improve and alter with time. The official resource for JavaScript documentation in this course are Mozilla’s MDN JavaScript Docs. Students who are unfamiliar language might also find MDN’s JavaScript examples helpful.

As with any language, poor JavaScript style can make code hard to read and can even introduce bugs. For this course, we recommend the Airbnb JS Style Guide, but students may conform to any modern ES6+ styling standards. As an aside, it is recommended that all students read through Airbnb JS Style Guide to pick up on useful JavaScript shorthands, such as Object deconstruction.

OpenGL

OpenGL is an open-source API that allows application developers to communicate with graphics acceleration hardware such as the GPU. In particular, OpenGL specification describes an abstract API for drawing 2D and 3D graphics, and it is designed to be implemented mostly or entirely in hardware.

Part of the OpenGL specification is the OpenGL Shading Language (GLSL). GLSL is a C/C++ flavored programming language and is used to write simple shaders that execute directly on the GPU.

Following increasing demands for hardware-accelerated graphics content on the Web, the Google Chrome team (subsequently followed by the other major browser developers) adapted the native-based OpenGL API into the browser-based WebGL JavaScript API. The latest major release of WebGL, WebGL 2.0, exposes the OpenGL ES 3.0 API, and allows website developers to include GPU-accelerated rendering, physics, image processing, and other effects in HTML5 canvas elements. One of the most appealing features of WebGL is that it ensures cross-browser and cross-platform support for WebGL-based graphics project.

ThreeJS

Although the WebGL API makes web-based graphics possible, the API is relatively inaccessible to the general application developer who has no industry or graduate experience in low-level graphics programming. This is where ThreeJS, as well as other WebGL frameworks, come in.

ThreeJS is a well-documented open-sourced JavaScript library that integrates with WebGL and provides hundreds of useful graphics primitives to the application developer. In this class, ThreeJS provides the backbone for our 3D assignment frameworks, and it is often used by students to build their final projects. For a showcase of what ThreeJS can do, visit the project’s examples page.

Tools

JavaScript Editor

Because JavaScript assignments in this course are compiled just-in-time by the web-browser and executed therein, we recommend that students use relatively lightweight IDEs or code editors to compose their assignment solutions. While any editor (even a simple text editor) is fine, students in previous iterations of this course have favored Microsoft’s Visual Studio Code (NB: this is not the same as Visual Studio, a professional-class IDE), GitHub’s JavaScript-based Atom, and the lightweight Sublime Text.

Both Visual Studio Code and Atom are feature-rich and have fantastic package support; however, they suffer in performance and occasionally crash. Conversely, Sublime is blazing fast and fairly reliable; however, its package management is atrocious, and as of Sublime Text 3.0, vanilla Sublime is not provide many features beyond syntax-highlighting.

Browser DevTools

All major browsers contain a robust set of developer tools, often referred to as DevTools. In Chromium based browsers, the DevTools can be accessed by left-clicking an HTML element in the browser window and selecting “Inspect” in the dropdown. The DevTools panel can also be opened through the keyboard shortcut Command + Option + C on Mac, and Command + Shift + C on Windows.

The most useful DevTools for students will be the Console pane and the Sources pane. One common strategy for debugging assignments in this class is to print trace statements out to the Console via console.log(). A second and more-productive debugging strategy is to set breakpoints in the code via the breakpoint keyword, which opens the browser’s JavaScript debugger in the Sources pane when executed. It is recommended that students use this second debugging strategy over the first in this class.

We highly recommend that students read through Google’s guide on debugging JavaScript through Chrome DevTools.

ThreeJS Editor

The ThreeJS project recently released a browser-based editor to build ThreeJS scenes through a visual interface, rather than directly through code. Students exploring ideas for their final project may find this tool useful for quickly demoing and playing around with ideas, before committing them to code.

Tutorials

JavaScript and Websites

For JavaScript beginners, the full language documentation is generally not a great place to start. Thankfully, there are fantastic online resources for learning web-development. In particular, we recommend the Mozilla JavaScript guide, as well as W3Schools’ guides on JavaScript, HTML, and CSS.

Web-development is outside the scope of this course, however students who wish to learn more about the field after finishing the above tutorials are encouraged to follow them up with the ReactJS tutorial.

ThreeJS and Shaders

Because ThreeJS provides myriad features, and yet dictates no structure for organizing them, many developers find that the library has a steep learning curve. During previous iterations of this course, students have found it productive to peruse our 3D assignment framework code, read through the ThreeJS docs, view source code for the ThreeJS examples, as well as watch videos and read other third-party ThreeJS tutorials in order to acclimate themselves with the library. The threejsfundamentals tutorial, in particular, is fantastic and highly recommended.

Unfortunately, while shading languages like GLSL have incredible expressive capacity, they also tend to have steep learning curves. One possible resource for learning GLSL is the Learn OpenGL tutorial. We also recommend the wonderful, aesthetically pleasing, and interactive Book of Shaders, from which past students have occasionally drawn to inspire their art projects. If you are looking for more examples, check out Shadertoy, which not only contains a library of thousands of community-built shaders, but also provides a WebGL sandbox for building and editing shaders in real-time.

Additional Readings

The field of Computer Graphics is as expansive as it is fascinating. Try as we might, there is no way to squeeze the entire field into a semester-long course. Thus, as a supplement to the lecture slides, precept slides, and official course readings, we recommend the following webpages for students’ perusal. These readings are not necessary to perform well in this course, but rather are provided for the convenience of the eager and enthusiastic student. Additionally, students may find these readings helpful in clarifying complicated, confusing, or complex topics from class.

This is a growing list, so expect more links to appear here as the semester continues.

Color theory
Image Processing
Meshes & Modeling
Simulation

Final Project Hall of Fame

Here you will find a selection of the best final projects from previous years. Links to the demos and source code for these projects are available below for students’ collective inspiration, interest, and entertainment.

Spring 2020 Selection
Dream World: Meditation Simulation
Elizabeth Petrov, Lydia You, Lauren Johnston, Joanna Kuo
🏆 Best Overall Award
💡 Innovation Award
🏛️ Hall of Fame
Best Overall Award (Students' Choice)

This project entails the creation of a Javascript-based world simulation for focused meditation. We hypothesized that we could facilitate the meditation process by designing a dream-like world in which users can customize their own calming terrain through the perspective of a flying bird while listening to peaceful music and guided meditations.

With the COVID-19 pandemic affecting more people each day, we wanted to explore ways to remain calm and reduce stress through meditation. We were successful in our goal of creating this simulation, and in particular achieved our target results: the implementation of infinite terrain generation, realistic bird movement, and music and terrain (i.e. audiovisual) coordination.


This project entails the creation of a Javascript-based world simulation for focused meditation. We hypothesized that we could facilitate the meditation process by designing a dream-like world in which users can customize their own calming terrain through the perspective of a flying bird while listening to peaceful music and guided meditations.

With the COVID-19 pandemic affecting more people each day, we wanted to explore ways to remain calm and reduce stress through meditation. We were successful in our goal of creating this simulation, and in particular achieved our target results: the implementation of infinite terrain generation, realistic bird movement, and music and terrain (i.e. audiovisual) coordination.

Solar System Survey
Zak Dasaro, Jason Kim
⚙️ Execution Award
🥈 Best Overall Runner-up
🏛️ Hall of Fame

The goal of this project was to create a graphical representation of the solar system, including its planets, major moons, and other prominent objects like dwarf planets, asteroids, and comets. In this program, planets are accurately positioned in the simulation according to their orbital data, so the user can see an accurate spatial layout of the solar system. Celestial bodies are rendered with great visual accuracy, using available textures and carefully tuned reflection models. The user may move the view throughout the solar system, zoom in on different objects, and look around using mouse controls.


The goal of this project was to create a graphical representation of the solar system, including its planets, major moons, and other prominent objects like dwarf planets, asteroids, and comets. In this program, planets are accurately positioned in the simulation according to their orbital data, so the user can see an accurate spatial layout of the solar system. Celestial bodies are rendered with great visual accuracy, using available textures and carefully tuned reflection models. The user may move the view throughout the solar system, zoom in on different objects, and look around using mouse controls.

Driver's Ed
Dora Zhao, Karen Ying, Sharon Zhang, Brandy Chen
🎨 Art Direction Award
🥉 Best Overall Runner-up
🏛️ Hall of Fame
Art Direction Award (Students' Choice)
Best Overall Runner-up (Students' Choice)

This fall semester, Princeton University is offering a new class DRI 101: Driver’s Ed. Our game, Driver’s Ed, is an infinite-runner game in which a player controls a car driving down Washington Road. Each player is given three lives (or three chances in the class), and every time they hit an obstacle they lose a life. The player uses the arrow keys to dodge the obstacles— pedestrians, crossing animals, and other cars— all while trying to collect coins.

The goal of the game: get as many coins as possible without getting kicked out of the class. Driver’s Ed uses computer graphics concepts, such as polygonal meshes, light rendering, and collision modeling, to create an enjoyable and aesthetically-pleasing game for players.


This fall semester, Princeton University is offering a new class DRI 101: Driver’s Ed. Our game, Driver’s Ed, is an infinite-runner game in which a player controls a car driving down Washington Road. Each player is given three lives (or three chances in the class), and every time they hit an obstacle they lose a life. The player uses the arrow keys to dodge the obstacles— pedestrians, crossing animals, and other cars— all while trying to collect coins.

The goal of the game: get as many coins as possible without getting kicked out of the class. Driver’s Ed uses computer graphics concepts, such as polygonal meshes, light rendering, and collision modeling, to create an enjoyable and aesthetically-pleasing game for players.

Cat Dash
Xi Chen
👻 Spirit Award
🏛️ Hall of Fame
Best Overall Runner-up (Students' Choice)

Endless runner games have become increasingly popular in recent years. Inspired by the successful work of Temple Run and Subway Surfers, I implemented a similar game called Cat Dash, where players control a cat to avoid obstacles and earn rewards. To enrich the game interface, scenery are randomly generated and spawned along sides of the cat’s moving tracks. Optimizations have been done to guarantee the game’s playability and compatibility, and enhance algorithm efficiency.

Based on the comprehensive experiments and tests, the game runs smoothly and bug-free with different screen sizes and browsers.


Endless runner games have become increasingly popular in recent years. Inspired by the successful work of Temple Run and Subway Surfers, I implemented a similar game called Cat Dash, where players control a cat to avoid obstacles and earn rewards. To enrich the game interface, scenery are randomly generated and spawned along sides of the cat’s moving tracks. Optimizations have been done to guarantee the game’s playability and compatibility, and enhance algorithm efficiency.

Based on the comprehensive experiments and tests, the game runs smoothly and bug-free with different screen sizes and browsers.

Chromatic Arrow
William Li, Anna Qin, David Todd
💻 Interaction Award
🏛️ Hall of Fame

Chromatic Arrow is an archery-based web game developed using the ThreeJS library. Its core gameplay consists of shooting arrows at targets that randomly spawn in 360 degrees around the player. Arrows follow the laws of physics, so the player must account for gravity and wind while aiming. There are also invisible barriers throughout the scene that will block the player’s shots; barriers are revealed by paint splatters whenever an arrow collides with them.

The more the player shoots, the more of the level is uncovered. Points are scored by hitting targets and revealing barriers before time runs out.


Chromatic Arrow is an archery-based web game developed using the ThreeJS library. Its core gameplay consists of shooting arrows at targets that randomly spawn in 360 degrees around the player. Arrows follow the laws of physics, so the player must account for gravity and wind while aiming. There are also invisible barriers throughout the scene that will block the player’s shots; barriers are revealed by paint splatters whenever an arrow collides with them.

The more the player shoots, the more of the level is uncovered. Points are scored by hitting targets and revealing barriers before time runs out.

Raymarching with Signed Distance Fields
Jake Waksbaum, Benjamin Huang, Anvay Grover
🧠 Technical Achievement Award
🏛️ Hall of Fame
Technical Achievement Award (Students' Choice)

We explore an alternative technique to raytracing for rendering 3D scenes called Signed Distance Field Raymarching that represents the entire scene using a signed distance field (SDF) that maps each point in space to the distance to the nearest object. We are able to implement comparable features to the raytracer in assignment 3 at near real-time frame rates (10-30 FPS). We also render a scene that would be infeasible to produce with raytracing due to its recursive nature.

We highlight the composable nature of the SDF representation by building an editor that allows users to build complex shapes by composing primitives with transformations.


We explore an alternative technique to raytracing for rendering 3D scenes called Signed Distance Field Raymarching that represents the entire scene using a signed distance field (SDF) that maps each point in space to the distance to the nearest object. We are able to implement comparable features to the raytracer in assignment 3 at near real-time frame rates (10-30 FPS). We also render a scene that would be infeasible to produce with raytracing due to its recursive nature.

We highlight the composable nature of the SDF representation by building an editor that allows users to build complex shapes by composing primitives with transformations.

Going Viral
Jeongmin (JM) Cho, Claire Guthrie, Heidi Kim, Oliver Schwartz
🤪 Meme Award
🏛️ Hall of Fame

Going Viral is a COVID-19 themed arcade-type survival game. You, the player, control a healthy white cell while trying to avoid infection by enemy virus particles. You control your cell with the arrow keys and the spacebar (to jump). As you successfully complete levels, the game becomes more difficult, challenging the user to be more daring. Stay Healthy!


Going Viral is a COVID-19 themed arcade-type survival game. You, the player, control a healthy white cell while trying to avoid infection by enemy virus particles. You control your cell with the arrow keys and the spacebar (to jump). As you successfully complete levels, the game becomes more difficult, challenging the user to be more daring. Stay Healthy!

Pac-Atac
Jerry Zhu, Daniel Wey, Michael Fletcher, Hollis Ma
🎮 Gameplay Award
🏛️ Hall of Fame

Pac-Atac is an exciting first person shooter game inspired by nostalgic Pac-Man aesthetics and first person shooter classics. Players play as Pac-Man and attempt to survive for as many waves as possible by shooting cherries and other assorted fruits to defeat the unrelenting ghosts.

Developed using ThreeJS, Pac-Atac reconciles dynamic game-design and visually-exciting graphics concepts to promise an action-packed 2.5D experience in the spirit of Pac-Man.


Pac-Atac is an exciting first person shooter game inspired by nostalgic Pac-Man aesthetics and first person shooter classics. Players play as Pac-Man and attempt to survive for as many waves as possible by shooting cherries and other assorted fruits to defeat the unrelenting ghosts.

Developed using ThreeJS, Pac-Atac reconciles dynamic game-design and visually-exciting graphics concepts to promise an action-packed 2.5D experience in the spirit of Pac-Man.

mpThree.js
Hanson Kang, Greg Umali, Johan Ospina
🎧 Audio Award
🏛️ Hall of Fame
Audio Award (Students' Choice)

mpThree.js is a music-adapting retro racer that is powered by YOUR music. Users upload their own .mp3 files, and the game elements interact with the music to create a unique experience. Over the course of the song, players avoid red ‘death spheres’ and try to collect gems and power-ups to rack up as many points as they can.


mpThree.js is a music-adapting retro racer that is powered by YOUR music. Users upload their own .mp3 files, and the game elements interact with the music to create a unique experience. Over the course of the song, players avoid red ‘death spheres’ and try to collect gems and power-ups to rack up as many points as they can.

2020: A Princeton Space Odyssey
Jessica Edouard, Emmanuel Teferi, Justin Tran, Henry Wang
🏛️ Hall of Fame
Gameplay Award (Students' Choice)

Princeton 2020: A Space Odyssey is a space flight game where the player must navigate an ongoing asteroid field while also collecting enough fuel to survive. Players can hope to join an exciting, flight-centered space adventure.

Pilot a spaceship flying through outer space as you attempt to warp home by collecting fuel charges. The primary objective will be achieved by the player collecting fuel charges as they spawn while avoiding flying asteroids or picking up power-ups to become invulnerable to asteroid collisions.


Princeton 2020: A Space Odyssey is a space flight game where the player must navigate an ongoing asteroid field while also collecting enough fuel to survive. Players can hope to join an exciting, flight-centered space adventure.

Pilot a spaceship flying through outer space as you attempt to warp home by collecting fuel charges. The primary objective will be achieved by the player collecting fuel charges as they spawn while avoiding flying asteroids or picking up power-ups to become invulnerable to asteroid collisions.

3D Knockout
Richard Wolf, Jonah Lytle, Jacob Schachner
🏛️ Hall of Fame

3D Knockout is a 2 – 4 player game based off of the 2D Game Pigeon game “Knockout,” in which players launch their penguin characters with specified magnitude and direction in an effort to knock the opposing player’s penguin characters off of the ice sheet that the game is played on. A player begins with four penguin characters and wins by knocking all of the opponents’ penguins off the ice sheet while having at least one of their characters remaining in the end. Each player gets one opportunity to “launch” their penguins per round, and the penguins begin to move according to the user’s instructions simultaneously at the end of the round.

In our project, we managed to implement all of the key aspects from the original 2D game into a visually appealing 3D scene containing the icy playing field, an animated ocean, mountains, and several dynamic, exotic creatures. However, we also implemented other cool features such as incorporating a scoreboard, sound effects, a rotatable camera angle, and the ability to play with 2 – 4 players.


3D Knockout is a 2 – 4 player game based off of the 2D Game Pigeon game “Knockout,” in which players launch their penguin characters with specified magnitude and direction in an effort to knock the opposing player’s penguin characters off of the ice sheet that the game is played on. A player begins with four penguin characters and wins by knocking all of the opponents’ penguins off the ice sheet while having at least one of their characters remaining in the end. Each player gets one opportunity to “launch” their penguins per round, and the penguins begin to move according to the user’s instructions simultaneously at the end of the round.

In our project, we managed to implement all of the key aspects from the original 2D game into a visually appealing 3D scene containing the icy playing field, an animated ocean, mountains, and several dynamic, exotic creatures. However, we also implemented other cool features such as incorporating a scoreboard, sound effects, a rotatable camera angle, and the ability to play with 2 – 4 players.

Type Type Revenge
Christy Lee, Christine Kwon, Anabelle Chang, Donovan Coronado
🏛️ Hall of Fame

Type Type Revenge is a 3D web game built with ThreeJS to provide an interactive environment for users of various typing levels to practice their typing skills. In this game, random letters fall down the screen in time with music, and players must type the corresponding keyboard key as a letter reaches its target at the bottom of the screen. There are two song options and three levels of difficulty offered, and point values increase as the player reaches longer streaks of successfully typed letters.


Type Type Revenge is a 3D web game built with ThreeJS to provide an interactive environment for users of various typing levels to practice their typing skills. In this game, random letters fall down the screen in time with music, and players must type the corresponding keyboard key as a letter reaches its target at the bottom of the screen. There are two song options and three levels of difficulty offered, and point values increase as the player reaches longer streaks of successfully typed letters.

Spring 2019 Selection
ColoRing
Bianca Catoto, Ilene E, Rebecca Barber
🏛️ Hall of Fame

Color the arena faster than your opponent can before time runs out in this two-player splitscreen retro arcade game.


Color the arena faster than your opponent can before time runs out in this two-player splitscreen retro arcade game.

DemoSource
Shape Battles: The Final Frontier
Derek Sawicki, Hector Solis, Jimmy Wu
🏛️ Hall of Fame

Control a spaceship with your mouse and try to explode enemies before they destroy you in this competitive top-down arcade game


Control a spaceship with your mouse and try to explode enemies before they destroy you in this competitive top-down arcade game

DemoSource
Color Maze
William Sweeny, Kevin Jeon, Aditya Kohli
🏛️ Hall of Fame

Collect artifacts and unlock graphical gameplay in this exciting maze of hidden dimensions.


Collect artifacts and unlock graphical gameplay in this exciting maze of hidden dimensions.

Collideoscope
Noah Moss, Evan Wildenhain
🏛️ Hall of Fame

How far can you make it in this extremely addicting kaleidoscope infinite runner?


How far can you make it in this extremely addicting kaleidoscope infinite runner?

DemoSource
CTRL-Z
Quinn Donohue, Cody Sedillo, Victor Riveros
🏛️ Hall of Fame

Defend your fort while being sent back in time as you accumulate damage in this two-player arcade game.


Defend your fort while being sent back in time as you accumulate damage in this two-player arcade game.

Death Star Assault
Ajay Penmatcha, Antony Toron
🏛️ Hall of Fame

Relive the final battle from the classic 1977 film Star Wars through the X-Wing of Luke Skywalker in this awesome arcade game. Can you make it all the way to the trench run and save the rebels on Yavin IV from annihilation?


Relive the final battle from the classic 1977 film Star Wars through the X-Wing of Luke Skywalker in this awesome arcade game. Can you make it all the way to the trench run and save the rebels on Yavin IV from annihilation?

Spring 2018 Selection
Small World
Reilly Bova, Jad Bechara
🏛️ Hall of Fame

Procedurally generate your own stylized miniature-world through this technical art demo. With dozens of colors, materials, and other options to choose from, the opportunities for customization are nearly endless!


Procedurally generate your own stylized miniature-world through this technical art demo. With dozens of colors, materials, and other options to choose from, the opportunities for customization are nearly endless!