Saturday, July 23, 2016

Procedural trees with Javascript

Here's another quick web experiment, this time exploring the use of particle systems to generate art.

You can watch it generate a random forest live here:

Or if you're one of the cool kids you can clone the Git repo or browse the code here:

Each tree starts as a single particle representing the trunk and moves upward with a random chance of bending or splitting as it goes. The branches are rendered using a technique similar to the spray can from MS Paint to create a charcoal look. Random pixels are faded out as it runs to create a grainy fog effect.


Vetri Vel said...

kept on watching it

zephyr said...

I like it!

I did something similar in response although I took a slightly different approach from your code.

I wrote an L-System interpreter in Racket (which has an excellent Javascript compiler) and used a simple stochastic process to shade the trunks.