Фрактал — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
(→‎top)
(→‎Код программы)
Строка 21: Строка 21:
 
a_21 = 1;
 
a_21 = 1;
 
a_22 = 1;
 
a_22 = 1;
−
const N = 150000;
+
var N = 200000;
 
var angle = 0;
 
var angle = 0;
 
var way;
 
var way;
 
var clear;
 
var clear;
 
var butt = document.getElementById('addButton');
 
var butt = document.getElementById('addButton');
 +
X = []; // массив начальных иксов
 +
Y = []; // массив начальных игриков
 +
var move = false;
 +
var x_min = 0; var y_min = 0;
 +
var x_max = 1; var y_max = 1;
 +
var x_move; var y_move;
 +
var x_oldmin = 0;
 +
var x_oldmax = 1000;
 +
var y_oldmin = 0;
 +
var y_oldmax = 1000;
 +
var numberof;
 +
var z = 1;
 +
var RGB = [];
 +
var z2 = 1;
 +
var iterations = document.getElementById('number_it');
 +
 +
iterations.onchange = function () {
 +
N = document.getElementById('number_it').value;
 +
}
 
 
 
a11_ch.onchange = function() {
 
a11_ch.onchange = function() {
Строка 60: Строка 79:
 
}
 
}
  
−
butt.onclick = function () {  
+
butt.onclick = function () {
−
ctx.strokeStyle = "rgb("+
+
r = Math.floor(Math.random()*256);
−
            Math.floor(Math.random()*256)+","+
+
g = Math.floor(Math.random()*256);
−
            Math.floor(Math.random()*256)+","+
+
b = Math.floor(Math.random()*256);
−
            Math.floor(Math.random()*256)+")";
+
RGB.push(r);
 +
RGB.push(g);
 +
RGB.push(b);
 +
ctx.fillStyle = "rgb("+
 +
            r+","+
 +
            g+","+
 +
            b+")";
 
}
 
}
 
