Probabilistic Land - TypeScript

This project started as a tree generating algorithm, but I added shadows, mountains etc. on top of that because plain background didn't look well. So here it is. No libraries etc. used - just pure TypeScript, CSS and a little bit of HTML.

Overview

• Over 50 parameters to change (perspective, shadows, tree parameters, colors, etc.)
• New set of random parameters with each site refresh
• Move the lightsource to change shadows direction
• Plant the tree by clicking on the ground
• Cancel tree growing or remove it completely (ctrl + z)

Mountains

Mountains are made of 1-dimensional Perlin noise. You can choose the amount of the mountains, their height, width, colors etc. Mountain color parameter works for closer mountains, since furthest are mist-colored.

Trees

Click LMB on the ground to plant a tree.

Trees generating algorithm relies on fractal tree algorithm, but it's heavily randomized. Moreover, each branch is divided into segments, and each segment can have different width and different amount of leaves. Additionally, an "occasional" branch can appear at the middle segments of parent branch (not only at the branch tip like in the fractal version).

Trees are made in 2 steps:

• Constructing the tree (calculating all the positions of all the branches' segments and their leaves + shadows)
• Animating the tree in the right order (first trunk, then its children branches, then their children branches and so on).

Check the console to see the statistics:

Leaves

Leaves are made of a main nerve (just a line) and 2 Bezier curves at its sides. One curve is for the left side and another is for the right side of a leaf.

Each bezier curve is stretched along four points:

• First point is where the main nerve connects with a leaf blade (petiole's end).
• Second point is at the corresponding site of the first axis (closer to petiole), which is perpendicular to the main nerve.
• Third point is at the corresponding site of the second axis (further to petiole), which is also perpendicular to the main nerve.
• Fourth point is main nerve's end

By changing axes position and width you can change the shape of a leaf. By moving the axes to the side (left or right side of a leaf), the leaf seems folding (leaf folding parameter), although it will move the axes to the appropriate side automatically (parameter value changes only the strength of that effect).

Performance & Control

Animation time depends on number of segments (of branches), leaves, shadow's and tree's position. You can cancel animation anytime - (ctrl + z)

There are few steps to maximize animation speed, and it's up to a case which ones are optimal.

• Plant a tree at coordinates that place shadow out of drawing window. This way shadow won't be drawn so the animation will be faster
• Decrease "Tree Shadow Blur" - Values higher than 0 may heavily slow down the animation
• Increase "Branch Segment Length" (branches will be less smooth)
• Decrease "Branching Booster" and "Occasional Branches Limit" (less branches)
• Decrease "Leafy Levels" and "Leaf Probability" (less leaves)
• Increase "Leaf animation Pack" (leaf draw attempts in each frame. Lower value gives more stable but slower animation.)
• Decrease "Leaf Growth Stages" (fully grown leaf in less time, but no growing effect)

Even more screenshots!

Folks, that's all.