• Stars
    star
    188
  • Rank 205,563 (Top 5 %)
  • Language
    JavaScript
  • License
    Other
  • Created over 5 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Visual experiments exploring space colonization as a 2D morphogenesis tool.

Read my Medium article to learn more about the space colonization algorithm and this project.

Additional media is available on my portfolio

About space colonization

Space colonization is a process for iteratively growing networks of branching lines based on the distribution of growth hormone sources (called "auxin" sources) to which the lines are attracted. Originally described (PDF) by Adam Runions and collaborators at the Algorithmic Botany group at the University of Calgary, this system can be used to simulate the growth of leaf venation patterns and tree-like structures, as well as many other vein-like systems like Gorgonian sea fans, circulatory systems, root systems, and more.

The original algorithm describes methods for generating both "open" (as seen in the example GIF) and "closed" venation networks, referring to whether or not secondary or tertiary branches connect together to form loops (or anastomoses).

Algorithm at a glance:

For both the open and closed variants of this algorithm, begin by placing a set of points on the canvas representing sources of either the auxin growth hormone (as in leaves) or ambient nutrients (as in trees).

Open venation:

  • Associate each attractor with the single closest node within a pre-defined attraction distance.
  • For each node that is associated with at least one attractor, calculate the average direction towards them as a normalized vector and generate a new node that extends in that direction at a pre-defined segment length (by scaling the normalized direction vector by that length).
  • Remove any attractors that have nodes within a pre-defined kill distance around it.

Closed venation:

  • Associate each attractor with all of the nodes that are both within a pre-defined attraction distance and within the attractor's relative neighborhood.
  • For each node that is associated with at least one attractor, calculate the average direction towards them as a normalized vector and generate a new node that extends in that direction at a pre-defined segment length (by scaling the normalized direction vector by that length).
  • Remove any attractors that have been reached by all of their associated nodes.

Auxin flux canalization:

This is a process by which veins become thicker as they grow longer. The longer a vein gets, the more auxin flows through it ("flux"), causing veins to progressively thicken from their tips to their roots. "Canalization" references the process by which "canals" of water form.

  • Give each branch segment a uniform default thickness to start with.
  • Beginning at each terminal node (that is, segments with no child segments), traverse "upwards" through each parent node, adding their child node thickness to their own until you reach a root node (a segment with no parent segment).

Features

  1. Supports both open and closed venation. Configurable via ./core/Defaults.js or a local Setting.js file.
  2. Growth can be constrained within bounding shapes. See ./core/Path.js and ./core/Network.js.
  3. Obstacles can be defined that growth must avoid. See ./core/Path.js and ./core/Network.js.
  4. Simple SVG files can be loaded and parsed into either "bounds" or "obstacle" paths. See ./core/SVGLoader.js.
  5. Attractors can be placed along the edges of paths, which can in turn be scaled and moved, in order to model marginal growth. See ./marginal-growth/js/entry.js.
  6. Multiple vein networks can be created (just add more than one "root" vein to kick off growth).
  7. Veins can be progressively thickened as they grow using a process called auxin flux canalization. Press c in any sketch to toggle it.
  8. Vein transparency can be smoothly blended from tip to root using opacity blending (a variation of auxin flux canalization). Press p in any sketch to toggle it.
  9. Vein networks can be exported using e at any time. However, these networks get so complex so quickly that this can easily cause your browser to freeze - use at your own risk!

Implementation notes

See ./core for common modules:

  • Attractor.js - location of a single source of auxin growth hormone or other growth-promoting influence
  • Network.js - manages the growth of nodes based on attractors and provided bounds and obstacles
  • Path.js - arbitrary path consisting of points, used for either constraining growth ("bounds") or defining areas for growth to avoid ("obstacle").
  • AttractorPatterns.js - functions for generating attractors arranged in various patterns (grids, noise, etc)
  • Node.js - a single point in a branch

A couple additional helper modules are also included there:

  • KeyboardInteractions.js - a structure for handling common keyboard commands that every sketch should have
  • Utilities.js - small helper functions like random and lerp
  • ColorPresets.js - collection of pre-made color palettes for use in Defaults.js
  • Defaults.js - collection of global variables used for configuring the behavior and display of the algorithm
    • Any variable can be overridden on a per-sketch basis using a local Setting.js file
  • SVGLoader.js - utility for loading and parsing simple SVG documents to create Paths

Technologies used

Packages used

  • KDBush for KD-tree based spatial index
  • vec2 for simple, fast 2D vector math
  • Webpack for modern JS (ES6) syntax, code modularization, bundling, and serving locally.

