quaintitative

Generative Coding - The Nature of Code Ported to Three.js

Daniel Shiffman’s Nature of Code book introduced me to the world of generative coding. This port of his Nature of Code examples to three.js is kind of my homage to the book.

I’ve not reproduced every single example, but rather the key ones in each chapter. These should be more than enough for anyone to understand how to code all his examples in three.js.

I’ve also not followed the styles and colors faithfully, but rather added some of my own flourishes.

The listing is below. First link in each set is the demo, and the second link is the github repo with the code.

Chapter 0 In this chapter, Daniel introduces one to the beauty of randomness.

• https://playgrdstar.github.io/noisy_movement_threejs/
• https://github.com/playgrdstar/noisy_movement_threejs

Chapter 1 In this chapter, Daniel shows us how to create a bouncing ball.

• https://playgrdstar.github.io/bouncing_threejs/
• https://github.com/playgrdstar/bouncing_threejs

Chapter 2 In this chapter, Daniel shows us how to recreate real world forces in the digital space.

• https://playgrdstar.github.io/forces_threejs/

• https://github.com/playgrdstar/forces_threejs

• https://playgrdstar.github.io/attraction_threejs/

• https://github.com/playgrdstar/attraction_threejs

• https://playgrdstar.github.io/fluid_threejs/
• https://github.com/playgrdstar/fluid_threejs

Chapter 3 In this chapter, we learn how to make things go round and round.

• https://playgrdstar.github.io/oscillation_threejs
• https://github.com/playgrdstar/oscillation_threejs

Chapter 4 In this chapter, Daniel teaches how to create little universes of particles.

• https://playgrdstar.github.io/particlesystem_threejs/
• https://github.com/playgrdstar/particlesystem_threejs

Chapter 5 In this chapter, we see how to manipulate groups of particles and give them some life.

• https://playgrdstar.github.io/flowfield_threejs/

• https://github.com/playgrdstar/flowfield_threejs

• https://playgrdstar.github.io/pathfollowing_threejs/

• https://github.com/playgrdstar/pathfollowing_threejs

• https://playgrdstar.github.io/separateseek_threejs/

• https://github.com/playgrdstar/separateseek_threejs

• https://playgrdstar.github.io/flocking_threejs/
• https://github.com/playgrdstar/flocking_threejs

Chapter 7 In this chapter, we see how life came about.

• https://playgrdstar.github.io/wolfram_ca_threejs/

• https://github.com/playgrdstar/wolfram_ca_threejs

• https://playgrdstar.github.io/gameoflife_threejs/
• https://github.com/playgrdstar/gameoflife_threejs

Chapter 8 In this chapter, we get introduced to fractals.

• https://playgrdstar.github.io/recursion_threejs/

• https://github.com/playgrdstar/recursion_threejs

• https://playgrdstar.github.io/fractaltree_threejs/

• https://github.com/playgrdstar/fractaltree_threejs

• https://playgrdstar.github.io/koch_threejs/

• https://github.com/playgrdstar/koch_threejs

• https://playgrdstar.github.io/LSystem_threejs/
• https://github.com/playgrdstar/LSystem_threejs

Chapter 9 In this chapter, we create things that evolve!

• https://playgrdstar.github.io/geneticalgorithm_threejs/
• https://github.com/playgrdstar/geneticalgorithm_threejs

Articles

Comparing Prompts for Different Large Language Models (Other than ChatGPT)

AI and UIs

Listing NFTs

Extracting and Processing Wikidata datasets

Extracting and Processing Google Trends data

Extracting and Processing Reddit datasets from PushShift

Extracting and Processing GDELT GKG datasets from BigQuery

Some notes relating to Machine Learning

Some notes relating to Python

Using CCapture.js library with p5.js and three.js

Introduction to PoseNet with three.js

Topic Modelling

Three.js Series - Manipulating vertices in three.js

Three.js Series - Music and three.js

Three.js Series - Simple primer on three.js

HTML Scraping 101

(Almost) The Simplest Server Ever

Tweening in p5.js

Logistic Regression Classification in plain ole Javascript

Introduction to Machine Learning Right Inside the Browser

Nature and Math - Particle Swarm Optimisation

Growing a network garden in D3

Data Analytics with Blender

The Nature of Code Ported to Three.js

Primer on Generative Art in Blender

How normal are you? Checking distributional assumptions.

Monte Carlo Simulation of Value at Risk in Python

Measuring Expected Shortfall in Python

Style Transfer X Generative Art

Measuring Market Risk in Python

Simple charts | crossfilter.js and dc.js

d3.js vs. p5.js for visualisation

Portfolio Optimisation with Tensorflow and D3 Dashboard

Setting Up a Data Lab Environment - Part 6

Setting Up a Data Lab Environment - Part 5

Setting Up a Data Lab Environment - Part 4

Setting Up a Data Lab Environment - Part 3

Setting Up a Data Lab Environment - Part 2

Setting Up a Data Lab Environment - Part 1

Generating a Strange Attractor in three.js

(Almost) All the Most Common Machine Learning Algorithms in Javascript

3 Days of Hand Coding Visualisations - Day 3

3 Days of Hand Coding Visualisations - Day 2

3 Days of Hand Coding Visualisations - Day 1

3 Days of Hand Coding Visualisations - Introduction