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?
- Nature of Code 2 Playlist: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZV4yEcW3uDwOgGXKUUsPOM
- NoC 1: https://natureofcode.com/
- https://editor.p5js.org/codingtrain/
- https://www.youtube.com/@TheCodingTrain
- https://thecodingtrain.com
- https://shiffman.net/
- https://github.com/nature-of-code <- includes syllabus for course taught at NYU/ITP
Other resources are listed on the individual day pages.
Full Day List
- Day 1: Introduction, Randomness, Videos 1-9, 16. Summary page has all the sketches from the day running. It can pull a lot of power.
- Day 2: Chapter 1, p5js Vectors, Videos 10-15. On the summary page the sketches only run if the mouse is over it. That is also true on the sketch pages, excpet on the last day I figured out how to tell if it was embedded or not.
- Day 3: Part 1 of Chapter 2, force basics, Videos 17-19
- Day 4: Part 2 of Chapter 2, Drag & Gravity, Videos 20-22
- Day 5: QuadTree interlude. Mentioned in video 22. From a Coding Challenge.
- Day 6: QuadTree clean up, with motion in the demo now. Also some bounds prep to keep going.
- Day 7: QuadTree bounds query success!
- Day 8: QuadTree query whether a point value is in the quadtree, access all the values within a radius of a point.
- Day 9: Can remove points and regions of points from a quadtree.
- Day 10: Made it to Video 3 look-alike. Found a glitch when I tried to add mover. Last stop on this line for now!
- Day 11: In case I ever take on something like a quadtree again, repo now has a TypeScript staging area. Also a little bit from the Chapter 3 videos.
- Day 12: Continue with the circular motion studies (first part Ch. 3) combining TypeScript, blobby, a new PolarMover object.
- Day 13: More with NoiseLoops, but now making them "recordable"
- Day 14: Lots of TypeScript meta today to get an outside library for OpenSimplex noise working.
- Day 15: Oscillation from Chapter 3 videos 5, 6 and 7
- Day 16: Pendulums via Chapter 3 section's reference to Coding Challenge #159
- Day 17: Simple spring systems referencing Coding Challenge #160
- Day 18: Starting Chapter 4 with some simple particle system work, and
also some website meta. Check out the new files in
site-gen - Day 19: Wrapping up Chapter 4 with refactored particle. Also some
improvements to
controller.ts - Day 20: Start Chapter 5, Autonomous Agents
- Day 21: The Wanderer
- Day 22: Scalar projection visualization and some Vector class refactoring. Breaking changes.
- Day 23: Path following and hue table and triangle bounds detection, Oh my!
- Day 24: No more videos in the Nature of Code 2 playlist, start Chapter 7 anyway following V1.
- Day 25: Part one of Chapter 8, basic recursion and start of fractals. Mostly just copying the processing -> p5js / TypeScript.
- Day 26: Simple Trees and an L-System
- Day 27: Before going elbow deep into chapter 9, understanding Rejection Sampling.
- Day 28: Getting the "To be or not to be." example working, trying to add a "novelty bonus."
- Day 29: No coding for me today, but lots of sleeping and watching. Links provided.
- Days 30 & 31: Repo clean up.
Selected Sketches
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 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 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.
- Favorite Nature of Code things: using noise to create motion, the quadtree, boids.
- Favorite Meta: The little static site generator, getting a TypeScript workflow up and running, having a coding journal.
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.
TypeScript
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