Andrus Development: fractal

Showing posts with label fractal. Show all posts

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>

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>

Friday, October 31, 2008

Updated Fractal Viewer

I just updated my Fractal Viewer and is now downloadable from my SkyDrive.

What I did:

Convert from .Net 1.1 to .Net 3.5
Add little performance enhancements (parallel processing, bit shifting, less use of division, less converting, etc…)
Changed the structure of the program. Where before it was more like a C style program with one large Main() function. Now it incorporates a more OOP style.
Remove unnecessary imports.
Add “precision” functionality to the Fractals.
Move the Complex Systems on the screen to take up more room.
Made color changes take effect immediately, instead of having to refresh.

I don’t see much of a speed improvement, since there is not much I can do the functions to improve them. I was hoping to incorporate other techniques like asynchronous, threading, background workers, or better use of parallel processing, but this couldn’t be done because only one use of the control’s graphics can be used at a time.

Check list of what I still want to do:

Look into more improvements by trying to separate the drawing and point generating.
Add more Complex Systems and Fractals.
Try getting a zoom and move feature.
Improve color picking technique.
Improve image saving and add location to save to.
If possible, improve image detail of complex systems.

Andrus Development

About Me