Skip to main content

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.

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

Popular posts from this blog

Procedural music with PyAudio and NumPy

Combining two of my favorite pastimes, programming and music... This is the hacky "reduced to it's basic components" version of a library I've been working on for generating music and dealing with music theory.

Tweaking the harmonics by changing the shape of the harmonic components and ratios can produce some interesting sounds. This one only uses sine waveforms, but a square / saw generator is trivial with numpy.

It takes a second to generate, so don't turn your volume up too loud in anticipation (it may be loud).

import math
import numpy
import pyaudio
import itertools
from scipy import interpolate
from operator import itemgetter


class Note:

NOTES = ['c','c#','d','d#','e','f','f#','g','g#','a','a#','b']

def __init__(self, note, octave=4):
self.octave = octave
if isinstance(note, int):
self.index = note
self.note = Note.NOTES[note]
elif isinstance(note, st…

Build a Feed Reader in Python (Parts 7-9)

Part 07 Adding Jinja2 templates to a flask web application.

 Part 08 Adding static files so we can serve some CSS to style our app.

Part 09 Adding a background task to continuously update the articles while the application is running.

Write a Feed Reader in Python

I just started a new video tutorial series. This time it'll cover the entire process of writing an RSS feed reader in Python from start to finish using the feedparser module, flask, and SQLAlchemy. Expect to see about 3-4 new videos a week until this thing is finished!
Click to watch