Git Product home page Git Product logo

mimetikxs / 2d-diffusion-limited-aggregation-experiments Goto Github PK

View Code? Open in Web Editor NEW

This project forked from jasonwebb/2d-diffusion-limited-aggregation-experiments

0.0 0.0 0.0 19.46 MB

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

Home Page: https://jasonwebb.github.io/2d-diffusion-limited-aggregation-experiments/

JavaScript 75.20% CSS 2.62% HTML 22.18%

2d-diffusion-limited-aggregation-experiments's Introduction

Read my Medium article to learn more about diffusion-limited aggregation 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 diffusion-limited aggregation (DLA) 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 diffusion-limited aggregation

Diffusion-limited aggregation (DLA) is a process in which randomly-moving particles diffuse through a medium and clump together (aggregate) over time to form long, fractal, branch-like chains (sometimes called Brownian trees). It closely models various interesting phenomena seen in nature at different scales and in different mediums.

A classic example is that of the formation of copper sulfate crystals in the presence of an electrodeposition cell. When electricity is applied, individual copper atoms are stripped from the system's anode and randomly float (diffuse) through the liquid medium until they come in contact with other copper atoms that have accumulated on the system's cathode where they form a strong molecular bond and aggregate over time.

Another example can be seen in the rather more violent phenomena of Lichtenberg figures, wherein an electrical discharge of very high voltage travels through an insulator like wood, burning a curious fractal branching structure in it's wake. In this example, it would seem that the electrical discharge itself diffuses through the wood, limited by the insulating nature of the wood, forming an "aggregate" of burnt wood as it progresses.

A note on lattices and parameterization

In classical implementations this algorithm acts upon a regular 2D grid of pixels wherein each "particle" can have up to 8 neighbors. Though simplistic, this so-called "on-lattice" approach can run at blistering speeds because no expensive distance calculations, spatial indexing, or collision detection is required - just array lookups.

However, this approach results in an inherently low fidelity raster image that has a pretty characteristic aesthetic style and limited usefulness in modern digital fabrication workflows. In the world of digital fabrication vector-based graphics are preferred because they can be easily transformed into machine toolpaths and manipulated in interesting ways in CAD software.

To achieve vector-based results from the DLA process one must move away from pixels and towards particles, which also affords one the ability for more parameterization that can be fun to explore creatively. For example, one could vary the size, shape, and movement behaviors of these particles to achieve interesting effects.

Keyboard commands

Key Result
w Toggle visibility of walkers
c Toggle visibility of clustered particles
s Toggle visibility of custom SVG shapes
r Restart simulation
f Toggle frame
l Toggle line rendering effect
e Export and initiate download of current drawing as SVG file
t Toggle visibility of helpful text
Space Pause/unpause simulation

Parameters

Parameter Value Default Description
CircleDiameter Number 5 Default size of walkers, if none is provided through local Settings.
InitialClusterType Point, Ring, Random, or Wall Point Default initial cluster pattern, if none is provided through local Settings.
ShowClusters Boolean true Visibility of clustered particles on load.
ShowWalkers Boolean true Visibility of walkers on load.
ShowShapes Boolean true Visibility of custom SVG shapes on load.
MaxWalkers Number 20000 Maximum number of walkers - lower numbers mean better performance, but fewer hits.
WalkerSource Edges, Circle, Random, Random-Circle, or Center Center Where new walkers are spawned.
ReplenishWalkers Boolean false Add new walkers whenever they become stuck to clusters.
BiasTowards Top, Bottom, Left, Right, Edges, Center, Equator, or Meridian Center Direction to move all walkers each iteration.
BiasForce Number 1 Magnitude of force to move walkers towards their bias direction.
UseFrame Boolean true Constrain sketch to a box centered on the screen.
FrameSize Number or [width, height] 900 Size of frame.
CaptureLines Boolean true Enable building of an internal buffer of line segments between all connected particles. Can be disabled if it impacts performance at large scales.
RenderMode Shapes or Lines Shapes Method of drawing particles. Can draw the shapes as they exist (Shapes), or only draw lines between connected particles (Lines).
UseColors Boolean false Enable the use of colors defined by objects below.
UseStroke Boolean false Draws all circles/polygons with a 1px stroke matching the background color.
BackgroundColor Object with h, s, b properties Color of canvas background in HSB format.
WalkerColor Object with h, s, b properties Color of walkers in HSB format.
ClusterColor Object with h, s, b properties Color of clustered particles in HSB format.
ShapeColor Object with h, s, b properties Color of custom SVG shapes in HSB format.
LineColor Object with h, s, b properties Color of lines when using Lines for RenderMode.
FrameColor Object with h, s, b properties Color of frame, if enabled with UseFrame.

Packages used

  • p5.js for canvas drawing and miscellaneous helper functions (like lerp and map).
  • Webpack for modern JS (ES6) syntax, code modularization, bundling, and serving locally.
  • collisions for robust, lightweight collision detection without the use of a full physics package.
  • svg-pathdata for parsing path information from SVG files in order to create custom shapes.
  • svg-points for generating the d attribute of SVG <path> elements for export feature.
  • file-saver for initiating a download of exported SVG fles to the user's machine.

Running locally

  1. Run npm install in both the root (/) and ./core folders.
  2. Run npm run serve to start a local development server and launch it in a browser.

To statically build the code in this repo, run npm run build in the root folder.

Going further

The code in this repo can be improved or optimized in a few ways to achieve faster performance and larger scales. Here are some ideas that come to mind:

  1. Rather than using brute-force movement and collision detection (which limit overall scale + speed), implement an algorithm like Michael Fogleman's dlaf. This may mean that one would have to do away with variable particle shapes and sizes, but I imagine variable sizes could be accommodated with some tweaking.
  2. Port code over to a more performant language / library like openFrameworks or Cinder.

References

Samples

Basic DLA Directional bias Different sizes Different shapes SVG input Basic DLA with color Line rendering effect

2d-diffusion-limited-aggregation-experiments's People

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.