<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 9.11: FactorialTest.html -->
<!-- Factorial calculation with a recursive function. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Recursive Factorial Function</title>
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<style type = "text/css">
div {background-color: #000033}
</style>
</head>
<body>
<table>
<tr> <td>
<div id="Canvas" style="position: relative; width: 500px; height:400px; overflow: scroll;"> </div>
</td>
<td>
<form action = "">
<p> <span style=" color:#00AA00 ">
x1 y1
x2
y2 <br/>
<input id = "x1" type = "text" size="4" />
<input id = "y1" type = "text" size="4" />
<input id = "x2" type = "text" size="4" />
<input id = "y2" type = "text" size="4"/> <br/>
beta<br />
<input id = "beta" type = "text" /> <br/>
angle <br />
<input id = "angle" type = "text" /> <br/>
level of recursion <br />
<input id = "level" type = "text" />
<input type = "button" value = "draw tree"
onclick = "fractal_draw()" /><br /> <br/>
</span>
color <br/>
<select id="color">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="pink">pink</option>
<option value="#123400">random</option>
<option value="#00FF00">green</option>
<option value="#aabbcc">gray</option>
<option value="#BBBBBB">orange</option>
<option value="#FFFFFF">white</option>
</select>
</p>
</form>
</td>
</tr>
</table>
<script type = "text/javascript">
<!--
var a_div = document.getElementById("Canvas");
var jg = new jsGraphics(a_div);
jg.setStroke(3);
// calling the function
jg.setColor("blue");
fractal(400,300,240,20,0.5,35,4);
jg.setColor("red");
fractal(400,300,560,20,0.5,35, 4);
jg.setColor("orange");
fractal(400,300,400,600,0.5,35, 4);
// Recursive definition of fractal tree function
function fractal(x1, y1, x2, y2, beta, alfa_in, level)
{
// given the above information
// figuring out the middle point and the branch points
var xm, ym;
var xl, yl;
var xr, yr;
var alfa;
// what am i doing here ?
alfa = 3.1415926*alfa_in/180.0;
xm = x1 + (1-beta)*(x2 - x1); // review your algebra
ym = y1 + (1-beta)*(y2 - y1);
xl = xm + Math.cos(alfa)*(x2 - xm) - Math.sin(alfa)*(y2 - ym);
yl = ym + Math.sin(alfa)*(x2 - xm) + Math.cos(alfa)*(y2 - ym);
xr = xm + Math.cos(-alfa)*(x2 - xm) - Math.sin(-alfa)*(y2 - ym);
yr = ym + Math.sin(-alfa)*(x2 - xm) + Math.cos(-alfa)*(y2 - ym);
if(level == 1)
{
// Draw lines
//document.write("Bottom Point: "+x1+" "+y1+" to Middle point: "+xm+" "+ym);
jg.drawLine(x1,y1,xm,ym);
//document.write("<br> Middle point: "+xm+" "+ym+" to top: "+x2+" "+y2);
jg.drawLine(xm,ym,x2,y2);
//document.write("<br> Middle point: "+xm+" "+ym+" to Left point: "+xl+" "+yl+" ");
jg.drawLine(xm,ym,xl,yl);
//document.write("<br> Middle point: "+xm+" "+ym+" to Right point: "+xr+" "+yr+" ");
jg.drawLine(xm,ym,xr,yr);
}
else
{ // recursion, thinking recursively
fractal(x1,y1,xm,ym,beta,alfa_in, level-1);
fractal(xm,ym,x2,y2,beta,alfa_in, level-1);
fractal(xm,ym,xl,yl,beta,alfa_in, level-1);
fractal(xm,ym,xr,yr,beta,alfa_in, level-1);
}
} // end function fractal
// Async draw tiggered from the Form
// Recursive definition of fractal tree function
function fractal_draw()
{
var level;
var levelInput = document.getElementById("level");
level = levelInput.value;
var angleInput = document.getElementById("angle");
angle = angleInput.value;
var betaInput = document.getElementById("beta");
beta = betaInput.value;
var xInput = document.getElementById("x1");
var x1= parseInt(xInput.value);
var y1Input = document.getElementById("y1");
var y1= parseInt(y1Input.value);
var x2Input = document.getElementById("x2");
var x2= parseInt(x2Input.value);
var y2Input = document.getElementById("y2");
var y2= parseInt(y2Input.value);
var colorInput = document.getElementById("color");
var selectedColor = colorInput.value;
jg.clear();
jg.setColor(selectedColor);
jg.clear();
fractal(x1,y1, x2, y2, beta,angle,level);
jg.paint();
} // fractal_draw
jg.paint();
// -->
</script>
</body>
</html>
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
by: alexpercsiPosted on 2009-01-05 at 08:38:28ID: 23296740
The link you have posted is showing a "site is unavailable" error. Could you please post an updated link?