• Stars
    star
    229
  • Rank 174,666 (Top 4 %)
  • Language
    JavaScript
  • License
    Other
  • Created about 6 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 differential growth as a 2D morphogenesis tool.

Read my Medium article to learn more about differential growth and this project.

Additional media is available on my portfolio

This repo contains a series of visual experiments built with JavaScript that explore the topic of differential growth as a method for generating interesting 2D forms.

I am particularly interested in the application of such techniques in the context of digital fabrication, so these experiments will be more focused on schematic representations (colorless, vector-based, SVG/STL exports) over purely visual effects.

About differential growth

Differential growth is a process that uses simple rules to produce undulating, buckling forms that mimic or simulate similar forms found in the natural world. Meandering rivers, rippled surface textures of plants/seeds/fruits, space-filling behaviors of worms, snakes, intestines, and more are all reminiscent of this process, perhaps even making use of some of the same principles through physical and organic components.

The process itself can be described algorithmically at a high level by first supposing that we are starting with a single continuous path consisting of points (called nodes) connected by lines (called edges). In such a system, we apply the following rules:

  1. Each node wants to be closer to it's connected neighbors, and will experience an attraction force towards them.
  2. Each node wants to sit on a straight line between it's neighbors to minimize curvature.
  3. Each node must never be too close to any other node to prevent pinching or breaking of the overall continuity of the line.
  4. When the distance between two nodes exceeds a predefined distance (due to the influence of the other rules), a new node must be injected between them to split the line.
  5. New nodes are introduced to the system according to some growth scheme in order to induce asymmetry.
    • Without this rule the entire system would just uniformly expand and reach an equilibrium state.

Within these rules you can see several opportunities for customization that enable a certain amount of creative direction to be imposed by the developer. These include:

  • The maximum distance between connected nodes before their shared edge is split.
  • The minimum distance between all nodes.
  • The attraction force between connected nodes.
  • The repulsion force between nearby nodes.
  • The radius around each node used to calculate which nearby nodes have an influence on it.
  • A growth scheme that determines when and how new nodes are introduced to the system to induce interesting asymmetry.

Global keyboard controls

All of these keyboard controls are available in each experiment.

Key Result
1-9 Change initial seed path shape (if available)
t Toggle trace mode
n Toggle visibility of nodes
r Reset simulation with same parameters
Space Pause or unpause the simulation
i Toggle inverting of colors
d Toggle "debug mode"
f Toggle shape fills
h Toggle drawing of periodic path history
s Download an SVG of current geometry
b Toggle visibility of path bounds

Going further

This repository is more like a sketchbook, meant to contain some thematic scribbles on the topic of differential growth. I did not take a very rigorous approach in these experiments, opting to focus more on curiosity and effects than sheer performance and broader applications.

There are a lot of ways that the code I've written can be improved, or the algorithm itself explored more deeply, and I encourage you to take the next steps to expand upon what I've provided and create something new and awesome! Here are a few ideas that I've thought about exploring:

  1. Tune forces (attraction, repulsion, and alignment) to identify stable and interesting regions of the parameter space.
  2. Make optimization improvements to enable larger scales, without compromising too much in code readability.
    • Maybe a more efficient spatial index or nearest-neighbor algorithm can be found?
  3. Move into the third dimension. Many routes to explore here, including:
    1. Keep the simulation focused on 2D, but take snapshots on intervals and increment Z position for next iteration.
    2. Use a 3D package like ThreeJS and map the same 2D simulation onto the surfaces of 3D meshes.
    3. Explore professional-grade VFX and CAD options like Houdini, Unity, and Rhino + Grasshopper to achieve extreme performance.
  4. Port the code into a more performant language / framework like openFrameworks or Cinder. Even the Java-based Processing environment may show some performance gains!

References

Local install instructions

  1. Run npm install in both the root (/) and core/ folders.
  2. Run gulp to kick off a watch process and a browser window with LiveReload enabled.
  3. Keep Gulp running and the browser window open while making changes. If all goes well, new builds will kick off when you save your changes and the browser will refresh!

Packages used

  • p5js for canvas drawing and miscellaneous helper functions (like lerp and map).
  • rbush for a fast R-tree spatial index implementation
  • rbush-knn for k-nearest neighbors searching of rbush index
  • point-in-polygon for constraining nodes inside of bounding paths
  • svg-pathdata for extracting X,Y coordinates out of SVG <path> elements. Used to import SVG files.
  • svg-points for generating the d attribute of SVG <path> elements. Used to export SVG files from paths.
  • file-saver for initiating a download prompt when exporting SVG files
  • browserify, babel, and others for working with modern ES6 and module patterns.

Samples

Single line growth process

Triangle

Multiple shapes

SVG supershape as input

Opposing arcs converging

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-space-colonization-experiments

Visual experiments exploring space colonization as a 2D morphogenesis tool.
JavaScript
188
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