ဒီတစ္ခါေတာ့..သစ္ပင္ေလးတစ္ပင္ကုိ html , javascript နဲ႔ css သံုးၿပီး.. animation တစ္ခုဖန္တီးၾကမယ္.. :)
ေအာက္မွာၿပထားတဲ့ code ေတြကုိ.. copy ကူးလိုက္ပါ..။
<html> <head> <script> window.onload = function(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); //Lets resize the canvas to occupy the full page var W = window.innerWidth; var H = window.innerHeight; canvas.width = W; canvas.height = H; //Some variables var length, divergence, reduction, line_width, start_points = []; init(); function init() { //filling the canvas white ctx.fillStyle = "white"; ctx.fillRect(0, 0, W, H); //Lets draw the trunk of the tree //lets randomise the variables //length of the trunk - 100-150 length = 100 + Math.round(Math.random()*50); //angle at which branches will diverge - 10-60 divergence = 10 + Math.round(Math.random()*50); //Every branch will be 0.75times of the previous one - 0.5-0.75 //with 2 decimal points reduction = Math.round(50 + Math.random()*20)/100; //width of the branch/trunk line_width = 10; //This is the end point of the trunk, from where branches will diverge var trunk = {x: W/2, y: length+50, angle: 90}; //It becomes the start point for branches start_points = []; //empty the start points on every init(); start_points.push(trunk); //Y coordinates go positive downwards, hence they are inverted by deducting it //from the canvas height = H ctx.beginPath(); ctx.moveTo(trunk.x, H-50); ctx.lineTo(trunk.x, H-trunk.y); ctx.strokeStyle = "brown"; ctx.lineWidth = line_width; ctx.stroke(); branches(); } //Lets draw the branches now function branches() { //reducing line_width and length length = length * reduction; line_width = line_width * reduction; ctx.lineWidth = line_width; var new_start_points = []; ctx.beginPath(); for(var i = 0; i < start_points.length; i++) { var sp = start_points[i]; //2 branches will come out of every start point. Hence there will be //2 end points. There is a difference in the divergence. var ep1 = get_endpoint(sp.x, sp.y, sp.angle+divergence, length); var ep2 = get_endpoint(sp.x, sp.y, sp.angle-divergence, length); //drawing the branches now ctx.moveTo(sp.x, H-sp.y); ctx.lineTo(ep1.x, H-ep1.y); ctx.moveTo(sp.x, H-sp.y); ctx.lineTo(ep2.x, H-ep2.y); //Time to make this function recursive to draw more branches ep1.angle = sp.angle+divergence; ep2.angle = sp.angle-divergence; new_start_points.push(ep1); new_start_points.push(ep2); } //Lets add some more color if(length < 10) ctx.strokeStyle = "green"; else ctx.strokeStyle = "brown"; ctx.stroke(); start_points = new_start_points; //recursive call - only if length is more than 2. //Else it will fall in an long loop if(length > 2) setTimeout(branches, 50); else setTimeout(init, 500); } function get_endpoint(x, y, a, length) { //This function will calculate the end points based on simple vectors //http://physics.about.com/od/mathematics/a/VectorMath.htm //You can read about basic vectors from this link var epx = x + length * Math.cos(a*Math.PI/180); var epy = y + length * Math.sin(a*Math.PI/180); return {x: epx, y: epy}; } } </script> <style> /*Some basic CSS*/ * {margin: 0; padding: 0;} /*To remove the scrollers*/ #canvas {display: block;} </style> </head> <body> <!-- Lets draw some binary trees --> <canvas id="canvas"></canvas> </body> </html>
ၿပီးရင္.. notepad မွာထည့္လိုက္ပါ..။
tree.html ဆုိၿပီး.. desktop မွာ.. save လုပ္လိုက္ပါ့မယ္..။
desktop မွာ..အခုသိမ္းလိုက္တဲ့.. tree.html ဖိုင္ေလးကုိ.. double click ႏွိပ္ၿပီး ဖြင့္လိုက္ပါ..။
ဘာပံုမွမပါဘဲ..animation tree ေလးကုိ..ေတြ႔ရပါလိမ့္မယ္.. ^_^
No comments:
Post a Comment