Git Product home page Git Product logo

jasonwebb / 2d-space-colonization-experiments Goto Github PK

View Code? Open in Web Editor NEW
186.0 5.0 16.0 7.17 MB

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

Home Page: https://jasonwebb.github.io/2d-space-colonization-experiments/

License: Other

HTML 4.85% JavaScript 94.42% CSS 0.72%
javascript 2d creative-coding morphogenesis generative-art space-colonization-algorithm hyphae leaf-venation space-colonization

2d-space-colonization-experiments's Introduction

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

2d-space-colonization-experiments's People

Contributors

jasonwebb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

2d-space-colonization-experiments's Issues

Improve branch thickness implementation

Right now the thickness of a branch is varied per segment by setting the stroke thickness of the line that gets drawn. This has a side effect of causing the segments not to join up perfectly since each segment is a discrete line with its own thickness. This problem is especially visible when there are sharp angles between segments.

Look into implementing branch thickness in a continuous way, maybe using ribbons or isolines.

Create a playful UI for non-technical users

See Defaults.js for a list of global parameters that can be changed within sketches for different effects.

Feature wishlist

  • Toggle type of venation - open or closed.
    • VenationType = values are either 'Open' or 'Closed'
  • Draw simple primitive shapes and set them as either "bounds" or "obstacle" shapes
    • A simple MS Paint kind of interface would be just fine
    • These shapes would be Path objects assigned to the Network through the internal arrays network.bounds and network.obstacles
    • Auxin sources should only be allowed to spawn inside of bounds, and outside of obstacles. Sources may need to be reset when a bounds or obstacle is added or changed.
  • Allow freehand drawing of bounds or obstacle shapes
    • Click and hold to draw shape
    • All paths must be closed, so maybe automatically connect the last point to the first point on mouse up
  • Allow users to paint auxin sources with their mouse (these are what the veins grow towards)
  • Toggle auxin flux canalization (vein thickening) (see EnableCanalization)
  • Toggle opacity blending (see EnableOpacityBlending)
  • Click to add root vein nodes
    • BONUS: integrate a color picker so veins can be colored differently
  • Buttons to start, stop, or reset the simulation (see IsPaused and the resetNetwork() method in any sketch)
  • Custom colors for background, veins, bounds, and obstacles
    • See Colors variable, which references objects stored in ColorPresets.js
  • Buttons to toggle visibility of veins, bounds, obstacles, and other effects (see Defaults.js)
  • Rendering style - either 'Lines' or 'Dots' (see VeinRenderMode)

Advanced features

  • Attraction zone radius
    • See AttractionDistance
    • Smaller values can improve performance, but will also make things look slightly different.
  • Kill zone radius
    • See KillDistance
    • Higher values tend to improve performance but creates visible gaps in the "closed" venation style.
  • Vein thickness
    • See VeinThickness
  • SVG export would be cool, but the current export process doesn't cope well with large vein networks, which happen a lot. If it can be improved, this would be a good feature to expose in the UI.

Find way to fully join converging veins

Right now multiple veins that are converging on a single source do not actually connected together once they enter the source's kill zone. With a sufficiently small kill zone the veins can appear to be joined, but actually aren't.

My intuition is that once veins enter the kill zone of a source, they are more or less pointed straight at the center of the source. So maybe the veins can be extended with a straight line segment to reach the source's center.

SVG export

Hi Jason,
On the obstacles experiment, I am not able to get a working SVG exported using "e".

Find way to keep distant auxin sources alive in closed venation

Right now for closed venation, any sources that are not influencing any nodes are immediately removed. This causes vein clusters to be pretty small and not grow indefinitely.

Try adding a "fresh" flag when the sketch starts, then set to false when it begins influencing nodes so it only disappears after its influenced some.

Add License Info

Hello,

great repo and article! I think adding a license could be helpful for people that want to use the code properly.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.