a11.onchange = function() {
 
a11.onchange = function() {
Строка 97: Строка 122:
 
 
 
cnv.onmousedown = function() {
 
cnv.onmousedown = function() {
 +
var zoom = document.getElementById('zoom_check');
 +
if (!zoom.checked) {
 
var rect = cnv.getBoundingClientRect();
 
var rect = cnv.getBoundingClientRect();
−
x = (event.clientX - rect.left)/scale;
+
if (z != 1) {
−
y = (event.clientY - rect.top)/scale;
+
z2 = x_max - x_min;
 +
x = x_min + (event.clientX - rect.left)*z2/scale;
 +
y = y_min + (event.clientY - rect.top)*z2/scale;
 +
} else {
 +
x = (event.clientX - rect.left)/scale;
 +
y = (event.clientY - rect.top)/scale;
 +
}
 
x_fix = x;
 
x_fix = x;
 
y_fix = y;
 
y_fix = y;
 
clear = document.getElementsByName('clear_rect');
 
clear = document.getElementsByName('clear_rect');
 
if (clear[1].checked == true) {
 
if (clear[1].checked == true) {
−
ctx.strokeStyle = "rgb("+
+
r = Math.floor(Math.random()*256);
−
            Math.floor(Math.random()*256)+","+
+
g = Math.floor(Math.random()*256);
−
            Math.floor(Math.random()*256)+","+
+
b = Math.floor(Math.random()*256);
−
            Math.floor(Math.random()*256)+")";
+
RGB.push(r);
 +
RGB.push(g);
 +
RGB.push(b);
 +
ctx.fillStyle = "rgb("+
 +
            r+","+
 +
            g+","+
 +
            b+")";
 
} else {
 
} else {
 
ctx.clearRect(0,0,w,h);
 
ctx.clearRect(0,0,w,h);
 +
X = [];
 +
Y = [];
 
ctx.beginPath();
 
ctx.beginPath();
 
ctx.arc(x*scale,y*scale,3,0,2*Math.PI);
 
ctx.arc(x*scale,y*scale,3,0,2*Math.PI);
−
ctx.fillStyle = 'blue';
+
ctx.strokeStyle = 'blue';
−
ctx.fill();
+
ctx.stroke();
 
}
 
}
 +
X.push(x);
 +
Y.push(y);
 
 
 
if (angle != 0) {
 
if (angle != 0) {
Строка 132: Строка 175:
 
 
 
control();
 
control();
 +
} else {
 +
var rect = cnv.getBoundingClientRect();
 +
z2 = x_max - x_min;
 +
x_oldmin = x_min*scale;
 +
y_oldmin = y_min*scale;
 +
x_oldmax = x_max*scale;
 +
y_oldmax = y_max*scale;
 +
x_min = (event.clientX - rect.left)*z2 + x_oldmin;
 +
y_min = (event.clientY - rect.top)*z2 + y_oldmin;
 +
x_relativemin = event.clientX - rect.left;
 +
y_relativemin = event.clientY - rect.top;
 +
ctx.beginPath();
 +
ctx.rect(event.clientX - rect.left,event.clientY - rect.top,1,1);
 +
ctx.fillStyle = 'blue';
 +
ctx.fill();
 +
move = true;
 +
}
 +
 +
 +
}
 +
 +
cnv.onmousemove = function () {
 +
if (move) {
 +
var rect = cnv.getBoundingClientRect();
 +
y_move = (event.clientY - rect.top);
 +
x_move = (y_move-y_relativemin) + x_relativemin;
 +
ctx.beginPath();
 +
ctx.arc(x_move,y_move,3,0,2*Math.PI);
 +
ctx.fill();
 +
}
 +
}
 
 
 +
cnv.onmouseup = function () {
 +
zoom = document.getElementById('zoom_check');
 +
if (zoom.checked) {
 +
x_relativemax = x_move;
 +
y_relativemax = y_move;
 +
if (y_move < y_min) {
 +
y_max = y_min;
 +
y_min = y_move*z2 + y_oldmin;
 +
x_max = x_min;
 +
x_min = x_move*z2 + x_oldmin;
 +
} else {
 +
y_max = y_move*z2 + y_oldmin;
 +
x_max = x_move*z2 + x_oldmin;
 +
}
 +
x_min = x_min/scale;
 +
y_min = y_min/scale;
 +
x_max = x_max/scale;
 +
y_max = y_max/scale;
 +
 +
z = z*scale/(x_relativemax - x_relativemin);
 +
ctx.clearRect(0,0,w,h);
 +
move = false;
 +
control();
 +
}
 
}
 
}
  
Строка 141: Строка 239:
 
 
 
function coord() {
 
function coord() {
−
+
zoom = document.getElementById('zoom_check');
 
way = document.getElementsByName('ways');
 
way = document.getElementsByName('ways');
−
if (way[0].checked == true) {  
+
if (way[0].checked == true) {  
−
numb1 = a_11*x+a_12*y;
+
numb1 = a_11*x+a_12*y;
−
numb2 = a_21*x+a_22*y;
+
numb2 = a_21*x+a_22*y;
−
x = Func(numb1);
+
x = Func(numb1);
−
y = Func(numb2);
+
y = Func(numb2);
−
}
+
}
−
if (way[1].checked == true) {
+
if (way[1].checked == true) {
−
numb1 = a_11*x+a_12*y;
+
numb1 = a_11*x+a_12*y;
−
x = Func(numb1);
+
x = Func(numb1);
−
numb2 = a_21*x+a_22*y;
+
numb2 = a_21*x+a_22*y;
−
y = Func(numb2);
+
y = Func(numb2);
−
}
+
}
−
 
 
}
 
}
 
function draw() {  
 
function draw() {  
−
ctx.beginPath();
+
zoom = document.getElementById('zoom_check');
−
ctx.rect(x*scale,y*scale,1,1);
+
if (zoom.checked) {
−
ctx.stroke();
+
if ((x>x_min)&&(x<x_max)&&(y>y_min)&&(y<y_max)) {
 +
ctx.beginPath();
 +
ctx.rect((x-x_min)*z*scale,(y-y_min)*z*scale,1,1);
 +
ctx.fill();
 +
}
 +
} else {
 +
if (z != 1) {
 +
if ((x>x_min)&&(x<x_max)&&(y>y_min)&&(y<y_max)) {
 +
ctx.beginPath();
 +
ctx.rect((x-x_min)*z*scale,(y-y_min)*z*scale,1,1);
 +
ctx.fill();
 +
}
 +
} else {
 +
ctx.beginPath();
 +
ctx.rect(x*scale,y*scale,1,1);
 +
ctx.fill();
 +
 +
}
 +
}
 
}
 
}
 
 
 
function control () {
 
function control () {
−
for (j = 0;j<=N; j++){
+
zoom = document.getElementById('zoom_check');
−
coord();
+
if (zoom.checked) {
−
draw();
+
numberof = X.length;
 +
for (m = 0; m<numberof; m++) {
 +
x = X[m];
 +
y = Y[m];
 +
r = Number(RGB[m*3]);
 +
g = Number(RGB[m*3+1]);
 +
b = Number(RGB[m*3+2]);
 +
ctx.fillStyle = "rgb("+r+","+g+","+b+")";
 +
for (j = 0;j<=N; j++){
 +
coord();
 +
draw();
 +
}
 +
}
 +
} else {
 +
for (j = 0;j<=N; j++){
 +
coord();
 +
draw();
 +
}
 
}
 
}
 
}
 
}
Строка 173: Строка 305:
 
var k = Number(N_exp);
 
var k = Number(N_exp);
 
ctx.clearRect(0,0,w,h);
 
ctx.clearRect(0,0,w,h);
 +
X = [];
 +
Y = [];
 +
RGB = [];
 
if (N_exp == 1) { document.getElementsByName('ways')[1].checked = true; x = 0.34; y = 0.31; angle = 0; a_11 = 1; a_12 = 0.5;     a_21 = -0.5; a_22 = 1; }
 
if (N_exp == 1) { document.getElementsByName('ways')[1].checked = true; x = 0.34; y = 0.31; angle = 0; a_11 = 1; a_12 = 0.5;     a_21 = -0.5; a_22 = 1; }
 
if (N_exp == 2) { document.getElementsByName('ways')[0].checked = true; x = 1/4; y = 1/4; angle = 0; a_11 = 1;     a_12 = 0.01; a_21 = 0.01; a_22 = -1; } 
 
if (N_exp == 2) { document.getElementsByName('ways')[0].checked = true; x = 1/4; y = 1/4; angle = 0; a_11 = 1;     a_12 = 0.01; a_21 = 0.01; a_22 = -1; } 
Строка 184: Строка 319:
 
if (N_exp) {
 
if (N_exp) {
 
 
−
a11.value = a_11;  a11_ch.value = a_11; angle_rad.value = angle;
+
a11.value = a_11;  a11_ch.value = a_11; angle_rad.value = angle; X.push(x); Y.push(y);
−
a12.value = a_12;  a12_ch.value = a_12;
+
a12.value = a_12;  a12_ch.value = a_12; X.push(x); Y.push(y);
 
a21.value = a_21;  a21_ch.value = a_21;
 
a21.value = a_21;  a21_ch.value = a_21;
 
a_22.value = a_22; a22_ch.value = a_22;
 
a_22.value = a_22; a22_ch.value = a_22;
 
}
 
}
 +
r = Math.floor(Math.random()*256);
 +
g = Math.floor(Math.random()*256);
 +
b = Math.floor(Math.random()*256);
 +
RGB.push(r);
 +
RGB.push(g);
 +
RGB.push(b);
 +
ctx.fillStyle = "rgb("+
 +
        r+","+
 +
        g+","+
 +
        b+")";
 
}
 
}
 
num.onchange = function() { set_exp(document.getElementById('num').value); control();}
 
num.onchange = function() { set_exp(document.getElementById('num').value); control();}
−
+
 
  
 
}
 
}
Строка 203: Строка 348:
 
<meta charset="UTF-8">
 
<meta charset="UTF-8">
 
<title> Fractals </title>
 
<title> Fractals </title>
−
<script src = 'Fractals_bor.js'>
+
<script src = 'Fractals.js'>
 
  </script>
 
  </script>
 
</head>
 
</head>
Строка 211: Строка 356:
 
<label><input type='text' id='a11' value='1' ><b>A_11</b></label>  
 
<label><input type='text' id='a11' value='1' ><b>A_11</b></label>  
 
<label><input type='text' id='a12' value='1' ><b>A_12</b></label>
 
<label><input type='text' id='a12' value='1' ><b>A_12</b></label>
 +
&emsp;&emsp;&hairsp;&hairsp;<label><input type='text' id='number_it' value ='200000'><b>Количество итераций</b></label>
 
<br><b>(*) Включить очистку холста после клика? </b>
 
<br><b>(*) Включить очистку холста после клика? </b>
 
<label><input type = 'radio' name = 'clear_rect' value = 'yes'><b>Да</b></label>
 
<label><input type = 'radio' name = 'clear_rect' value = 'yes'><b>Да</b></label>
Строка 218: Строка 364:
 
</br>
 
</br>
 
<br><b> Или меняйте коэффициенты с помощью ползунков:</b>
 
<br><b> Или меняйте коэффициенты с помощью ползунков:</b>
 +
&emsp;&emsp;&hairsp;&hairsp;<label><b>Режим <I>ZOOM'а</I><input type = 'checkbox' id = 'zoom_check'></b></label>
 
<br><input type = 'range' id='a11_ch' min = '-2' max = '2' step = '0.05' value = '1'>
 
<br><input type = 'range' id='a11_ch' min = '-2' max = '2' step = '0.05' value = '1'>
 
<input type = 'range' id='a12_ch' min = '-2' max = '2' step = '0.05' value = '1'>
 
<input type = 'range' id='a12_ch' min = '-2' max = '2' step = '0.05' value = '1'>

Версия 16:47, 26 июля 2020

Программа позволяет строить фрактальные и простые структуры при заданных начальных условиях: координат "x" и "y" исходной точки, от которой будут высчитываться координаты остальных, и коэффициентах, участвующих в расчетах. Или же расчет новых точек можно задать с помощью задания угла поворота исходной

Код программы

Код программы на языке JavaScript: 
  1 window.addEventListener('load',main,false);
  2 function main () {
  3 	var x; var y;
  4 	var x_fix , y_fix;
  5 	var ctx = cnv.getContext('2d');
  6 	var h = cnv.height;
  7 	var w = cnv.width;
  8 	var scale = 1000;
  9 	var a_11; var a_12; var a_21; var a_22;
 10 	var numb1; var numb2; var decim;
 11 	var interv;
 12 	a_11 = 1;
 13 	a_12 = 1;
 14 	a_21 = 1;
 15 	a_22 = 1;
 16 	var N = 200000;
 17 	var angle = 0;
 18 	var way;
 19 	var clear;
 20 	var butt = document.getElementById('addButton');
 21 	X = []; // массив начальных иксов
 22 	Y = []; // массив начальных игриков
 23 	var move = false;
 24 	var x_min = 0; var y_min = 0;
 25 	var x_max = 1; var y_max = 1;
 26 	var x_move; var y_move;
 27 	var x_oldmin = 0;
 28 	var x_oldmax = 1000;
 29 	var y_oldmin = 0;
 30 	var y_oldmax = 1000;
 31 	var numberof;
 32 	var z = 1;
 33 	var RGB = [];
 34 	var z2 = 1;
 35 	var iterations = document.getElementById('number_it');
 36 	
 37 	iterations.onchange = function () {
 38 		N = document.getElementById('number_it').value;
 39 	}
 40 	
 41 	a11_ch.onchange = function() {
 42 		ctx.clearRect(0,0,w,h);
 43 		a_11 = document.getElementById('a11_ch').value;
 44 		document.getElementById('a11').value = a_11;
 45 		control();
 46 		x = x_fix;
 47 		y = y_fix;
 48 	}
 49 	a12_ch.onchange = function() {
 50 		ctx.clearRect(0,0,w,h);
 51 		a_12 = document.getElementById('a12_ch').value;
 52 		document.getElementById('a12').value = a_12;
 53 		control();
 54 		x = x_fix;
 55 		y = y_fix;
 56 	}
 57 	a21_ch.onchange = function() {
 58 		ctx.clearRect(0,0,w,h);
 59 		a_21 = document.getElementById('a21_ch').value;
 60 		document.getElementById('a21').value = a_21;
 61 		control();
 62 		x = x_fix;
 63 		y = y_fix;
 64 	}
 65 	a22_ch.onchange = function() {
 66 		ctx.clearRect(0,0,w,h);
 67 		a_22 = document.getElementById('a22_ch').value;
 68 		document.getElementById('a22').value = a_22;
 69 		control();
 70 		x = x_fix;
 71 		y = y_fix;
 72 	}
 73 
 74 	butt.onclick = function () {
 75 	r = Math.floor(Math.random()*256);
 76 	g = Math.floor(Math.random()*256);
 77 	b = Math.floor(Math.random()*256);
 78 	RGB.push(r);
 79 	RGB.push(g);
 80 	RGB.push(b);
 81 	ctx.fillStyle = "rgb("+
 82             r+","+
 83             g+","+
 84             b+")";
 85 	}
 86 	a11.onchange = function() {
 87 		a_11 = parseFloat(document.getElementById('a11').value);
 88 		document.getElementById('angle_rad').value = 0;
 89 		document.getElementById('num').value = 0;
 90 		angle = 0;
 91 	}
 92 	a12.onchange = function() {
 93 		a_12 = parseFloat(document.getElementById('a12').value);
 94 		document.getElementById('angle_rad').value = 0;
 95 		document.getElementById('num').value = 0;
 96 		angle = 0;
 97 	}
 98 	a21.onchange = function() {
 99 		a_21 = parseFloat(document.getElementById('a21').value);
100 		document.getElementById('angle_rad').value = 0;
101 		document.getElementById('num').value = 0;
102 		angle = 0;
103 	}
104 	a22.onchange = function() {
105 		a_22 = parseFloat(document.getElementById('a22').value);
106 		document.getElementById('angle_rad').value = 0;
107 		document.getElementById('num').value = 0;
108 		angle = 0;
109 	}
110 	
111 	angle_rad.onchange = function() {
112 		angle = parseFloat(document.getElementById('angle_rad').value);
113 		document.getElementById('num').value = 0;
114 	}
115 		
116 	cnv.onmousedown = function() {
117 		var zoom = document.getElementById('zoom_check');
118 		if (!zoom.checked) {
119 		var rect = cnv.getBoundingClientRect();
120 		if (z != 1) {
121 			z2 = x_max - x_min;
122 			x = x_min + (event.clientX - rect.left)*z2/scale;
123 			y = y_min + (event.clientY - rect.top)*z2/scale;
124 		} else {
125 			x = (event.clientX - rect.left)/scale;
126 			y = (event.clientY - rect.top)/scale;
127 		}
128 		x_fix = x;
129 		y_fix = y;
130 		clear = document.getElementsByName('clear_rect');
131 		if (clear[1].checked == true) {
132 			r = Math.floor(Math.random()*256);
133 			g = Math.floor(Math.random()*256);
134 			b = Math.floor(Math.random()*256);
135 			RGB.push(r);
136 			RGB.push(g);
137 			RGB.push(b);
138 		ctx.fillStyle = "rgb("+
139             r+","+
140             g+","+
141             b+")";
142 		} else {
143 		ctx.clearRect(0,0,w,h);
144 		X = [];
145 		Y = [];
146 		ctx.beginPath();
147 		ctx.arc(x*scale,y*scale,3,0,2*Math.PI);
148 		ctx.strokeStyle = 'blue';
149 		ctx.stroke();
150 		}
151 		X.push(x);
152 		Y.push(y);
153 		
154 		if (angle != 0) {
155 			a_11 = Math.cos(angle);
156 			a_22 = a_11;
157 			a_12 = Math.sin(angle);
158 			a_21 = -a_12;
159 			document.getElementById('a11').value = a_11;
160 			document.getElementById('a12').value = a_12;
161 			document.getElementById('a21').value = a_21;
162 			document.getElementById('a22').value = a_22;
163 			document.getElementById('a11_ch').value = a_11;
164 			document.getElementById('a12_ch').value = a_12;
165 			document.getElementById('a21_ch').value = a_21;
166 			document.getElementById('a22_ch').value = a_22;
167 		}
168 		
169 		control();
170 		} else { 
171 		var rect = cnv.getBoundingClientRect();
172 		z2 = x_max - x_min;
173 		x_oldmin = x_min*scale;
174 		y_oldmin = y_min*scale;
175 		x_oldmax = x_max*scale;
176 		y_oldmax = y_max*scale;
177 		x_min = (event.clientX - rect.left)*z2 + x_oldmin;
178 		y_min = (event.clientY - rect.top)*z2 + y_oldmin;
179 		x_relativemin = event.clientX - rect.left;
180 		y_relativemin = event.clientY - rect.top;
181 		ctx.beginPath();
182 		ctx.rect(event.clientX - rect.left,event.clientY - rect.top,1,1);
183 		ctx.fillStyle = 'blue';
184 		ctx.fill();
185 		move = true;
186 		}
187 		
188 	
189 	}
190 
191 	cnv.onmousemove = function () {
192 		if (move) {
193 		var rect = cnv.getBoundingClientRect();
194 		y_move = (event.clientY - rect.top);
195 		x_move = (y_move-y_relativemin) + x_relativemin;
196 		ctx.beginPath();
197 		ctx.arc(x_move,y_move,3,0,2*Math.PI);
198 		ctx.fill();
199 		}
200 	}
201 	
202 	cnv.onmouseup = function () {
203 		zoom = document.getElementById('zoom_check');
204 		if (zoom.checked) { 
205 		x_relativemax = x_move;
206 		y_relativemax = y_move;
207 			if (y_move < y_min) {
208 				y_max = y_min;
209 				y_min = y_move*z2 + y_oldmin;
210 				x_max = x_min;
211 				x_min = x_move*z2 + x_oldmin;	
212 			} else {
213 				y_max = y_move*z2 + y_oldmin;
214 				x_max = x_move*z2 + x_oldmin;
215 			}
216 			x_min = x_min/scale;
217 			y_min = y_min/scale;
218 			x_max = x_max/scale;
219 			y_max = y_max/scale;
220 			
221 			z = z*scale/(x_relativemax - x_relativemin);
222 			ctx.clearRect(0,0,w,h);
223 			move = false;
224 			control();
225 		}
226 	}
227 
228 	function Func (numb) {
229 		decim = parseFloat(numb) - Math.floor(numb);
230 		return(decim);
231 	}
232 	
233 	function coord() {
234 		zoom = document.getElementById('zoom_check');
235 		way = document.getElementsByName('ways');
236 			if (way[0].checked == true) { 
237 				numb1 = a_11*x+a_12*y;
238 				numb2 = a_21*x+a_22*y;
239 				x = Func(numb1);
240 				y = Func(numb2);
241 			}
242 			if (way[1].checked == true) {
243 				numb1 = a_11*x+a_12*y;
244 				x = Func(numb1);
245 				numb2 = a_21*x+a_22*y;
246 				y = Func(numb2);
247 			}
248 	}
249 	function draw() { 
250 		zoom = document.getElementById('zoom_check');
251 		if (zoom.checked) { 
252 			if ((x>x_min)&&(x<x_max)&&(y>y_min)&&(y<y_max)) {
253 				ctx.beginPath();
254 				ctx.rect((x-x_min)*z*scale,(y-y_min)*z*scale,1,1);
255 				ctx.fill();
256 			}
257 		} else {
258 			if (z != 1) {
259 				if ((x>x_min)&&(x<x_max)&&(y>y_min)&&(y<y_max)) {
260 				ctx.beginPath();
261 				ctx.rect((x-x_min)*z*scale,(y-y_min)*z*scale,1,1);
262 				ctx.fill();
263 				} 
264 			} else {
265 			ctx.beginPath();
266 			ctx.rect(x*scale,y*scale,1,1);
267 			ctx.fill();
268 				
269 			}
270 		}
271 	}
272 	
273 	function control () {
274 		zoom = document.getElementById('zoom_check');
275 		if (zoom.checked) {
276 			numberof = X.length;
277 			for (m = 0; m<numberof; m++) {
278 				x = X[m];
279 				y = Y[m];
280 				r = Number(RGB[m*3]);
281 				g = Number(RGB[m*3+1]);
282 				b = Number(RGB[m*3+2]);
283 				ctx.fillStyle = "rgb("+r+","+g+","+b+")";
284 				for (j = 0;j<=N; j++){
285 				coord();
286 				draw();
287 				}
288 			}
289 		} else {
290 			for (j = 0;j<=N; j++){
291 				coord();
292 				draw();
293 				}
294 		}
295 	}
296 
297 	function set_exp(N_exp) {
298 		var k = Number(N_exp);
299 		ctx.clearRect(0,0,w,h);
300 		X = [];
301 		Y = [];
302 		RGB = [];
303 		if (N_exp == 1) { document.getElementsByName('ways')[1].checked = true; x = 0.34; y = 0.31; angle = 0; a_11 = 1; 	a_12 = 0.5;	    a_21 = -0.5;	a_22 = 1; } 			
304 		if (N_exp == 2) { document.getElementsByName('ways')[0].checked = true; x = 1/4; y = 1/4; angle = 0; a_11 = 1;	    a_12 = 0.01; 	a_21 = 0.01;	a_22 = -1; }  	 		
305 		if (N_exp == 3) { document.getElementsByName('ways')[0].checked = true; x = 1/2; y = 1/2; angle = 0; a_11 = 1;     a_12 = 0.32;	a_21 = 0.32;	a_22 = -1; } 
306 		if (N_exp == 4) { document.getElementsByName('ways')[0].checked = true; x = 1/2; y = 1/2; angle = 0; a_11 = 0.9;   a_12 = 0.1;	    a_21 = -0.1;	a_22 = 1.2; }
307 		if (N_exp == 5) { document.getElementsByName('ways')[1].checked = true; x = 1/4; y = 1/4; angle = 3; a_11 = Math.cos(angle); a_12 = Math.sin(angle); a_21 = -a_12; a_22 = a_11; }
308 		if (N_exp == 6) { document.getElementsByName('ways')[0].checked = true; x = 1/2; y = 1/2; angle = 0; a_11 = 1;   a_12 = 1.5;	    a_21 = 0.01;	a_22 = -1; }
309 		if (N_exp == 7) { document.getElementsByName('ways')[0].checked = true; x = 1/2; y = 1/2; angle = 0; a_11 = 1;   a_12 = 0.1296;	    a_21 = -0.1296;	a_22 = 1; }
310 		if (N_exp == 8) { document.getElementsByName('ways')[0].checked = true; x = 1/4; y = 1/4; angle = 0; a_11 = -0.05;   a_12 = -0.95;	   a_21 = 1.1;	a_22 = 0.65; }
311 		x_fix = x; y_fix = y;
312 		if (N_exp) {
313 			
314 			a11.value = a_11;   a11_ch.value = a_11; angle_rad.value = angle; X.push(x); Y.push(y);
315 			a12.value = a_12;   a12_ch.value = a_12; X.push(x); Y.push(y);
316 			a21.value = a_21;   a21_ch.value = a_21;
317 			a_22.value = a_22;	a22_ch.value = a_22;
318 		}
319 		r = Math.floor(Math.random()*256);
320 		g = Math.floor(Math.random()*256);
321 		b = Math.floor(Math.random()*256);
322 		RGB.push(r);
323 		RGB.push(g);
324 		RGB.push(b);
325 		ctx.fillStyle = "rgb("+
326         r+","+
327         g+","+
328         b+")";
329 	}	
330 	num.onchange = function() { set_exp(document.getElementById('num').value); control();}
331 
332 
333 }
html - файл: 
 1 <html>
 2 <head>
 3 <meta charset="UTF-8">
 4 <title> Fractals </title>
 5 <script src = 'Fractals.js'>
 6  </script>
 7 </head>
 8 <body>
 9 <p align = 'left'><canvas id = 'cnv' width = 1000 height = 1000 style='border: 1px solid black;'></canvas></p>
10 <b>(*) Задайте коэффициенты (в графе угла должен стоять "0"):</b>
11 <label><input type='text' id='a11' value='1' ><b>A_11</b></label> 
12 <label><input type='text' id='a12' value='1' ><b>A_12</b></label>
13 &emsp;&emsp;&hairsp;&hairsp;<label><input type='text' id='number_it' value ='200000'><b>Количество итераций</b></label>
14 <br><b>(*) Включить очистку холста после клика? </b>
15 <label><input type = 'radio' name = 'clear_rect' value = 'yes'><b>Да</b></label>
16 <label><input type = 'radio' name = 'clear_rect' value = 'no' checked><b>Нет</b></label>
17 &emsp;&emsp;&hairsp;&hairsp;<label><input type='text' id='a21' value='1' ><b>A_21</b></label>
18 <label><input type='text' id='a22' value='1' ><b>A_22</b></label>
19 </br>
20 <br><b> Или меняйте коэффициенты с помощью ползунков:</b>
21 &emsp;&emsp;&hairsp;&hairsp;<label><b>Режим <I>ZOOM'а</I><input type = 'checkbox' id = 'zoom_check'></b></label>
22 <br><input type = 'range' id='a11_ch' min = '-2' max = '2' step = '0.05' value = '1'>
23 <input type = 'range' id='a12_ch' min = '-2' max = '2' step = '0.05' value = '1'>
24 <br><input type = 'range' id='a21_ch' min = '-2' max = '2' step = '0.05' value = '1'>
25 <input type = 'range' id='a22_ch' min = '-2' max = '2' step = '0.05' value = '1'>
26 <br><b> Выберите номер эксперимента:</b>
27 <input type='number' size='1' id = 'num' min='1' max='8' value='0' step='1'>
28 <br><b> <input type='button' id='addButton'  value='Сменить цвет рисовки'>
29 <b>Способ вычисления новых точек:</b>
30 <input type = 'radio' name='ways' value = 'old' checked> <b>1-ый</b>
31 <input type = 'radio' name='ways' value = 'new'><b> 2-ой</b></br>
32 <br>
33 <b>Рисование с помощью поворота точки на заданный угол</b>
34 <label><input type='text' id='angle_rad' value ='0'><b> Угол поворота (в <I> радианах</I>)</b></label>
35 </body>
36 </html>
Источник — «http://tm.spbstu.ru/?title=Фрактал&oldid=57150»