Vanilla Nature of Code
Table of Contents
2025-04-08, Tue
I first came into "The Nature of Code" book1 authored by Daniel Shiffman several years ago in a second-hand bookstore and was instantly hooked by its design and topic. Now that the whole book is available online, I figured it's a good time to play code snippets in the book with vanilla JavaScript. This post intends to record the progress of the playthrough as well as hiccups that have been encountered.
1. Preparation
The Org-Mode export
settings2, 3 like #+HTML:
and #+BEGIN_EXPORT HTML are used in this post to wire JavaScript
into the exported HTML page. To warm up, let's set up some
canvases4 to see whether things work. Click
the draw button below to see the first paint result: a welcome
message, along with several color blocks.
Following canvas shows a rudimentary color palette.
Another example of color change propagation:
With things set up properly, it's time to go through examples and figures in the book.
2. Randomness
Example 0.1: A Tranditional Random Walker
Example 0.2: A Random-Number Distribution
Example 0.3: A Walker That Tends to Move to the Right
Example 0.4 A Gaussian Distribution
Example 0.4 An Accept-Reject Distribution
Figure 0.4 A Graph of Perlin noise values over time (left) and random noise values over time (right)
Example 0.6 A Perlin Noise Walker
Figure 0.9: Each pixel represents a noise value as a grayscale color
3. Vectors
Example 1.1: Bouncing Ball with No Vectors
Example 1.2: Bouncing Ball with Vectors
Example 1.3: Vector Subtraction (Hover cursor over canvas to see result)
Example 1.4: Multiplying a Vector (Hover cursor over canvas to see result)
Example 1.5: Vector Magnitude (Hover cursor over canvas to see result)
Example 1.6: Normalizing a Vector (Hover cursor over canvas to see result)
Example 1.7: Motion 101 (Velocity)
Example 1.8: Motion 101 (Velocity and Constant Acceleration)
Example 1.9: Motion 101 (Velocity and Random Acceleration)
Example 1.10: Accelerating Toward the Mouse
4. Forces
Example 2.1: Forces (click on canvas to apply wind)
Example 2.2: Forces Acting on Two Objects
Example 2.3: Gravity Scaled by Mass
Example 2.4: Including Friction
Example 2.5: Fluid Resistance
Example 2.6: Attraction
Example 2.7: Attraction with Many Movers
Example 2.8: Two-Body Attraction
Example 2.9: n Bodies
5. Oscillation
Example 3.1: Angular Motion Using rotate()
Example 3.2: Forces with (Arbitrary) Angular Motion
Example 3.3: Pointing in the Direction of Motion
Example 3.4: Polar to Cartesian
Exercise 3.5: Spiral Path
Exercise 3.6: Asteroids
Example 3.5: Simple Harmonic Motion I
Example 3.6: Simple Harmonic Motion II
Example 3.7: Oscillator Objects
Example 3.8: Static Wave
Example 3.9: The Wave
Exercise 3.11: Wave Class
Exercise 3.12: Multiple Waves
Example 3.10: A Spring Connection
Example 3.11: Swinging Pendulum
Exercise 3.15: Double Pendulum (with glitches)
6. Particle Systems
Example 4.1: A Single Particle
Example 4.2: An Array of Particles
Example 4.3: A Single Particle Emitter
Example 4.4: A System of Systems (Try to click on canvas)
Example 4.5: A Particle System with Inheritance and Polymorphism
Example 4.6: A Particle System with Forces
Example 4.7: A Particle System with a Repeller
Example 4.8: An Image-Texture Particle System
Example 4.9: Additive Blending
7. Autonomous Agents
Example 5.1: Seeking a Target
Exercise 5.3: Pursue & Evade
Example 5.2: Arriving at a Target
Exercise 5.4: Reynold's Wandering Behavior
Example 5.3: "Stay Within Walls" Steering Behavior
Figure 5.13: A 2D grid full of unit vectors pointing in random directions
Figure 5.14: A flow field with all vectors pointing to the right
Figure 5.15: A flow field with vectors pointing in random directions
Figure 5.16: A flow field calculated with Perlin noise
8. Revision History
- 2025-04-08 (Tue): Introduce chapter Randomness and Vectors
- 2025-05-09 (Fri): Introduce chapter Forces and Oscillation
- 2025-05-19 (Mon): Introduce chapter Particle Systems
Footnotes:
Nature of Code, by Daniel Shiffman: https://natureofcode.com
HTML specific export settings: https://emacsdocs.org/docs/org/HTML-specific-export-settings
Quoting HTML tags: https://emacsdocs.org/docs/org/Quoting-HTML-tags
Some examples are provided by MDN as tutorials, e.g. Basic Usage of Canvas https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage,