What problem did you set out to solve?
This project began with Shifman’s Nature of Code. I wanted to continue to improve my javascript and creative coding skills through this text, and attempting to mimic nature with code. This seems like a logical stepping stone from my snowflake project last semester.
However, about 1/3 of the way through, I ran into this incredible blog in our parametric design class. One algorithm, in particular, caught my eye, ‘spatial colonization’. After working through it in grasshopper, I decided it would be a great challenge to try and port this idea into javascript using the p5js library. Since these algorithms are some of the building blocks of the natural world(more on that in a bit) it seems like the perfect jumping-off point. The problem statement might be something like:
“How might I rewrite the spatial colonization algorithms, in P5JS?”
What is your project all about?
At its core, the project is about trying to interpret, seemingly chaotic natural systems into the unforgiving frameworks of code. As Joseph Claghorn put’s it on his Generative Landscapes blog:
“In Harvard-trained architect Peter Steven’s 1974 book Patterns in Nature, the author proposed that in 2- and 3-dimensional physical spaces, there are only a very limited number of possible configurations of elements, and that consequently nature is forced to reuse the same basic formal strategies in diverse contexts. The variety and diversity we perceive in nature comes not through innovative formal structures, but through topological deformations and hybrid configurations of the limited palette of possible spatial arrangements. (Stevens, 3-4) For example, according to Stevens, in 2D space there are only four strategies to connect a random group of points to each other without any overlap between points and without any redundant connections, i.e. where there is only one possible path between any two random points. He also proposed that these graphs corresponded to four archetypes for pattern formation in nature, each with certain efficiencies and drawbacks.”
Networks and Space Colonization, Joseph Claghorn.
The primary four methods for connecting a random set of points are:
Explosions/star
Tree
Meander
Spiral
How did you accomplish your goals?
Initially, I started by creating a particle system that I could use across the algorithms, based on some of the techniques outlined in the Nature of Code. From here I started with the meander algorithm, as it is best documented, and gave me a good template to follow in trying to translate functions from grasshopper to JS. After this, the explosion one took no time at all and was easily implemented. Then came the hard part: spiral and tree. I ended up getting spiral mostly working, besides a bug that pulled the wrong point, and but gave up on tree.
For most of the development process, I was using a local server, and using VS Code. Console Log became my best friend, and I became much more comfortable writing javascript as a whole.
What resources did you make use of?
Nature of Code book
P5JS Documentation – This was a life saver, and referenced daily.
Generative Landscapes blog, and particularly the pseudo code for each of the algorithms.
Mozilla Javascript documentation. Always helpful, when you can’t remember how the iterate through an array of objects, or implementing a sort function.
What challenges did you encounter and how did you overcome them?
The biggest hurdle I consistently ran into was how P5JS deal with rotation. The library is set up to always rotate around the point 0,0. This means that everything needs to be translated to the center every time. Unfortunately, my point particle system that created the points was not zero-based…trying to implement trig functions on a zero-based system while matching them to a single quadrant point system, was awful, and based on the existing error I was unable to overcome isn’t workable.
I did a really poor job of documenting my code and found myself forgetting what certain functions did, and continually rewriting parts. I also didn’t make use of the particle system object enough in some of my code.
What worked? What didn’t?
Worked: Explosion array, meander, getting much more proficient at javascript
What didn’t: P5JS rotation, well-documented code, user interface, and combining all the algorithms into a single page. Tree algo as a result of the zero-based issue struggling with recursion. Small bug fixes and missed points in meander. Implementing an easing function to make the visual display of the lines more compelling.
If this is a part of a larger long-term project, what milestones did you hit?
It wasn’t supposed to be, but with how much effort I’ve put into this, I want to get to the finish line, make this code publicly available, and ensure that this work is portfolio ready. I’d say I’m about 2/3rds of the way through and will continue working on it over the next semester.
What’s next for this project? (Future Work)
- Outstanding items:
- Bug: fix meander so all points are included
- Bug: fix spiral so it doesn’t pull points behind the current point in the rotation
- Rewrite: spiral using zero-based coordinates for all parts
- Finish: Tree algorithm, using recursion
- Utility: Clean up code and comment everything out
- UX/UI: New GUI
- UX/UI: make responsive & mobile friendly with touch buttons
- UX/UI implement easing function for line drawing
- UX/UI: combine all into single JS script, or single page with a toggle between them
What are your major takeaways? What did you learn / discover?
- Starting with pseudocode, and working little chunk at a time is much much much more efficient than trying to tackle everything at once.
- Variable naming is important, and bad names will kill you down the road
- Document and comment out your code. With a new baby and foggy brain it was really hard to remember what some things did.
- Build-in time to make it pretty and finished. I ran out of time on this, and as a result, the end product suffered.
Github Repo:
