How to program a fractal. Displayed on HTML page.
Fractals in Javascript Tutorial: In this tutorial I will demonstrate how to generate a simple tree and forest landscape. Using only JavaScript. This picture is not drawn using Paint. It is 100% generated by code.
What is a fractal?
Fractals in Javascript Tutorial – What is a fractal?: It is an infinite repeating pattern. In this case it is a loop that draws a line. Then splits in two directions and draws two lines. BUT then each of this two new lines. Are lines themselves. So they each split into two new lines. And so on. (wiki fractal)
Of course this will freeze your computer since it is an infinite loop. That is why I limit the iteration by a factor of 9.
How to draw fractals in HTML using Javascript?
Fractals in Javascript Tutorial – The JavaScript.: First we have to setup a canvas to draw on. This is done in the code below. Save that code as index.html (or index.htm)
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fractal Test</title>
<style>
.center {
margin: auto; width: 60%; border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body><div class="center"><center>
<canvas id="canvas" width="600" height="500" style="border:3px solid #dd8e6f;">
</canvas></center></div>
<script type="text/javascript" src="fractal.js"> //this is our javascript
</script>
</body>
</html> You can even cut everything between <head> and </head>
Fractals in JavaScript (Tutorial)
So this was just the initialization of our html page. Below is the JavaScrip. We could put this also inside the html page. But I choose to put it in a separate file. If you want it in your html. Then cut the ‘scr=…’ and paste the code between the <script type=”text/javascript”> and </scrip>
var elem = document.getElementById('canvas');
var context = elem.getContext('2d');
context.fillStyle = '#1f2';
context.lineWidth = 1;
var deg_to_rad = Math.PI / 180.0;
var depth = 9;
let dikte = 1;
var angle = -90;
function drawLine(x1, y1, x2, y2){
context.lineWidth = dikte*3;
var kleur="#3"+(dikte)+"2"
context.strokeStyle = kleur;
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
}
function drawTree(x1, y1, angle, depth){
dikte=depth*2;
if (depth !== 0){
var x2 = x1 + (Math.cos(angle * deg_to_rad) * depth * 5.0);
var y2 = y1 + (Math.sin(angle * deg_to_rad) * depth * 3.0);
drawLine(x1, y1, x2, y2);
drawTree(x2, y2, angle - 18, depth - 1);
drawTree(x2, y2, angle + 15, depth - 1);
}
}
dikte=10;
context.fillRect(0,0,elem.width,elem.height);
context.fillStyle = '#12f';
context.fillRect(0,0,elem.width,(elem.height/2));
for (i=1;i<50;i++){
drawLine((250+i*2),400,300,250);
drawLine(0,(400+i),elem.width,(400+i*2));
}
dikte=1;
context.beginPath();
for (i=3;i>0;i--){
drawTree((200+i*20), (420-i*25), angle, depth);
}
for (i=3;i>0;i--){
drawTree((400-i*20), (420-i*25), angle, depth);
}
context.closePath();
// https://infonosity.net
// Copyright © Bruno Stroobandt. //less than 50 lines!!! to generate the picture :You can adjust the numbers and test the effect it has. This will give you a better insight in the working of the Javascript.
It begins with setting the variables. And then you see the functions to draw lines. And trees. This is followed by drawing the background of our canvas in green and blue. (the sky and the grass 🙂 ) And then 2 loops that draw the road. And than last but not least it calls the tree drawing function 6 times. But each time on another position, creating the trees next to the road.
Back to English (index)
Back to Computer en Electronica (dutch index)