golden_ratio.html | searchcode

/prototypes/golden_ratio.html

https://bitbucket.org/dotnetCarpenter/pragmatic
HTML | 203 lines | 170 code | 33 blank | 0 comment | 0 complexity | 024f46b44f749ef7a4e9fa3ea5b4cb5b MD5 | raw file

<html>
  <head>
    <title>Golden Ratio Fun</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <script type="text/javascript">
        function loadCanvas(){
            // get available screen size
            var availWidth = $(window).width() - 20;
            var availHeight = $(window).height() - 20;

            // instantiate golden ratio constant
            var PHI = (1+ Math.sqrt(5))/2;

            // resize canvas based on golden ratio
            if(availWidth/availHeight > PHI){
                availWidth = availHeight * PHI;
            } else if(availWidth/availHeight < PHI){
                availHeight = availWidth/PHI;
            }

            // add canvas HTML tag to body
            var canvasTag = '<canvas id="canvas" width="'+availWidth+'" height="'+availHeight+'"></canvas>';
            $('body').html(canvasTag);

            // prepare to draw
            var canvas = $('canvas').get(0);
            if(canvas.getContext){
                var ctx = canvas.getContext('2d');
            }

            // draw first inner golden rectangle
            var x1 = availWidth/PHI;
            ctx.beginPath();
            ctx.moveTo(x1, 0);
            ctx.lineTo(x1, availHeight);
            ctx.stroke();

            // draw arc
            ctx.beginPath();
            ctx.moveTo(x1, availHeight);
            ctx.arc(x1, availHeight, x1, Math.PI, (3/2*Math.PI));
            ctx.stroke();

            // draw second inner rectangle
            var y1 = availHeight/PHI;
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(availWidth, y1);
            ctx.stroke();

            // draw arc
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.arc(x1, y1, y1, (3/2*Math.PI), 0);
            ctx.stroke();

            // draw 3rd
            var x2 = availWidth - (availWidth-x1)/PHI;
            ctx.beginPath();
            ctx.moveTo(x2, y1);
            ctx.lineTo(x2, availHeight);
            ctx.stroke();

            // draw arc
            ctx.beginPath();
            ctx.moveTo(availWidth, y1);
            ctx.arc(x2, y1, (availHeight-y1), 0, (1/2*Math.PI));
            ctx.stroke();

            // draw 4th
            var y2 = availHeight - (availHeight-y1)/PHI;
            ctx.beginPath();
            ctx.moveTo(x1, y2);
            ctx.lineTo(x2, y2);
            ctx.stroke();

            // draw arc
            ctx.beginPath();
            ctx.moveTo(x2, y2);
            ctx.arc(x2, y2, (availHeight-y2), (1/2*Math.PI), Math.PI);
            ctx.stroke();

            // draw 5th
            var x3 = x1 + (x2-x1)/PHI;
            ctx.beginPath();
            ctx.moveTo(x3, y1);
            ctx.lineTo(x3, y2);
            ctx.stroke();

            // draw arc
            ctx.beginPath();
            ctx.moveTo(x3, y2);
            ctx.arc(x3, y2, (x3-x1), Math.PI, (3/2*Math.PI));
            ctx.stroke();

            // draw 6th
            var y3 = y1 + (y2-y1)/PHI;
            ctx.beginPath();
            ctx.moveTo(x3, y3);
            ctx.lineTo(x2, y3);
            ctx.stroke();

            // draw arc
            ctx.beginPath();
            ctx.moveTo(x3, y3);
            ctx.arc(x3, y3, (x2-x3), (3/2*Math.PI), 0);
            ctx.stroke();

            // draw 7th
            var x4 = x2 - (x2-x3)/PHI;
            ctx.beginPath();
            ctx.moveTo(x4, y3);
            ctx.lineTo(x4, y2);
            ctx.stroke();

            // draw arc
            ctx.beginPath();
            ctx.moveTo(x4, y3);
            ctx.arc(x4, y3, (x2-x4), 0, (1/2*Math.PI));
            ctx.stroke();

            // draw 8th
            var y4 = y2 - (y2-y3)/PHI;
            ctx.beginPath();
            ctx.moveTo(x3, y4);
            ctx.lineTo(x4, y4);
            ctx.stroke();

            // draw arc
            ctx.beginPath();
            ctx.moveTo(x4, y4);
            ctx.arc(x4, y4, (x4-x3), (1/2*Math.PI), Math.PI);
            ctx.stroke();

            // draw 9th
            var x5 = x3 + (x4-x3)/PHI;
            ctx.beginPath();
            ctx.moveTo(x5, y3);
            ctx.lineTo(x5, y4);
            ctx.stroke();

            // draw arc
            ctx.beginPath();
            ctx.moveTo(x5, y4);
            ctx.arc(x5, y4, (x5-x3), Math.PI, (3/2*Math.PI));
            ctx.stroke();

            // draw 10th
            var y5 = y3 + (y4-y3)/PHI;
            ctx.beginPath();
            ctx.moveTo(x4, y5);
            ctx.lineTo(x5, y5);
            ctx.stroke();

            // draw arc
            ctx.beginPath();
            ctx.moveTo(x5, y5);
            ctx.arc(x5, y5, (x4-x5), (3/2*Math.PI), 0);
            ctx.stroke();

            // draw 11th
            var x6 = x4 - (x4-x5)/PHI;
            ctx.beginPath();
            ctx.moveTo(x6, y4);
            ctx.lineTo(x6, y5);
            ctx.stroke();

            // draw arc
            ctx.beginPath();
            ctx.moveTo(x6, y5);
            ctx.arc(x6, y5, (x4-x6), 0, (1/2*Math.PI));
            ctx.stroke();

            // draw 12th
            var y6 = y4 - (y4-y5)/PHI;
            ctx.beginPath();
            ctx.moveTo(x5, y6);
            ctx.lineTo(x6, y6);
            ctx.stroke();

            // draw arc
            ctx.beginPath();
            ctx.moveTo(x6, y6);
            ctx.arc(x6, y6, (x6-x5), (1/2*Math.PI), Math.PI);
            ctx.stroke();

        }

        // redraws golden rectangles if window is resized
        $(window).resize(function() {
            loadCanvas();
        });
    </script>
    <style type="text/css">
      canvas { border: 2px solid black; }
    </style>
</head>


<body onload="loadCanvas()">
</body>
</html>