Andrus Development: Sierpinski's Triangle written in Javascript

Friday, February 01, 2013
Sierpinski's Triangle written in Javascript

Code Snippet

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Sierpinski Triangle</title>
    <link href="/Content/site.css" rel="stylesheet"/>
 
    <script src="/Scripts/modernizr-2.5.3.js"></script>
    
    <script src="/Scripts/jquery-1.7.1.js"></script>
 
    
</head>
<body>
    
<h2>Sierpinski Triangle</h2>
<canvas id="myCanvas" width="1600px" height="1200px"  style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
 
<script type="text/javascript">
 
    function Point(X,Y) {
        this.X = X;
        this.Y = Y;
    };
 
    function resizeFrame() {
        var h = $(window).height();
        var w = $(window).width();
        $("#myCanvas").css('height', h - 100);
        $("#myCanvas").css('width', w - 50);
    }
 
    function canvas() {
        this.height = $(window).height();
        this.width = $(window).width();
    }
 
    $(document).ready(function () {
        jQuery.event.add(window, "load", resizeFrame);
        jQuery.event.add(window, "resize", resizeFrame);
 
        var color = "red";
        var backgroundColor = "white";
        var lineWidth = 1;
        var precision = 1; //30,10,8
        //var canvasDim = new canvas();
 
        var g = document.getElementById("myCanvas");
        var ctx = g.getContext("2d");
        width = g.width;
        height = g.height;
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, width, height);
        ctx.strokeStyle = color;
        ctx.lineWidth = lineWidth;
 
        ctx.beginPath();
        draw(width, height);
        ctx.stroke();
 
 
        function drawLine(pt1, pt2) {
            ctx.moveTo(pt1.X, pt1.Y);
            ctx.lineTo(pt2.X, pt2.Y);
            //requestAnimationFrame(render);
        }
 
        function draw(width, height) {
            //Draw initial outer triangle
            var top = new Point(width >> 1, 0);
            var bottomLeft = new Point(0, height);
            var bottomRight = new Point(width, height);
 
            drawLine(top, bottomLeft);
            drawLine(bottomLeft, bottomRight);
            drawLine(bottomRight, top);
 
            drawSierp(top, bottomLeft, bottomRight);
        }
 
        function drawSierp(a, b, c) {
            if ((a.X - b.X) > precision) {
                drawLine(a, b);
                drawLine(b, c);
                drawLine(c, a);
                drawLine(a, new Point((a.X + b.X) >> 1, (a.Y + b.Y) >> 1));
                drawLine(b, new Point((a.X + b.X) >> 1, (a.Y + b.Y) >> 1));
                drawLine(c, new Point((b.X + c.X) >> 1, (b.Y + c.Y) >> 1));
                drawLine(a, new Point((c.X + a.X) >> 1, (c.Y + a.Y) >> 1));
                drawLine(b, new Point((b.X + c.X) >> 1, (b.Y + c.Y) >> 1));
                drawLine(c, new Point((c.X + a.X) >> 1, (c.Y + a.Y) >> 1));
 
                drawSierp(a, new Point((a.X + b.X) >> 1, (a.Y + b.Y) >> 1), new Point((c.X + a.X) >> 1, (c.Y + a.Y) >> 1));
                drawSierp(new Point((a.X + b.X) >> 1, (a.Y + b.Y) >> 1), b, new Point((b.X + c.X) >> 1, (b.Y + c.Y) >> 1));
                drawSierp(new Point((c.X + a.X) >> 1, (c.Y + a.Y) >> 1), new Point((b.X + c.X) >> 1, (b.Y + c.Y) >> 1), c);
            }
        }
 
    });
</script>
</body>
</html>
Andrus Development

About Me

Friday, February 01, 2013

Sierpinski's Triangle written in Javascript

No comments:

Total Pageviews
