fractal tree drawing tree java
Personally I always really enjoy drawing fractals when programming because they're a lot of fun to play around with. Even slightly modifying one of the numbers in a fractal program will wildly change the pattern that you get and I always find looking at the shapes to be quite fascinating. The program that we'll be making in a second is a great example of this, if you keep the numbers generally around the ones I've put in you'll end up with a structure that looks like a tree but if you fool around with some of the variables you can get some pretty crazy patterns as well.
We'll be using the HTML canvas element for making the fractal tree so if you're unfamiliar with how to use that element I'd recommend you check out the article I wrote which details it's basics.
Setting up The Web Page
Since we're using JavaScript to make the tree we'll need to set up a bare bones HTML page with a canvas on it before we can go and do anything else.
First you'll just want to do a document declaration followed by an html element which has a body element inside it. You won't need a header or a separate CSS document for this since we're focusing almost entirely on the JavaScript aspect of it but if you want to add a bit of style to your page feel free to throw that stuff in there.
<!DOCTYPE html> <html> <body> </body> </html>
Once you've got that set up you'll want to put a canvas element in the body of your page. I'd say that you should set the size of the canvas to be at least 1000×1000 so that way you can make the tree pretty big and still be able to see it. Also I'd recommend horizontally centering the canvas on your page as that'll also help make the drawing easier to see. Be sure to remember to give the canvas an ID so you can grab it with JavaScript later.
<canvas id="canvas" width="1000" height="1000" style="padding: 0; margin: auto; display: block;"> </canvas>
Setting up the Script
The first thing you have to do inside your script element is create your drawing object for the canvas. Just grab your canvas using "getElementbyId" and then set the context of it's object to 2d since that's all we'll need for this program.
<script type="text/javascript"> var elem = document.getElementById('canvas'); var context = elem.getContext('2d'); You'll also want to set the colour and thickness for the lines you'll be drawing. What colour you pick isn't really important so I'll just be using a generic black for this. I prefer to keep the line thickness fairly light so that way the tree's branches don't overlap with each other so they're easier to see.
Lastly you'll also need to set how many layers of branches you want to generate, In my example version of the program I've set it to have a lot of layers of branches because I think that makes it look cooler. The more levels of branch you have the harder it'll be to actually fit on the canvas though so keep that in mind when setting the layer amount.
context.fillStyle = '#000'; context.lineWidth = .5; var levels = 14;
Draw Line and Draw Tree Functions
Now we need to make a function that'll actually draw the lines that'll make up our fractal tree. This is pretty simple, all this function needs is two sets of coordinates, one set for where to move the drawing object to and a second set that tells it where to draw the line to. Use the "moveTo" method for moving the object and the "lineTo" method to draw a line somewhere.
function drawLine(x1, y1, x2, y2){ context.moveTo(x1, y1); context.lineTo(x2, y2); } Next we need to create the function that'll actually draw up the tree. You'll need to pass in these arguments to the function: coordinates for where to start drawing, the angle you want the tree to be drawn at and how many levels of branches you want the tree to have. The first thing you'll want to do inside the function is check to make sure layer's is set at least to 1 since we can't have a fractal tree smaller than that.
function drawTree(x1, y1, angle, levels){ if (levels > 0){ We've passed in the co ordinate's for where we want our tree to start at but not where we want the program to draw the lines that make it up. Doing this is pretty simple, all you need to do is get the cosign and sign of the angle you want to the tree to be at and then multiply that by 10. What you're doing here is essentially just getting the cosign and sine of the angle and then converting it from radians to degrees for the purposes of this program. This results in the current trajectory of the angle being drawn out by the object.
var x2 = x1 + (Math.cos(angle * Math.PI / 180.0) * levels * 10.0); var y2 = y1 + (Math.sin(angle * Math.PI / 180.0) * levels * 10.0);
Once you've set that up you need to make a call to the "drawLine" function,this is just to set up an initial "trunk" for your fractal tree. Next you'll want to call the "drawTree" function twice with each both having the same arguments except one has made the initial angle slightly large and the other has made it slightly smaller. This will cause two new trees to branch off into two different directions and they'll keep doing this until levels reaches zero.
drawLine(x1, y1, x2, y2); drawTree(x2, y2, angle - 15, levels - 1); drawTree(x2, y2, angle + 15, levels - 1); } }
The Finishing Touches
At the end of the script you'll need to use the "beginpath()" method to initialize drawing a line path. After that you'll need to make a call to the draw tree function, passing into it the coordinates of where you want it to start, the angle you want the tree to be drawn at, and how many levels deep you want the tree to be.
Once the draw tree function has finished running you'll want to close the line path you created by using the "closepath" method and lastly you'll need to call the "stroke" method, this is what actually colours in the path that you just defined.
context.beginPath(); drawTree(800, 1100, -90, levels); context.closePath(); context.stroke();
Now that you've finished the program I'd really recommend you'd go and play around with all the different numbers in it to see what sort of strange patterns you can make with it.
Further Suggestions
If you liked making this fractal you should definitely try making a program that generates a Pythagoras Tree. The Pythagoras Tree is very much the same concept as what we've just made here except the tree is entirely made out of squares as opposed to just lines. Combining this fractal with a good mixture of different textures and colours will let you create some very cool patterns like the one pictured above for example.
Good Luck!
Download the source code here.
If you have any questions or comments email them to me at nick@crumbsofcode.com
Source: http://crumbsofcode.com/making-fractal-tree-javascript/
0 Response to "fractal tree drawing tree java"
Post a Comment