Coding trees


I started fiddling around with drawing trees with code. I have something very basic but it looks like a good start.
I start out by placing a point on screen and giving it a base angle to grow towards using a random offset from a given angle. I then set a random growth amount (radius) and come up with my second point, to which i stretch a line. I then recursively move to the next point using the current angle as the new base - and repeat the process.
This alone gives you a nice stalk, but not yet a tree. A tree needs branches. From the second point onwards i randomly pick a number between one and two and call the same recursive function in order to create my branches. Each branch is simply a new point, sprouted from its "parent's" position and angle, with a random offset.
To prevent my tree from growing forever I determine a global growth value from which i subtract with the creation of each new branch. When the growth values reaches 0, the recursive function stops and no new branches are created.
By this point I've ended up with a "tree" made of a scribbly black line. This is not good enough, since we need to differentiate the trunk from the tip branches via girth.
To do this we need to be able to determine that the tip branches are indeed slim, and work backwards to determine the required girth of the trunk.
Each created point in space holds a reference to its parent, allowing us to count backwards from each tip of the tree back to the original trunk node. If we mark each tip as size zero and assign an incrementing value to each parent point, we'll figure out how far it is from the farthest tip to the trunk and therefore - how "big" it is. For instance, if there are 20 points from the farthest tip back to the trunk, then we can now determine the scale of each point on the route, 20 (the trunk )being 1 and 0 (the tip) being 0.
Using this new data we move on to draw the actual tree. First we draw a circle around each point, giving it a radius multiplied by our newly found scale for each node.
We then stretch lines from set points on the circle's circumference to the corresponding points on the next node. We repeat this process for all nodes and voilà - a tree.
Drawing With code can be a very interesting experience. The randomness of the values provides very different looking trees. You can of course play with the number of branches, size and angle spread getting completely wacky results.
Source code can be found here:

תגובות

הוסף רשומת תגובה

פוסטים פופולריים מהבלוג הזה

Thoughts on HTML5, a Flash Developers hopeless rant

My name is Yonny Zohar, I'm a game developer with six years experience. I've worked on several commercial titles including " Bingo Island ", and have recently made the move from flash development to html5. Six years ago, while i was learning flash, i worked simultaneously with html, CSS and js. back then my impression was that flash was simply light years ahead in terms of development ease, code maintenance and error handling. Returning now to html5 six years later, I was very weary - had things improved since 2009? I've spent the last several months hearing from everyone around me that the answer is a definite "YES". I'm here to say- the answer is still a definite NO! Lets begin this rant with my number one hatred - CSS: NO DEBUGGING - Debugging css is awful. you spend days trying to figure out why elements don't behave the way they should. Try adding and removing properties to elements hoping it will make them act the way you want or
המשך לקרוא

Pseudo 3d Isometric view

תמונה
Today i'd like to demonstrate another nifty use for pseudo 3d pixel manipulation - 3d isometric view! We've all seen 2d games using isometric view, mostly popular in early strategy games like Age of Empires, or StarCraft. Rotating tiles 45 degrees creates the illusion of depth, which brings us closer to a 3d feeling. However, using pixel manipulation and simple geometry we can do better and create a much richer sense of 3d. The attached video shows a map created completely with 2d pixel manipulation, although it appears 3d. The effect is achieved by creating each image (building and tree) like a cake - layer by layer, with each layer getting a slight offset on the Y axis (known as sprite stacking). For example, the bottom layer of the tree will be drawn at its determined x and y, and the following layer will be at (x, y - 2). Our tree is made up of 10 layers of stump, and 4 layers of green leaves. Our building uses 20 layers, some consisting of the same image,
המשך לקרוא

Veroni Noise

תמונה
Inspired by news reports of the Corona virus I'm demonstrating how to create a simulation of what looks like cells or viruses under a microscope. The attached video depicts what may appear to be microscopic organisms running around under a microscope. In Fact this is a bitmap canvas, drawn pixel by pixel, using a method that calculates the color for each pixel based on its distance from set points. First we separate the canvas into logical rows and columns, creating an invisible grid. Then we select a random point in each tile, which will serve as the tile's reference point. We then iterate over all the pixels in the canvas, and check each pixel's distance from its nearest reference points. We take the 2 closest points and sum them up to get the total distance from the first point to the pixel to the second point. We then divide the distance to the closest point from the total distance to get the pixel's current percentage within that distance.
המשך לקרוא