/prototypes/golden_ratio.html
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>