Animated 3D Graphics Programming with JavaScript and p5.js
Student Qualifications
- Grades 6–12 (Accelerated learners in earlier grades are welcome with instructor approval)
- Logical thinking and math skills
- Facility with computers
Class Description
p5.js is a JavaScript library for programming artistic and mathematical 2D and 3D graphics and animations. It’s easy to get started with it, right in your browser. Check out this example and some others.
Combining programming with cool graphics is highly motivating and great fun.
Class Projects
In this class, we’ll program creative works like these:
- fields of 3D objects, rotating either over time, or with mouse input
- a mouse paintbrush that automatically cycles through color hues
- random star fields that we can move through
- programs that produce and visualize sound
- patterns that morph into other patterns
- animated optical illusions
What You’ll Learn
- how to work in an x, y, z, three-dimensional space
- a little bit of math for positioning things in that space
- how to transform objects in space
- rotation
- translation (moving)
- how color is made from red, green and blue lights (and why those colors are important, considering how our eyes work)
- how sound is made, and how we hear it
- how to imagine a fun, colorful animation, and program it
- some of the JavaScript programming language, and general programming concepts, including
- variables
- loops
- functions
- conditional logic
- random numbers