Welcome to the Nature of Code 2.0! In this video, I give an overview of the playlist and The Nature of Code book (originally published in 2012).

Welcome again to Nature of Code! Here, I give a quick overview of the “Introduction” section of The Nature of Code.

Welcome to Nature of Code Chapter 1: Vectors! What is a vector? How do they work in p5.js? These questions will all be answered in this first section of this series on p5.Vector.

This video covers the very basics of vector math focusing on vector addition and looks at how to apply the concept of velocity to a position vector in the random walker example.

This video covers how to initialize a p5 vector with p5.Vector.random2D().

In this video, I discuss the difference between static and instance functions in JavaScript and how they are used in the p5.Vector class.

In this video, I explain the concept of a “unit vector,” what it means to “normalize” a vector, and take a look at the p5.js functions: p5.Vector.mag(), p5.Vector.normalize(), p5.Vector.setMag().

In this video, I add an “acceleration” vector to the Mover object and create an example where the object accelerates towards the mouse location. This is the foundation on which I will build for implementing forces in the next chapter!

In this video I introduce Newton’s Laws of Motion, and apply the concept of a “force” to a p5.js sketch with a mover object and two forces: gravity and wind.

In this video, I add a mass property to the Mover class and examine how a mass property impacts gravity and wind forces.

In this video, I cover how to read the formula for kinetic friction and incorporate it into a p5.js sketch with the Mover applyForce() function.

In this video I implement the formula for a “drag” force with p5.js (also known as air resistance or fluid resistance) and similar objects falling into a liquid.

In this video, I demonstrate how to apply Newton’s Law of Universal Gravitation in p5.js using vectors and forces.

Finishing off Chapter 2 on forces, let’s look at an “N-Body Simulation” where all movers experience gravitational attraction with all other movers!

Welcome to Chapter 3 of The Nature of Code: Oscillating Motion! I begin in this video by explaining angles, the different units of measurements for angles: degrees and radians, and how to rotate shapes in p5.js.

In this video, I explain how to apply the concepts of vector motion to angles (scalar!). Then I demonstrate how to rotate with angular motion in a p5.js sketch!

In this video, I tackle a common question, how do you draw an object pointing in the direction it’s moving? I demonstrate how to calculate the angle associated with the direction vector as well as create an vector from an angle in p5.js.

It’s finally time to dive into the trigonometric functions—sine, cosine, tangent—and take a close look at thinking in polar coordinates with p5.js!

What is a sine wave? In this video, I demonstrate how to use the sin() function in p5.js to simulate simple harmonic motion.

What does a sine wave look like? In this video I look at how to graph and animate a sine wave in p5.js varying the period and phase.

This video builds on the previous sine wave visualization in p5.js example. Here, I build a Wave class with variables for period, amplitude, and phase, and demonstrate how to add multiple wave patterns together!

Welcome to Chapter 4 of The Nature of Code: Particle Systems! I begin by coding a simple particle system in p5.js. I convert the Mover class into a Particle class, add a lifetime property, and organize a collection of particles into an array.

In this video, I add an Emitter class to further organize the array of particles and allow for multiple particle systems in a p5.js sketch.

Have you ever wondered how the concepts of inheritance and polymorphism fit into the Nature of Code Particle system examples in p5.js?

It’s time to expand beyond grayscale particles! In this video I demonstrate how to make a fire or smoke-like effect by using image textures and additive blending with a particle system.

Chapter 5! Or is it 6? In this video, I discuss the concept of an autonomous agent and provide an overview of the JavaScript / p5.js coding examples to come.

This video explores Craig Reynolds’ formula for Steering Behaviors in JavaScript (p5.js) beginning with “Seeking a Target.”

Continuing my quest to explore all the steering behaviors from Craig Reynolds’ 1999 paper, in this video I tackle flee, pursue, and evade (all in JavaScript with p5.js).

It’s finally time for me to tackle a JavaScript (p5.js) implementation of the “arrival” steering behavior from Craig Reynolds’ 1999 paper Steering Behaviors For Autonomous Characters!

Craig Reynolds’ “Wander” steering behavior is one of my favorites! In this video, I implement my take on it in JavaScript with p5.js and encourage you to invent your own version!

This video covers the dot product and scalar projection with p5.js and vectors, concepts that I’ll need for finding the distance between a point and a line which will lead to the path following steering behavior in the next video!

Continuing the quest to implement all of Craig Reynolds’ steering behaviors in JavaScript with p5.js, in this video I tackle path following!