Ajax Loader
×
HTML
<!-- Lets draw some binary trees -->
1
<!-- Lets draw some binary trees -->
2
<canvas id="canvas"></canvas>
 
CSS
/*Some basic CSS*/
1
/*Some basic CSS*/
2
* {margin: 0; padding: 0;}
3
/*To remove the scrollers*/
4
#canvas {display: block;}
 
JavaScript
window.onload = function(){
1
window.onload = function(){
2
  var canvas = document.getElementById("canvas");
3
  var ctx = canvas.getContext("2d");
4
  //Lets resize the canvas to occupy the full page
5
  var W = window.innerWidth;
6
  var H = window.innerHeight;
7
  canvas.width = W;
8
  canvas.height = H;
9
  
10
  //Some variables
11
  var length, divergence, reduction, line_width, start_points = [];
12
  
13
  init();
14
  
15
  function init()
16
  {
17
    //filling the canvas white
18
    ctx.fillStyle = "white";
19
    ctx.fillRect(0, 0, W, H);
20
    
21
    //Lets draw the trunk of the tree
22
    //lets randomise the variables
23
    //length of the trunk - 100-150
24
    length = 100 + Math.round(Math.random()*50);
25
    //angle at which branches will diverge - 10-60
26
    divergence = 10 + Math.round(Math.random()*50);
27
    //Every branch will be 0.75times of the previous one - 0.5-0.75
28
    //with 2 decimal points
29
    reduction = Math.round(50 + Math.random()*20)/100;
30
    //width of the branch/trunk
31
    line_width = 10;
32
    
33
    //This is the end point of the trunk, from where branches will diverge
34
    var trunk = {x: W/2, y: length+50, angle: 90};
35
    //It becomes the start point for branches
36
    start_points = []; //empty the start points on every init();
37
    start_points.push(trunk);
38
    
39
    //Y coordinates go positive downwards, hence they are inverted by deducting it
40
    //from the canvas height = H
41
    ctx.beginPath();
42
    ctx.moveTo(trunk.x, H-50);
43
    ctx.lineTo(trunk.x, H-trunk.y);
44
    ctx.strokeStyle = "brown";
45
    ctx.lineWidth = line_width;
46
    ctx.stroke();
47
    
48
    branches();
49
  }
50
  
51
  //Lets draw the branches now
52
  function branches()
53
  {
54
    //reducing line_width and length
55
    length = length * reduction;
56
    line_width = line_width * reduction;
57
    ctx.lineWidth = line_width;
58
    
59
    var new_start_points = [];
60
    ctx.beginPath();
61
    for(var i = 0; i < start_points.length; i++)
62
    {
63
      var sp = start_points[i];
64
      //2 branches will come out of every start point. Hence there will be
65
      //2 end points. There is a difference in the divergence.
66
      var ep1 = get_endpoint(sp.x, sp.y, sp.angle+divergence, length);
67
      var ep2 = get_endpoint(sp.x, sp.y, sp.angle-divergence, length);
68
      
69
      //drawing the branches now
70
      ctx.moveTo(sp.x, H-sp.y);
71
      ctx.lineTo(ep1.x, H-ep1.y);
72
      ctx.moveTo(sp.x, H-sp.y);
73
      ctx.lineTo(ep2.x, H-ep2.y);
74
      
75
      //Time to make this function recursive to draw more branches
76
      ep1.angle = sp.angle+divergence;
77
      ep2.angle = sp.angle-divergence;
78
      
79
      new_start_points.push(ep1);
80
      new_start_points.push(ep2);
81
    }
82
    //Lets add some more color
83
    if(length < 10) ctx.strokeStyle = "green";
84
    else ctx.strokeStyle = "brown";
85
    ctx.stroke();
86
    start_points = new_start_points;
87
    //recursive call - only if length is more than 2.
88
    //Else it will fall in an long loop
89
    if(length > 2) setTimeout(branches, 50);
90
    else setTimeout(init, 500);
91
  }
92
  
93
  function get_endpoint(x, y, a, length)
94
  {
95
    //This function will calculate the end points based on simple vectors
96
    //http://physics.about.com/od/mathematics/a/VectorMath.htm
97
    //You can read about basic vectors from this link
98
    var epx = x + length * Math.cos(a*Math.PI/180);
99
    var epy = y + length * Math.sin(a*Math.PI/180);
100
    return {x: epx, y: epy};
101
  }
102
  
103
  
104
  
105
}
 

Untitled

CSSDeck G+