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: https://wybiral.github.io/code-art/projects/trees/

Or if you're one of the cool kids you can clone the Git repo or browse the code here: https://github.com/wybiral/code-art

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.

2 comments:

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.

http://zv.github.io/algorithmic-tree.html

https://github.com/zv/tree