jasonwebb / 2d-space-colonization-experiments

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

Hi there 👋 I'm Jason.

         

I'm a freelance creative developer building immersive experiences for mission-driven institutions and brands. In my free time I explore digital morphogenesis with code and digital fabrication. My skillset and areas of interest include:

• ✨ Experiential media like interactive installations (sculptures, LED walls, projections, etc), museum + science center exhibits, or fine art pieces.
• 🎨 Creative coding with JavaScript, ThreeJS, shaders, and more.
• 🥽 AR / VR / XR with 8th Wall and the WebXR API.
• 💻 Front-end development with HTML, CSS, and either vanilla ES6+ JavaScript or React.
• ♿ Accessibility through close collaboration with disabled users and devs, clean + semantic HTML, manual testing with JAWS + NVDA + other AT, understanding and adhering to WCAG 2.0/2.1 level AA, and the occassional dash of ARIA.
• 🤖 Digital fabrication with 3D printing, CNC milling/routing, and laser cutting. I ❤️ Grbl!
• 🕹️ Physical computing using the Arduino platform and (simple) custom PCBs.

✍ Writing

One of the best ways I know to learn something is by explaining it to others. Here are a few of the things I've written about:

• Modeling organic branching structures with the space colonization algorithm and JavaScript
• Simulating 2D diffusion-limited aggregation (DLA) with JavaScript
• Exploring 2D differential growth with JavaScript

Projects

For the past two years I have been researching and implementing (👇) simulation models for natural systems that can help explain how nature creates the amazing shapes, patterns, and forms that it does. I'm nearly finished building out most of the most well-known systems in 2D, and will be making the leap into 3D sometime this year (2021)!

2d-space-colonization-experiments's Issues

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.

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.

Implement auxin flux canalization

Veins get thicker as their number of child nodes increases.

Implement per-cluster colors

Set a color on a root note, then pass it down to all child nodes via VeinNode.getNextNode()

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".

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.

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.