ကၽြႏု္ပ္၏ ေက်ာင္း: Coding

Code သံုးၿပီး animation လုပ္ရေအာင္ 2

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 1:30 AM with No comments

ဒီတစ္ခါမွာေတာ့.. animation box ေလးေတြလုပ္ၾကရေအာင္...။ ပံုဆြဲစရာမလုိပါဘူး..။ code နဲ႔ပဲေရးသြားမွာပါ..။ ပထမဆံုးေအာက္က.. code ေတြကို.. copy ကူးလိုက္ပါ..။

<html>
<head>
<style>
body {margin:0px ; padding: 0px}
canvas{display:block}

</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
window.onload = function()
{
    // lets get the HTML canvas element so we draw on it
    var canvas = document.getElementById("c");
    var ctx = canvas.getContext("2d")
   
    var W = window.innerWidth,    // get the width of our window
            H = window.innerHeight;// get the height
           
            // set our canvas to our size of Width and height
            canvas.width = W;
            canvas.height = H;
           
            /*=========== Box class ===========*/
            function Box(_x,_y)
            {
                // the X/Y position
                this.x = _x;
                this.y = _y;
               
                // lets give it velocity X and Y
                this.xVel = 10 + Math.random()*20;
                this.yVel = 1;
               
                // the box width and height
                this.width = 20
                this.height = 20;
               
                // random colors for our box
                this.r = Math.round(Math.random()*255);
                this.g = Math.round(Math.random()*255);
                this.b = Math.round(Math.random()*255);
               
                this.rgba = "rgba("+this.r+","+this.g+","+this.b+",1)";
               
                // lets make draw method for our box
                this.draw = function()
                {
                    ctx.strokeStyle = this.rgba;
                    ctx.strokeRect(this.x,this.y,this.width,this.height);
                   
                    this.update();
                }
               
                // function that handle our logics for our box
                this.update = function()
                {
                    // lets check if the ball get out of our screen and when
                    // it does that, make it bounce
                    // check the left window border
                    if(this.x < 0) {
                        this.x = 0;            // set its position to 0
                        this.xVel *= -1; // make it bounce
                    }
                   
                    // check the right border
                    if(this.x > W - this.width)
                    {
                            this.x = W - this.width;            // set its position to 0
                            this.xVel *= -1; // make it bounce
                    }
                   
                    // check the top border
                    if(this.y < 0) {
                        this.y = 0;            // this is what happen when u copy/paste
                        this.yVel *= -1; // make it bounce
                    }
                   
                    // the reason why we did this if function so the boxes dont
                    // try to add y by its velocity when its reach bottom
                    // cause it will cause it to spazz
                    // now we add gravity
                    if(this.y < H - this.height)
                        this.yVel += .25;
                   
                    // check the bottom border
                    if(this.y > H - this.height)
                    {
                            // when it bounce off the bottom decrease the ball speed
                            this.xVel *= .5
                            this.yVel *= .5
                           
                            this.y = H - this.height;            // set its position to 0
                            this.yVel *= -1; // make it bounce
                    }

// move add speed to our x/y
                    this.x += this.xVel;
                    this.y += this.yVel;
                }
            }
           
            // lets make array of boxes
            var boxes = [];
           
            // Function to draw stuff on our screen :)
            function draw()
            {
                // Background
                ctx.globalCompositeOperation = "source-over";
                ctx.fillStyle = "rgba(0,0,0,0.5)"
                ctx.fillRect(0,0,W,H);
               
                ctx.globalCompositeOperation = "lighter"
               
                // loop through the boxes and draw them
                for(i=0; i < boxes.length; i++)
                    boxes[i].draw();
               
                update();
            }
           
            // Function for our logic
            function update()
            {
                // loop through the boxes and draw them
                for(i=0; i < boxes.length; i++)
                    boxes[i].update();
            }
           
            // add box every minute we specify
            setInterval(function(){
                boxes.push( new Box(0,0))
            },1000);
           
            // set interval so we can draw then update our drawing
            // every 30 milisecond
            setInterval(draw,30);
}
</script>
</body>
</html>

notepad ထဲမွာ.. code ေတြကုိ.ထည့္လိုက္ပါမယ္..။ File > save ဆုိၿပီး.. box.html လို႔နာမည္ေပးၿပီး.. desktop မွာ သိမ္းလိုက္ပါ..။ desktop ေပၚက.. box.html ကုိ double click ႏွိပ္ၿပီးဖြင့္ၾကည့္လိုက္ပါ..။ box ေလးေတြ..က်လာတာကုိ..ေတြ႔ရပါလိမ့္မယ္...။ ဘာ ပံုမွမပါပါဘူး.. code နဲ႔ပဲေရးသြားတာပါ.. ^_^

ဝန္ခံခ်က္။ ။ Technological Villa မွ ကူးယူတင္ျပပါသည္။

အျပည့္အစုံဖတ္ရန္

Android အရုပ္ေလးကုိ Coding ေလးေတြနဲ႔လုပ္ရေအာင္

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 1:04 AM with No comments

ဒီတစ္ခါေတာ့.. Android အရုပ္ေလးကုိ..ဘာပုံမွမပါပဲနဲ႔.. HTML, CSS သံုးၿပီးေတာ့..ဆြဲၾကည့္ရေအာင္ေနာ္.။
ေပးထားတဲ့.. code ေတြကုိ.. copy ကူးလိုက္ပါ..။

