2023 January Project

REPO: https://github.com/carlynorama/2023January-30DaysNatureOfCode

There is an official Genuary process that involves lots of really cool prompts, etc, but I'm too rusty. What better way to get back into the creative coding groove than follow along with Daniel Shiffman's Nature of Code 2 playlist?

Other resources are listed on the individual day pages.

Full Day List

Selected Sketches

Day 1: Random walker.

Day 4: Simple drag force.

Day 06: Bounds detection "game." Making sure I have bounds detection working with my Bounds class. Move the smaller box into the bigger box and see what happens.

Day 9: Quadtree, mover clears circular region.

Day 12: Polar coordinates x 2D noise motion.

Day 17: Connected springs. the green disc by clicking on it and swirl it around while holding down the mouse.

Day 20: Attraction and repulsion. Move the mouse over the sketch to watch the objects move away from the mouse, then return home.

Day 21: Wanderer.

Day 23: Path follower.

Day 24: Cellular Automata. A contrived example that starts with known stable examples on paths that won't collide.

Day 26: Branching tree. Type "t" to get the tree to grow. May require clicking on the sketch to give it focus.

Day 29: Generational fitness visualization. Code "evolves" the phrase "To be or not to be." The colors are the generation count. The y postion the dota and the lines come from the fitness of the guess (dot) or the generations average(line).

Take-Aways from the Process

JavaScript remains the lingua franca of the web-front-end, and therefore the most sharable of the languages to do creative coding in. That I really value, so it was worth it to flex those muscles again.

The limited time frame of a 30 day binge format helped convince me to do this because I don't enjoy JavaScript. TypeScript gave JavaScript some complier like "guard rails", as they say, and that helped me a lot. However that added significant overhead to the setup, so my drop-dead simple little repo now has node.js all up in it. Trade-offs. ¯\_(ツ)_/¯

A 30 day binge doesn't really give breathing room to the concepts. It's just enough to get a tweak on the examples working but not much further. Would recommend a week at least per chapter as per the course syllabus.

About this Repo / Using P5js

Under most circumstances, don't follow my example. Instead use the fabulous online editors:

That said, I prefer to have my tool chains be functional offline so I made a repo. Originally the whole repo was only what is now in the docs folder. On my computer I'd cd into the the directory that had the repo, type python3 -m http.server and browse away. Since it already was a website, I enabled git-hub pages.


In the beginning weeks (wow, did I say weeks, it was really 10 days & a Quadtree) I really really really was missing working in a strongly typed language so I decided to migrate to TypeScript. The bulk of the files now live in the docs folder, with JUST the .ts files living in the src folder.

Steps I took to convert the repo.

To avoid typescript complaining about redeclarations of draw, sketch, etc. my current process is that every time I start a new sketch I point the include line at the end of .tsconfig to that sketch e.g.

"include": ["global","src/28-genetic-algorithms/03-novelty-score"]

site-gen (python)

Making the HTML files for every sketch and and every day was getting kind of irritating, so I wrote a small static site generator.

It has its own repo small-ssg

Misc Reusable Classes