Andrus Development: Box Fractal written in Javascript

Friday, February 08, 2013

Box Fractal written in Javascript

Code Snippet

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Box Fractal</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>Box Fractal</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;
        var third = 0.333333;
 
        var g = document.getElementById("myCanvas");
        var ctx = g.getContext("2d");
        width = g.width;
        height = g.height;
        ctx.fillStyle = color;
        ctx.lineWidth = lineWidth;
 
        //ctx.beginPath();
        draw(width, height);
        //ctx.stroke();
 
        function draw(width, height) {
            //Draw initial block
            var upperLeft = new Point(0, 0);
            ctx.fillRect(upperLeft.X, upperLeft.Y, width, height);
 
            ctx.fillStyle = backgroundColor;
            drawBox(upperLeft, width, height);
        }
 
        function drawBox(upperLeft, width, height) {
            if (width * third > precision) {
                var top = new Point(upperLeft.X + width * third, upperLeft.Y);
                var left = new Point(upperLeft.X, upperLeft.Y + height * third);
                var right = new Point(upperLeft.X + 2 * width * third, upperLeft.Y + height * third);
                var bottom = new Point(upperLeft.X + width * third, upperLeft.Y + 2 * height * third);
 
                //Remove 4 squares
                ctx.fillRect(top.X, top.Y, width * third, height * third);
                ctx.fillRect(left.X, left.Y, width * third, height * third);
                ctx.fillRect(right.X, right.Y, width * third, height * third);
                ctx.fillRect(bottom.X, bottom.Y, width * third, height * third);
 
 
                //upperleft box
                drawBox(upperLeft, width * third, height * third);
                //upperright box
                drawBox(new Point(upperLeft.X + 2 * width * third, upperLeft.Y), width * third, height * third);
                //middle box
                drawBox(new Point(upperLeft.X + width * third, upperLeft.Y + height * third), width * third, height * third);
                //lowerleft box
                drawBox(new Point(upperLeft.X, upperLeft.Y + 2 * height * third), width * third, height * third);
                //lowerright box
                drawBox(new Point(upperLeft.X + 2 * width * third, upperLeft.Y + 2 * height * third), width * third, height * third);
 
            }
        }
    });
 
</script>
</body>
</html>

1 comment:

Unknown said...: Cool! I've heard about the Sierpinski triangle but not about the box fractal.

Here's a simple tutorial on how to create the famous Mandelbrot set in just 25 lines of code:

http://slicker.me/fractals/fractals.htm; June 23, 2016 8:34 AM

Andrus Development

About Me

Friday, February 08, 2013

Box Fractal written in Javascript

1 comment:

Total Pageviews