<html>
<head>
<style>
div {margin: o; padding: 0;}
div div {background: #A4CA39; position: relative;}

.android{
    height: 404px; width: 334px;
    margin: 100px auto;
  
}
.head{
    width: 220px; height: 100px;
    top: 32px;
  
    border-radius: 110px 110px 0 0;
    -moz-border-radius: 110px 110px 0 0;
    -webkit-border-radius: 110px 110px 0 0;
  
    -webkit-transition: all 0.1s ease-in;
}
.l_eye, .r_eye {
    background: #fff;
    width: 20px; height: 20px;
    position: absolute; top: 42px;
  
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.l_eye {left: 50px;}
.r_eye {right: 50px;}

.l_ant, .r_ant{
    width: 6px; height: 50px;
    position: absolute; top: -34px;
  
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.l_ant {
    left: 50px;
    transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
}
.r_ant {
    right: 50px;
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
}

.body{
    width: 220px; height: 184px;
    top: 40px;
  
    border-radius: 0 0 25px 25px;
    -webkit-border-radius: 0 0 25px 25px;
    -moz-border-radius: 0 0 25px 25px;
}

.l_arm, .r_arm, .l_leg, .r_leg {
    width: 50px; position: absolute;
    -webkit-transition: all 0.1s ease-in;
}
.l_arm, .r_arm {
    height: 150px;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
}
.l_leg, .r_leg {
    height: 80px; top: 182px;
    border-radius: 0 0 25px 25px;
    -moz-border-radius: 0 0 25px 25px;
    -webkit-border-radius: 0 0 25px 25px;
}
.l_arm {left: -58px;}
.r_arm {right: -58px;}
.l_leg {left: 45px;}
.r_leg {right: 45px;}

.head:hover {
    -webkit-transform: rotate(-5deg) translate(-4px, -8px);
    -transform: rotate(-5deg) translate(-4px, -8px);
    -moz-transform: rotate(-5deg) translate(-4px, -8px);
}
.l_arm:hover{
    -webkit-transform: rotate(15deg) translate(-14px, 0);
    -transform: rotate(15deg) translate(-14px, 0);
    -moz-transform: rotate(15deg) translate(-14px, 0);
}
.r_arm:hover{
    -webkit-transform: rotate(-30deg) translate(30px, 0);
    -transform: rotate(-30deg) translate(30px, 0);
    -moz-transform: rotate(-30deg) translate(30px, 0);
}

</style>
</head>
<body>
<div class="android">
    <div class="head">
        <div class="l_ant">
</div>
<div class="r_ant">
</div>
<div class="l_eye">
</div>
<div class="r_eye">
</div>
</div>
<div class="body">
        <div class="l_arm">
</div>
<div class="r_arm">
</div>
<div class="l_leg">
</div>
<div class="r_leg">
</div>
</div>
</div>
</body>
</html>

code ေတြကုိ.. notepad ထဲထည့္လိုက္ပါ.။ ၤFile ထဲက save ႏွိပ္ၿပီး.. android.html ဆိုၿပီး.. desktop မွာ save လုပ္လိုက္ပါ..။ ၿပီးရင္.. desktop ေပၚက.. android.html ကုိ double click ႏွိပ္ၿပီး.. ဖြင့္လုိက္ပါ..။ Android အရုပ္ေပးေပၚကုိ. mouse တင္ၾကည့္ပါ..။ အရုပ္ေလးက..လွဳပ္ေနပါလိမ့္မယ္... ^_^

ဝန္ခံခ်က္။ ။ Technological Villa မွ ကူးယူတင္ျပပါသည္။

အျပည့္အစုံဖတ္ရန္

Code သံုးၿပီး.animation လုပ္ရေအာင္

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 12:46 AM with 1 comment

ဒီတစ္ခါေတာ့..သစ္ပင္ေလးတစ္ပင္ကုိ 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>

<canvas id="canvas"></canvas>
</body>
</html>

ၿပီးရင္.. notepad မွာထည့္လိုက္ပါ..။ tree.html ဆုိၿပီး.. desktop မွာ.. save လုပ္လိုက္ပါ့မယ္..။ desktop မွာ..အခုသိမ္းလိုက္တဲ့.. tree.html ဖိုင္ေလးကုိ.. double click ႏွိပ္ၿပီး ဖြင့္လိုက္ပါ..။ ဘာပံုမွမပါဘဲ..animation tree ေလးကုိ..ေတြ႔ရပါလိမ့္မယ္.. ^_^

ဝန္ခံခ်က္။ ။ Technological Villa မွကူးယူတင္ျပပါသည္။

အျပည့္အစုံဖတ္ရန္

Code သံုးၿပီး animation လုပ္ရေအာင္ 2

Android အရုပ္ေလးကုိ Coding ေလးေတြနဲ႔လုပ္ရေအာင္

Code သံုးၿပီး.animation လုပ္ရေအာင္

Post ဖတ္ႏိုင္ရန္အတြက္သင့္emailထားခဲ့ပါ။

Popular Posts

Random Post

ေနာက္ဆံုးတင္ထားသမွ်

Comment

Total Pageviews

လည္ပတ္သင့္ေသာ ေနရာမ်ား