About Me

My photo
Northglenn, Colorado, United States
I'm primarily a BI Developer on the Microsoft stack. I do sometimes touch upon other Microsoft stacks ( web development, application development, and sql server development).

Friday, February 08, 2013

Box Fractal written in Javascript





Code Snippet
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width" />
  6.     <title>Box Fractal</title>
  7.     <link href="/Content/site.css" rel="stylesheet"/>
  8.  
  9.     <script src="/Scripts/modernizr-2.5.3.js"></script>
  10.     
  11.     <script src="/Scripts/jquery-1.7.1.js"></script>
  12.  
  13.     
  14. </head>
  15. <body>
  16.     
  17.  
  18. <h2>Box Fractal</h2>
  19.  
  20. <canvas id="myCanvas" width="1600px" height="1200px"  style="border:1px solid #d3d3d3;">
  21. Your browser does not support the HTML5 canvas tag.
  22. </canvas>
  23.  
  24. <script type="text/javascript">
  25.     function Point(X,Y) {
  26.         this.X = X;
  27.         this.Y = Y;
  28.     };
  29.  
  30.     function resizeFrame() {
  31.         var h = $(window).height();
  32.         var w = $(window).width();
  33.         $("#myCanvas").css('height', h - 100);
  34.         $("#myCanvas").css('width', w - 50);
  35.     }
  36.  
  37.     function canvas() {
  38.         this.height = $(window).height();
  39.         this.width = $(window).width();
  40.     }
  41.  
  42.     $(document).ready(function () {
  43.         jQuery.event.add(window, "load", resizeFrame);
  44.         jQuery.event.add(window, "resize", resizeFrame);
  45.  
  46.         var color = "red";
  47.         var backgroundColor = "white";
  48.         var lineWidth = 1;
  49.         var precision = 1;
  50.         var third = 0.333333;
  51.  
  52.         var g = document.getElementById("myCanvas");
  53.         var ctx = g.getContext("2d");
  54.         width = g.width;
  55.         height = g.height;
  56.         ctx.fillStyle = color;
  57.         ctx.lineWidth = lineWidth;
  58.  
  59.         //ctx.beginPath();
  60.         draw(width, height);
  61.         //ctx.stroke();
  62.  
  63.         function draw(width, height) {
  64.             //Draw initial block
  65.             var upperLeft = new Point(0, 0);
  66.             ctx.fillRect(upperLeft.X, upperLeft.Y, width, height);
  67.  
  68.             ctx.fillStyle = backgroundColor;
  69.             drawBox(upperLeft, width, height);
  70.         }
  71.  
  72.         function drawBox(upperLeft, width, height) {
  73.             if (width * third > precision) {
  74.                 var top = new Point(upperLeft.X + width * third, upperLeft.Y);
  75.                 var left = new Point(upperLeft.X, upperLeft.Y + height * third);
  76.                 var right = new Point(upperLeft.X + 2 * width * third, upperLeft.Y + height * third);
  77.                 var bottom = new Point(upperLeft.X + width * third, upperLeft.Y + 2 * height * third);
  78.  
  79.                 //Remove 4 squares
  80.                 ctx.fillRect(top.X, top.Y, width * third, height * third);
  81.                 ctx.fillRect(left.X, left.Y, width * third, height * third);
  82.                 ctx.fillRect(right.X, right.Y, width * third, height * third);
  83.                 ctx.fillRect(bottom.X, bottom.Y, width * third, height * third);
  84.  
  85.  
  86.                 //upperleft box
  87.                 drawBox(upperLeft, width * third, height * third);
  88.                 //upperright box
  89.                 drawBox(new Point(upperLeft.X + 2 * width * third, upperLeft.Y), width * third, height * third);
  90.                 //middle box
  91.                 drawBox(new Point(upperLeft.X + width * third, upperLeft.Y + height * third), width * third, height * third);
  92.                 //lowerleft box
  93.                 drawBox(new Point(upperLeft.X, upperLeft.Y + 2 * height * third), width * third, height * third);
  94.                 //lowerright box
  95.                 drawBox(new Point(upperLeft.X + 2 * width * third, upperLeft.Y + 2 * height * third), width * third, height * third);
  96.  
  97.             }
  98.         }
  99.     });
  100.  
  101. </script>
  102. </body>
  103. </html>

1 comment:

Irving Dallas 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