Install and run notes

  1. Run npm install to get all packages
  2. Run npm run serve to start up Webpack and launch the application in a browser window

References

Articles and papers:

Creative projects:

Code projects:

Videos:

Screenshots

Basic experiment screenshot

Bounds experiment screenshot

Obstacles experiment screenshot

Marginal growth experiment screenshot

More Repositories

1

morphogenesis-resources

Resources on the topic of digital morphogenesis (creating form with code). Includes links to major articles, code repos, creative projects, books, software, and more.
1,997
star
2

2d-differential-growth-experiments

Visual experiments exploring differential growth as a 2D morphogenesis tool.
JavaScript
229
star
3

reaction-diffusion-playground

Interactive reaction-diffusion simulation with organic patterns and behaviors that emerge from the interactions of two chemicals mixed together.
JavaScript
148
star
4

SuperformulaSVG-for-web

A generative line art web app using the 2D superformula, with support for SVG and raster exporting.
JavaScript
69
star
5

SurfaceMapperGUI

A simple projection mapping interface using Processing's SurfaceMapper and ControlP5 libraries.
HTML
64
star
6

2d-diffusion-limited-aggregation-experiments

Visual experiments exploring diffusion-limited aggregation (DLA) as a 2D morphogenesis tool.
JavaScript
59
star
7

SuperformulaSVG

2D superformula line-art generator built in Processing, with SVG export for use in digital fabrication workflows.
Processing
51
star
8

2d-voronoi-experiments

Visual experiments exploring 2D voronoi diagrams for simple diatom/radiolaria patterns.
JavaScript
28
star
9

Genmitsu-PROVerXL-4030-Enclosure

Parts lists and CAD files for a DIY aluminum extrusion enclosure with a slide-out drawer and a table for the 4030 CNC router.
20
star
10

cellular-automata-explorer

(WIP) An interactive web app for exploring cellular automata.
JavaScript
18
star
11

tc-maker-4x4-router

Restoration and documentation of custom-built 4x4' CNC router at Twin Cities Maker hackerspace (aka the Hack Factory) in Minneapolis, MN.
C
15
star
12

Jar-of-Fireflies

Mason jar with interactive LEDs that mimic fireflies on a warm summer night, realized with an Arduino-enabled ATTiny85, multiple power options and a sensor interface.
C++
14
star
13

dashboard-for-everybody

Demo project of a real-time data dashboard showing effective design and dev techniques for making complex interfaces accessible for people with disabilities
HTML
13
star
14

openSipPuff

Simple, low-cost "sip and puff" USB interface for expressive interactions, enabling breath-based control of keypresses, mouse actions and much more using USB HID.
C++
11
star
15

unity-space-colonization

Unity implementation of the space colonization algorithm to generate organic branching structures.
C#
11
star
16

revealjs-subtitles

A Reveal.js plugin to add real-time subtitles to presentations
JavaScript
7
star
17

wall-plotter

Interactive wall plotter platform
5
star
18

superformulabot

A generative art Twitter bot using the 2D superformula. Tweets new drawings every couple hours, and responds to @mentions with custom drawings.
JavaScript
4
star
19

dla-sandbox-for-unity

Unity project exploring 3D diffusion-limited aggregation (DLA) with high-res photogrammetry scans
C#
3
star
20

flat-pack-corner-table

Design files and documentation for a custom-designed flat-pack, no-fastener corner table.
3
star
21

How-to-Build-Almost-Anything-Fall-2015

Courseware and student content from "How to Build Almost Anything" course at Metropolitan Community College's FabLab in Omaha, NE
3
star
22

jasonwebb.io-theme

WordPress theme for personal portfolio website
PHP
2
star
23

BacKey-for-MaKey-MaKey

BacKey for MaKey MaKey
2
star
24

Augmented-Reality-Pong

Table-top augmented reality pong using IR markers and projectors
C++
2
star
25

minecraft-interface

Arduino firmware for real-life Minecraft interface
Arduino
2
star
26

PaintingSpinner

Arduino-based hardware platform for interactively spinning a painting using a DC motor.
Arduino
1
star
27

making-the-web-work-for-everyone-talk

Talk on web accessibility for developers (2019)
JavaScript
1
star
28

Lumiboard

Open-source, Bluetooth-enabled, ambient-aware LED controller platform
Arduino
1
star
29

OMEGA-2

Interactive spaceship-themed control panels for OMEGA-2 Burning Man artcar
Eagle
1
star
30

jasonwebb

1
star