JS1k 2016: Elemental Forest - Part 1

This year is my third year participating in JS1k, a contest about making something cool using Javascript in 1 kilobyte or less. After submitting two text based demos (those are two links, btw), this year I submitted a more pleasing to the eye demo and I called it “Elemental Forest”.

This demo was inspired by Grove, an Android Experiment by Simon Geilfus. Also, I would like to thank Coding Math YouTube channel for the awesome tutorials. Without it my submission this year probably would just be another text based one.

In this and the next post I will explain the code that works behind the demo, but before that let’s look at the ‘original’ source of the demo! (You will know why the word ‘original’ is quoted)

The code was then passed through Closure Compiler and RegPack, which is a little improvement from the past years because I haven’t discovered RegPack yet and used JS Crush instead which is pretty good already. Also, if you’re wondering, the original original source was 1688 bytes long and then crushed into 1004 bytes (-684B, -40.52%). Yes, I copied that data and that’s how I knew that I didn’t recover the whole original source successfully.

The Trees

I decided to talk about these first and in a separate section because let’s face it, most of the things you see in the demo are just trees. If you watched the demo long enough, you will discover that there are two types of trees, the ‘normal trees’, and the ‘triangle trees’. I will only cover the normal ones because the triangle trees literally are just triangles.

The function that draws trees is named T() and could be found on lines 91-122 of the gist. The parameters x and y contain the x and y positions of the tree, and the parameter z is used only to determine whether to show the normal or triangle trees.

The trunk of the normal trees are made of two lines with the line width of r()*12+28 (r() is a seeded random number generator function). The leaves are a little bit more complex, and I recommend you to watch the 4th episode of Coding Math first. In the end of the video you could see circles that are drawn in a circle shape using simple trigonometry, and that’s almost exactly how the leaves are drawn. But instead of drawing circles, the position is used for the lineTo (or moveTo) function and then fill will be called. To make the trees look a little bit different for each of them, the radius of the ‘big circle’ and the angle between each points are a little bit randomized.

In the next part I will cover about the rest of the stuff in the code, thank you for reading!

comments powered by Disqus