<div id="tilte"> <h1>Fractal Trees Animated</h1></div><div id="container"><a href="https://www.youtube.com/channel/UCF6F8LdCSWlRwQm_hfA2bcQ"><span style="text-align:left;"><h2><img style="width:50px;float:left;margin-right:10px; vertical-align:middle;" src="http://image.noelshack.com/fichiers/2015/16/1428965590-photo.png"/>Coding Math </h2><p style="margin-top:5px;" >Thanks to you :)</p></span></a></div><canvas id="canvas"></canvas>xxxxxxxxxx@import url("https://fonts.googleapis.com/css?family=Roboto:300,700");body{ background-image: url("http://image.noelshack.com/fichiers/2015/12/1427051641-geometry.png"); position: relative;font-family: arial; padding:0px; margin:0px; overflow:hidden; text-align:center;}#tilte{ position:absolute; width:100%; text-align:center; top:50px; color: #333; font-size:20px;}canvas{border:0px solid black;} #container{border:0px solid black; position: absolute; right:20px; bottom:20px; padding:20px;}h1,h2{font-weight: 300;margin:0;}a {color:inherit;text-decoration:none;}xxxxxxxxxxcanvas = document.getElementById("canvas");context = canvas.getContext("2d");width = canvas.width = window.innerWidth;height = canvas.height = window.innerHeight; var p0 = { x: width /2, y:height }, p1 = { x: width /2, y:50 }, branchAngleA = Math.PI / 5, branchAngleB = Math.PI / 5, trunkRatio = randomRange(0.37,0.4); truckchiant = 0.45; colors = [ '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548' ]; finalcolor = colors[Math.floor(Math.random() * colors.length)]; function tree(p0,p1, limit){ var dx = p1.x - p0.x, dy = p1.y - p0.y, dist = Math.sqrt(dx * dx + dy * dy), angle = Math.atan2(dy,dx), branchLength = dist * (1- trunkRatio), pA = { x:p0.x + dx * trunkRatio, y:p0.y + dy * trunkRatio }, pB = { x:pA.x + Math.cos(angle + branchAngleA) * branchLength, y:pA.y + Math.sin(angle + branchAngleA) * branchLength, }, pC = { x:pA.x + Math.cos(angle - branchAngleB) * branchLength, y:pA.y + Math.sin(angle - branchAngleB) * branchLength, }; context.beginPath(); context.moveTo(p0.x, p0.y); context.lineTo(pA.x, pA.y); context.stroke(); if(limit > 0){ tree(pA, pC, limit -1); tree(pA, pB, limit -1); } else{ context.beginPath(); context.moveTo(pB.x, pB.y); context.lineTo(pA.x, pA.y); context.lineTo(pC.x, pC.y); context.strokeStyle="grey"; context.lineWidth = 2; context.lineCap = 'round'; context.stroke(); context.closePath(); context.beginPath(); context.arc(pB.x,pB.y,10, 0, Math.PI * 2); context.fillStyle=finalcolor; context.fill(); context.closePath(); context.beginPath(); context.arc(pC.x,pC.y,10, 0, Math.PI * 2); context.fill(); context.closePath(); } angle += 0.3; branchAngleA = 1 + Math.cos(truckchiant) * 0.35; branchAngleB = 1 + Math.sin(truckchiant) * 0.1; //branchAngleB += randomRange(-0.02,0.02); truckchiant += 0.2; }function update(){ context.clearRect(0,0,width,height); tree(p0,p1,5); requestAnimationFrame(update);}update();function randomRange(min, max){ return min + Math.random() * (max - min );}function randomInt(min, max){ return Math.floor(min + Math.random()* (max - min + 1));}