フラクタルツリー|HTML5

フラクタルツリー|HTML5

フラクタルツリー|HTML5(HTML5, JavaScript, CSS3) : デモ

フラクタルツリー|HTML5(HTML5, JavaScript, CSS3) : ZIPファイル(2kb)

1.HTML

<!DOCTYPE html>
<html lang="jp">
    <head>
        <meta charset="UTF-8" />
        <title>フラクタル・ツリー</title>
        <link href="css/base.css" rel="stylesheet" type="text/css">
        <script src="js/base.js"></script>
    </head>
    <body>
        <div id="contents">
            <canvas id="canvas" width="275" height="275"></canvas>
        </div>
    </body>
</html>

2.CSS

@charset "utf-8";
  
body
{
    margin:0;
    padding:0;
    background-color: #fff;
}
  
#contents
{
    position: absolute;
    top: 0;
    left: 0;
    width: 275px;
    height:275px;
    border: 1px solid #000;
    overflow:hidden;
}
  
#canvas
{
    position: absolute;
    top: 0;
    left: 0;
    width: 275px;
    height:275px;
}

3.JavaScript

base.js

window.addEventListener("load", init, false);
  
function init()
{
    var offsetX = 0,
    offsetY = 0,
    ctx,
    theCanvas,
    theContents;
     
    theContents = document.getElementById("contents");
    offsetX = (theContents.currentStyle || document.defaultView.getComputedStyle(theContents,'')).width;
    offsetX = Number(offsetX.replace('px',''));
  
    offsetY = (theContents.currentStyle || document.defaultView.getComputedStyle(theContents,'')).height;
    offsetY = Number(offsetY.replace('px',''));
     
    ctx = document.getElementById('canvas').getContext("2d");
    ctx.clearRect(0, 0, 275, 275);
     
    var P = {x: offsetX / 2, y: offsetY};
    var Q = {x: offsetX / 2, y: -120};
 
    drawtree(P, Q, 6);
     
    function drawtree(a, b, n)
    {
        var STEM_RATIO = 0.15;
        var BRANCH_RATIO = 0.9;
         
        var c = {x: 0, y: 0};
        var d = {x: 0, y: 0};
        var e = {x: 0, y: 0};
         
        var sign = 1;
        var xx = 0;
        var yy = 0;
         
        var angle1 = 0;
        var angle2 = 0;
        var center_length = 0;
        var branch_length = 0;
         
        xx = b.x - a.x;
        yy = -(b.y - a.y);
         
        angle1 = Math.atan(yy / xx) + 30 * Math.PI / 180;
        angle2 = Math.atan(yy / xx) - 30 * Math.PI / 180;
         
        center_length = Math.sqrt(xx * xx + yy * yy) * (1 - STEM_RATIO);
        branch_length = BRANCH_RATIO * center_length;
         
        if(xx >= 0)
        {
            sign *= -1;
        }
         
        c.x = a.x + STEM_RATIO * xx;
        c.y = a.y - STEM_RATIO * yy;
        d.x = c.x - sign * branch_length * Math.cos(angle1);
        d.y = c.y + sign * branch_length * Math.sin(angle1);
        e.x = c.x - sign * branch_length * Math.cos(angle2);
        e.y = c.y + sign * branch_length * Math.sin(angle2);
         
        ctx.strokeStyle = "#000000";
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(a.x, a.y);
        ctx.lineTo(c.x, c.y);
        ctx.stroke();
         
        if(n > 0)
        {
            drawtree(c, d, n - 1);
            drawtree(c, e, n - 1);
        }
    }
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です