This module, we are really digging into the foundational material for the class. Almost every example all semester long will make use of vectors! This is a chance to learn about what vectors are, how they work in p5.js, and practice coding with them.
For each module, I will provide written and video tutorials on the topics. You can review whichever format suits you best. If the amount feels overwhelming, please reach out and we can help you narrow things down, and select a subset of the material to focus an exercise around. It's a lot!
- 📗 Nature of Code p5.js edition draft Chapter 1: Vectors
- 🚂 What is a Vector? - 15 min
- 🚂 Vector Math - 12 min
- 🚂 Random Vectors - 9 min
- 🚂 Static Functions - 9 min
- 🚂 Unit Vector - 14 min
- 🚂 Acceleration - 11 min
For each module, I will provide a list of additional video tutorials and readings that you may draw on for further exploration. It's unlikely you would be able to consume everything in one week and if you are looking for guidance about what might fit with your interests and learning style the most, please reach out.
Following are videos on a variety of topics with code examples making use of vectors.
- 🚂 Drawing Object Trails—this example uses an array of vectors to store the history of an object. (19 min)
- 🚂 Horizontal Directional Drilling—an example of a simulation of a drill that makes use of vectors to store position and direction.
- 🚂 Snake Game—a basic "snake" game using vectors for the snake body and food position.
- 🚂 Ray Casting—basic ray casting engine that uses vectors for the "rays".
- 💻 Nature of Code Chapter 1 Book Example Collection
- 💻 Nature of Code Chapter 1 Video Example Collection
- 💻 Drawing Object Trails
Try using vectors! Here are some suggestions:
- Find any sketch you previously created in p5.js with separate
x,yvariables for elements on the sketch. Can you rewrite the sketch withcreateVector()for each of these pairs? For example, rework your sketch from week 1 and use vectors! Try incorporating the concept of acceleration. Can you create a methodology for calculating a dynamic acceleration, one that changes over time based on any number of factors? What is a random "acceleration" walk? - Zannah Marsh, illustrator for the Nature of Code book, created a guide to creature design with code. Consider creating your own creature design in p5.js and incorporating it into the
WalkerorMoverclass from any of the examples.
- Document your work on the web with a short blog post. Here are some guiding questions if you are not sure what to write about:
- What did you originally intend to create?
- Narrate the process of creating your sketch.
- What resources and examples did you draw on to create your sketch? What was most helpful / least helpful from this week’s materials.
- What problems/discoveries did you encounter along the way?
- Submit a link to your blog post to the course wiki.
The following emoji key will hopefully help you navigate the material for each module.
- 🚂 Video tutorial from Coding Train
- 🎥 Other video tutorial
- 📗 Nature of Code book
- 📕 Other reading
- 💻 Code examples
- 🎨 Creative project references