ဒီတစ္ခါေတာ့..သစ္ပင္ေလးတစ္ပင္ကုိ 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 ေလးကုိ..ေတြ႔ရပါလိမ့္မယ္.. ^_^
0 comments:
Post a Comment