Max Gadget, GPG Dragon Latest Version, Install Android, Sony Xperia, Xiaomi Mi Robot Vacuum, Verizon, Android Marshmallow, Network, stock firmware

Senin, 20 Agustus 2012

Pretty Fractal Trees using HTML-5 Canvas & Random Numbers

Pretty Fractal Trees using HTML-5 Canvas & Random Numbers - this blog we have built a few years ago and already very many blog visitors Max Gadget who are satisfied with the information we convey and we say thanks for that, we will then improve the quality of information we convey to you, well according to what you are looking for we will now discuss first about Pretty Fractal Trees using HTML-5 Canvas & Random Numbers this information we framework from various trusted sources, please see:

Articles : Pretty Fractal Trees using HTML-5 Canvas & Random Numbers
full Link : Pretty Fractal Trees using HTML-5 Canvas & Random Numbers

You can also see our article on:


    Pretty Fractal Trees using HTML-5 Canvas & Random Numbers

    Last week I sat down to see how I can generate a fractal tree on a web page. It turned out to be a very interesting exercise using HTML5 Canvas and simple Math trigonometric functions. Using random numbers for changing the length of the tree branch, and the angle of branch split -- I was quite successful in generating very realistic looking trees!

    Each time you render the HTML, the trees look quite different. I can see how Game creators can create interesting looking forests for "heroes" to travel in using such techniques.

    HTML 5 Canvas with a Fractal Tree





















    Here is the code (also posted on github):

    <html>
    <head>
    <script type="text/javascript">
    window.onload = draw;
    function draw(){
    var canvas = document.getElementById('myCanvas');
    if (canvas.getContext){
    var context = canvas.getContext('2d');
    drawFractalTree(context);
    }
    else{
    alert("HTML5 Canvas isn't supported by your browser!");
    }
    }
    function drawFractalTree(context){
    drawTree(context, 800, 800, -90, 11);
    }
    function drawTree(context, x1, y1, angle, depth){
    var BRANCH_LENGTH = random(0, 20);
    if (depth != 0){
    var x2 = x1 + (cos(angle) * depth * BRANCH_LENGTH);
    var y2 = y1 + (sin(angle) * depth * BRANCH_LENGTH);
    drawLine(context, x1, y1, x2, y2, depth);
    drawTree(context, x2, y2, angle - random(15,20), depth - 1);
    drawTree(context, x2, y2, angle + random(15,20), depth - 1);
    }
    }
    function drawLine(context, x1, y1, x2, y2, thickness){
    context.fillStyle = '#000';
    if(thickness > 6)
    context.strokeStyle = 'rgb(139,126, 102)'; //Brown
    else
    context.strokeStyle = 'rgb(34,139,34)'; //Green
    context.lineWidth = thickness * 1.5;
    context.beginPath();
    context.moveTo(x1,y1);
    context.lineTo(x2, y2);
    context.closePath();
    context.stroke();
    }
    function cos (angle) {
    return Math.cos(deg_to_rad(angle));
    }
    function sin (angle) {
    return Math.sin(deg_to_rad(angle));
    }
    function deg_to_rad(angle){
    return angle*(Math.PI/180.0);
    }
    function random(min, max){
    return min + Math.floor(Math.random()*(max+1-min));
    }
    </script>
    <style type="text/css">
    canvas { border: 1px solid white; }
    </style>
    </head>
    <body>
    <canvas id="myCanvas" width="1500" height="800"></canvas>
    </body>
    </html>
    view raw tree_html5.html hosted with ❤ by GitHub




    so much information Pretty Fractal Trees using HTML-5 Canvas & Random Numbers

    hopefully the information Pretty Fractal Trees using HTML-5 Canvas & Random Numbers that we convey can make you satisfied because it can be useful to determine the gadget according to your needs.

    you just read the article titled Pretty Fractal Trees using HTML-5 Canvas & Random Numbers if you feel this information is useful and want to bookmark or share please use the link https://maxyaquos.blogspot.com/2012/08/pretty-fractal-trees-using-html-5.html do not forget to go back to this blog to get more information about gadgets.

    Tag :
    Share on Facebook
    Share on Twitter
    Share on Google+
    Tags :

    Related : Pretty Fractal Trees using HTML-5 Canvas & Random Numbers

      0 komentar:

      Posting Komentar