Skip to content

Commit 534f3e4

Browse files
reedspoolreedspool
committed
First commit
0 parents  commit 534f3e4

File tree

2 files changed

+224
-0
lines changed

2 files changed

+224
-0
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Starting with: http://www.davidxia.com/2011/02/draw-golden-rectangle-using-javascript/

‎davidxia.golden-ratio.html

+223
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
<html>
2+
<!--
3+
Copyright (C) 2012 David Xia
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21+
-->
22+
<head>
23+
<title>Golden Ratio Fun</title>
24+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
25+
26+
<script type="text/javascript">
27+
function loadCanvas(){
28+
// get available screen size
29+
var availWidth = $(window).width() - 20;
30+
var availHeight = $(window).height() - 20;
31+
32+
// instantiate golden ratio constant
33+
var PHI = (1+ Math.sqrt(5))/2;
34+
35+
// resize canvas based on golden ratio
36+
if(availWidth/availHeight > PHI){
37+
availWidth = availHeight * PHI;
38+
} else if(availWidth/availHeight < PHI){
39+
availHeight = availWidth/PHI;
40+
}
41+
42+
// add canvas HTML tag to body
43+
var canvasTag = '<canvas id="canvas" width="'+availWidth+'" height="'+availHeight+'"></canvas>';
44+
$('body').html(canvasTag);
45+
46+
// prepare to draw
47+
var canvas = $('canvas').get(0);
48+
if(canvas.getContext){
49+
var ctx = canvas.getContext('2d');
50+
}
51+
52+
// draw first inner golden rectangle
53+
var x1 = availWidth/PHI;
54+
ctx.beginPath();
55+
ctx.moveTo(x1, 0);
56+
ctx.lineTo(x1, availHeight);
57+
ctx.stroke();
58+
59+
// draw arc
60+
ctx.beginPath();
61+
ctx.moveTo(x1, availHeight);
62+
ctx.arc(x1, availHeight, x1, Math.PI, (3/2*Math.PI));
63+
ctx.stroke();
64+
65+
// draw second inner rectangle
66+
var y1 = availHeight/PHI;
67+
ctx.beginPath();
68+
ctx.moveTo(x1, y1);
69+
ctx.lineTo(availWidth, y1);
70+
ctx.stroke();
71+
72+
// draw arc
73+
ctx.beginPath();
74+
ctx.moveTo(x1, y1);
75+
ctx.arc(x1, y1, y1, (3/2*Math.PI), 0);
76+
ctx.stroke();
77+
78+
// draw 3rd
79+
var x2 = availWidth - (availWidth-x1)/PHI;
80+
ctx.beginPath();
81+
ctx.moveTo(x2, y1);
82+
ctx.lineTo(x2, availHeight);
83+
ctx.stroke();
84+
85+
// draw arc
86+
ctx.beginPath();
87+
ctx.moveTo(availWidth, y1);
88+
ctx.arc(x2, y1, (availHeight-y1), 0, (1/2*Math.PI));
89+
ctx.stroke();
90+
91+
// draw 4th
92+
var y2 = availHeight - (availHeight-y1)/PHI;
93+
ctx.beginPath();
94+
ctx.moveTo(x1, y2);
95+
ctx.lineTo(x2, y2);
96+
ctx.stroke();
97+
98+
// draw arc
99+
ctx.beginPath();
100+
ctx.moveTo(x2, y2);
101+
ctx.arc(x2, y2, (availHeight-y2), (1/2*Math.PI), Math.PI);
102+
ctx.stroke();
103+
104+
// draw 5th
105+
var x3 = x1 + (x2-x1)/PHI;
106+
ctx.beginPath();
107+
ctx.moveTo(x3, y1);
108+
ctx.lineTo(x3, y2);
109+
ctx.stroke();
110+
111+
// draw arc
112+
ctx.beginPath();
113+
ctx.moveTo(x3, y2);
114+
ctx.arc(x3, y2, (x3-x1), Math.PI, (3/2*Math.PI));
115+
ctx.stroke();
116+
117+
// draw 6th
118+
var y3 = y1 + (y2-y1)/PHI;
119+
ctx.beginPath();
120+
ctx.moveTo(x3, y3);
121+
ctx.lineTo(x2, y3);
122+
ctx.stroke();
123+
124+
// draw arc
125+
ctx.beginPath();
126+
ctx.moveTo(x3, y3);
127+
ctx.arc(x3, y3, (x2-x3), (3/2*Math.PI), 0);
128+
ctx.stroke();
129+
130+
// draw 7th
131+
var x4 = x2 - (x2-x3)/PHI;
132+
ctx.beginPath();
133+
ctx.moveTo(x4, y3);
134+
ctx.lineTo(x4, y2);
135+
ctx.stroke();
136+
137+
// draw arc
138+
ctx.beginPath();
139+
ctx.moveTo(x4, y3);
140+
ctx.arc(x4, y3, (x2-x4), 0, (1/2*Math.PI));
141+
ctx.stroke();
142+
143+
// draw 8th
144+
var y4 = y2 - (y2-y3)/PHI;
145+
ctx.beginPath();
146+
ctx.moveTo(x3, y4);
147+
ctx.lineTo(x4, y4);
148+
ctx.stroke();
149+
150+
// draw arc
151+
ctx.beginPath();
152+
ctx.moveTo(x4, y4);
153+
ctx.arc(x4, y4, (x4-x3), (1/2*Math.PI), Math.PI);
154+
ctx.stroke();
155+
156+
// draw 9th
157+
var x5 = x3 + (x4-x3)/PHI;
158+
ctx.beginPath();
159+
ctx.moveTo(x5, y3);
160+
ctx.lineTo(x5, y4);
161+
ctx.stroke();
162+
163+
// draw arc
164+
ctx.beginPath();
165+
ctx.moveTo(x5, y4);
166+
ctx.arc(x5, y4, (x5-x3), Math.PI, (3/2*Math.PI));
167+
ctx.stroke();
168+
169+
// draw 10th
170+
var y5 = y3 + (y4-y3)/PHI;
171+
ctx.beginPath();
172+
ctx.moveTo(x4, y5);
173+
ctx.lineTo(x5, y5);
174+
ctx.stroke();
175+
176+
// draw arc
177+
ctx.beginPath();
178+
ctx.moveTo(x5, y5);
179+
ctx.arc(x5, y5, (x4-x5), (3/2*Math.PI), 0);
180+
ctx.stroke();
181+
182+
// draw 11th
183+
var x6 = x4 - (x4-x5)/PHI;
184+
ctx.beginPath();
185+
ctx.moveTo(x6, y4);
186+
ctx.lineTo(x6, y5);
187+
ctx.stroke();
188+
189+
// draw arc
190+
ctx.beginPath();
191+
ctx.moveTo(x6, y5);
192+
ctx.arc(x6, y5, (x4-x6), 0, (1/2*Math.PI));
193+
ctx.stroke();
194+
195+
// draw 12th
196+
var y6 = y4 - (y4-y5)/PHI;
197+
ctx.beginPath();
198+
ctx.moveTo(x5, y6);
199+
ctx.lineTo(x6, y6);
200+
ctx.stroke();
201+
202+
// draw arc
203+
ctx.beginPath();
204+
ctx.moveTo(x6, y6);
205+
ctx.arc(x6, y6, (x6-x5), (1/2*Math.PI), Math.PI);
206+
ctx.stroke();
207+
208+
}
209+
210+
// redraws golden rectangles if window is resized
211+
$(window).resize(function() {
212+
loadCanvas();
213+
});
214+
</script>
215+
<style type="text/css">
216+
canvas { border: 2px solid black; }
217+
</style>
218+
</head>
219+
220+
221+
<body onload="loadCanvas()">
222+
</body>
223+
</html>

0 commit comments

Comments
 (0)