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

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
(→‎top)
(→‎Код программы)
Строка 9: Строка 9:
 
function main () {
 
function main () {
 
var x; var y;
 
var x; var y;
 +
var x_fix , y_fix;
 
var ctx = cnv.getContext('2d');
 
var ctx = cnv.getContext('2d');
 
var h = cnv.height;
 
var h = cnv.height;
Строка 20: Строка 21:
 
a_21 = 1;
 
a_21 = 1;
 
a_22 = 1;
 
a_22 = 1;
−
const N = 200000;
+
const N = 150000;
 
var angle = 0;
 
var angle = 0;
 
var way;
 
var way;
 
var clear;
 
var clear;
−
var butt = document.getElementById("addButton");  
+
var butt = document.getElementById('addButton');
 
 
 +
a11_ch.onchange = function() {
 +
ctx.clearRect(0,0,w,h);
 +
a_11 = document.getElementById('a11_ch').value;
 +
document.getElementById('a11').value = a_11;
 +
control();
 +
x = x_fix;
 +
y = y_fix;
 +
}
 +
a12_ch.onchange = function() {
 +
ctx.clearRect(0,0,w,h);
 +
a_12 = document.getElementById('a12_ch').value;
 +
document.getElementById('a12').value = a_12;
 +
control();
 +
x = x_fix;
 +
y = y_fix;
 +
}
 +
a21_ch.onchange = function() {
 +
ctx.clearRect(0,0,w,h);
 +
a_21 = document.getElementById('a21_ch').value;
 +
document.getElementById('a21').value = a_21;
 +
control();
 +
x = x_fix;
 +
y = y_fix;
 +
}
 +
a22_ch.onchange = function() {
 +
ctx.clearRect(0,0,w,h);
 +
a_22 = document.getElementById('a22_ch').value;
 +
document.getElementById('a22').value = a_22;
 +
control();
 +
x = x_fix;
 +
y = y_fix;
 +
}
 +
 
butt.onclick = function () {  
 
butt.onclick = function () {  
 
ctx.strokeStyle = "rgb("+
 
ctx.strokeStyle = "rgb("+
Строка 32: Строка 66:
 
             Math.floor(Math.random()*256)+")";
 
             Math.floor(Math.random()*256)+")";
 
}
 
}
−
 
+
a11.onchange = function() {
−
a11.onchange = function () {
 
 
a_11 = parseFloat(document.getElementById('a11').value);
 
a_11 = parseFloat(document.getElementById('a11').value);
 +
document.getElementById('angle_rad').value = 0;
 +
document.getElementById('num').value = 0;
 +
angle = 0;
 
}
 
}
 
a12.onchange = function() {
 
a12.onchange = function() {
 
a_12 = parseFloat(document.getElementById('a12').value);
 
a_12 = parseFloat(document.getElementById('a12').value);
 +
document.getElementById('angle_rad').value = 0;
 +
document.getElementById('num').value = 0;
 +
angle = 0;
 
}
 
}
−
a21.onchange = function () {
+
a21.onchange = function() {
 
a_21 = parseFloat(document.getElementById('a21').value);
 
a_21 = parseFloat(document.getElementById('a21').value);
 +
document.getElementById('angle_rad').value = 0;
 +
document.getElementById('num').value = 0;
 +
angle = 0;
 
}
 
}
−
a22.onchange = function () {
+
a22.onchange = function() {
 
a_22 = parseFloat(document.getElementById('a22').value);
 
a_22 = parseFloat(document.getElementById('a22').value);
 +
document.getElementById('angle_rad').value = 0;
 +
document.getElementById('num').value = 0;
 +
angle = 0;
 
}
 
}
 
 
 
angle_rad.onchange = function() {
 
angle_rad.onchange = function() {
 
angle = parseFloat(document.getElementById('angle_rad').value);
 
angle = parseFloat(document.getElementById('angle_rad').value);
 +
document.getElementById('num').value = 0;
 
}
 
}
 
 
−
cnv.onmousedown = function () {
+
cnv.onmousedown = function() {
 
var rect = cnv.getBoundingClientRect();
 
var rect = cnv.getBoundingClientRect();
 
x = (event.clientX - rect.left)/scale;
 
x = (event.clientX - rect.left)/scale;
 
y = (event.clientY - rect.top)/scale;
 
y = (event.clientY - rect.top)/scale;
 +
x_fix = x;
 +
y_fix = y;
 
clear = document.getElementsByName('clear_rect');
 
clear = document.getElementsByName('clear_rect');
 
if (clear[1].checked == true) {
 
if (clear[1].checked == true) {
Строка 77: Строка 125:
 
document.getElementById('a21').value = a_21;
 
document.getElementById('a21').value = a_21;
 
document.getElementById('a22').value = a_22;
 
document.getElementById('a22').value = a_22;
 +
document.getElementById('a11_ch').value = a_11;
 +
document.getElementById('a12_ch').value = a_12;
 +
document.getElementById('a21_ch').value = a_21;
 +
document.getElementById('a22_ch').value = a_22;
 
}
 
}
 
 
Строка 89: Строка 141:
 
 
 
function coord() {
 
function coord() {
 +
 
way = document.getElementsByName('ways');
 
way = document.getElementsByName('ways');
 
if (way[0].checked == true) {  
 
if (way[0].checked == true) {  
Строка 102: Строка 155:
 
y = Func(numb2);
 
y = Func(numb2);
 
}
 
}
 +
 
}
 
}
 
function draw() {  
 
function draw() {  
Строка 115: Строка 169:
 
}
 
}
 
}
 
}
 +
 +
function set_exp(N_exp) {
 +
var k = Number(N_exp);
 +
ctx.clearRect(0,0,w,h);
 +
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 == 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; }
 +
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; }
 +
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; }
 +
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; }
 +
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; }
 +
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; }
 +
x_fix = x; y_fix = y;
 +
if (N_exp) {
 +
 +
a11.value = a_11;  a11_ch.value = a_11; angle_rad.value = angle;
 +
a12.value = a_12;  a12_ch.value = a_12;
 +
a21.value = a_21;  a21_ch.value = a_21;
 +
a_22.value = a_22; a22_ch.value = a_22;
 +
}
 +
}
 +
num.onchange = function() { set_exp(document.getElementById('num').value); control();}
 +
  
 
}
 
}
Строка 126: Строка 203:
 
<meta charset="UTF-8">
 
<meta charset="UTF-8">
 
<title> Fractals </title>
 
<title> Fractals </title>
−
<script src = '1_zad.js'>
+
<script src = 'Fractals_bor.js'>
 
  </script>
 
  </script>
 
</head>
 
</head>
Строка 140: Строка 217:
 
<label><input type='text' id='a22' value='1' ><b>A_22</b></label>
 
<label><input type='text' id='a22' value='1' ><b>A_22</b></label>
 
</br>
 
</br>
−
<br><b> <input type="button" id="addButton" value="Сменить цвет рисовки">
+
<br><b> Или меняйте коэффициенты с помощью ползунков:</b>
 +
<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'>
 +
<br><input type = 'range' id='a21_ch' min = '-2' max = '2' step = '0.05' value = '1'>
 +
<input type = 'range' id='a22_ch' min = '-2' max = '2' step = '0.05' value = '1'>
 +
<br><b> Выберите номер эксперимента:</b>
 +
<input type='number' size='1' id = 'num' min='1' max='8' value='0' step='1'>
 +
<br><b> <input type='button' id='addButton' value='Сменить цвет рисовки'>
 
<b>Способ вычисления новых точек:</b>
 
<b>Способ вычисления новых точек:</b>
 
<input type = 'radio' name='ways' value = 'old' checked> <b>1-ый</b>
 
<input type = 'radio' name='ways' value = 'old' checked> <b>1-ый</b>
 
<input type = 'radio' name='ways' value = 'new'><b> 2-ой</b></br>
 
<input type = 'radio' name='ways' value = 'new'><b> 2-ой</b></br>
 
<br>
 
<br>
−
<b>Рисование с помощью поворота точки на заданный угол
+
<b>Рисование с помощью поворота точки на заданный угол</b>
 
<label><input type='text' id='angle_rad' value ='0'><b> Угол поворота (в <I> радианах</I>)</b></label>
 
<label><input type='text' id='angle_rad' value ='0'><b> Угол поворота (в <I> радианах</I>)</b></label>
−
 
 
</body>
 
</body>
 
</html>
 
</html>
 
</syntaxhighlight>
 
</syntaxhighlight>
 
</div>
 
</div>

Версия 09:15, 21 июля 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 	const N = 150000;
 17 	var angle = 0;
 18 	var way;
 19 	var clear;
 20 	var butt = document.getElementById('addButton');
 21 	
 22 	a11_ch.onchange = function() {
 23 		ctx.clearRect(0,0,w,h);
 24 		a_11 = document.getElementById('a11_ch').value;
 25 		document.getElementById('a11').value = a_11;
 26 		control();
 27 		x = x_fix;
 28 		y = y_fix;
 29 	}
 30 	a12_ch.onchange = function() {
 31 		ctx.clearRect(0,0,w,h);
 32 		a_12 = document.getElementById('a12_ch').value;
 33 		document.getElementById('a12').value = a_12;
 34 		control();
 35 		x = x_fix;
 36 		y = y_fix;
 37 	}
 38 	a21_ch.onchange = function() {
 39 		ctx.clearRect(0,0,w,h);
 40 		a_21 = document.getElementById('a21_ch').value;
 41 		document.getElementById('a21').value = a_21;
 42 		control();
 43 		x = x_fix;
 44 		y = y_fix;
 45 	}
 46 	a22_ch.onchange = function() {
 47 		ctx.clearRect(0,0,w,h);
 48 		a_22 = document.getElementById('a22_ch').value;
 49 		document.getElementById('a22').value = a_22;
 50 		control();
 51 		x = x_fix;
 52 		y = y_fix;
 53 	}
 54 
 55 	butt.onclick = function () { 
 56 	ctx.strokeStyle = "rgb("+
 57             Math.floor(Math.random()*256)+","+
 58             Math.floor(Math.random()*256)+","+
 59             Math.floor(Math.random()*256)+")";
 60 	}
 61 	a11.onchange = function() {
 62 		a_11 = parseFloat(document.getElementById('a11').value);
 63 		document.getElementById('angle_rad').value = 0;
 64 		document.getElementById('num').value = 0;
 65 		angle = 0;
 66 	}
 67 	a12.onchange = function() {
 68 		a_12 = parseFloat(document.getElementById('a12').value);
 69 		document.getElementById('angle_rad').value = 0;
 70 		document.getElementById('num').value = 0;
 71 		angle = 0;
 72 	}
 73 	a21.onchange = function() {
 74 		a_21 = parseFloat(document.getElementById('a21').value);
 75 		document.getElementById('angle_rad').value = 0;
 76 		document.getElementById('num').value = 0;
 77 		angle = 0;
 78 	}
 79 	a22.onchange = function() {
 80 		a_22 = parseFloat(document.getElementById('a22').value);
 81 		document.getElementById('angle_rad').value = 0;
 82 		document.getElementById('num').value = 0;
 83 		angle = 0;
 84 	}
 85 	
 86 	angle_rad.onchange = function() {
 87 		angle = parseFloat(document.getElementById('angle_rad').value);
 88 		document.getElementById('num').value = 0;
 89 	}
 90 		
 91 	cnv.onmousedown = function() {
 92 		var rect = cnv.getBoundingClientRect();
 93 		x = (event.clientX - rect.left)/scale;
 94 		y = (event.clientY - rect.top)/scale;
 95 		x_fix = x;
 96 		y_fix = y;
 97 		clear = document.getElementsByName('clear_rect');
 98 		if (clear[1].checked == true) {
 99 		ctx.strokeStyle = "rgb("+
100             Math.floor(Math.random()*256)+","+
101             Math.floor(Math.random()*256)+","+
102             Math.floor(Math.random()*256)+")";
103 		} else {
104 		ctx.clearRect(0,0,w,h);
105 		ctx.beginPath();
106 		ctx.arc(x*scale,y*scale,3,0,2*Math.PI);
107 		ctx.fillStyle = 'blue';
108 		ctx.fill();
109 		}
110 		
111 		if (angle != 0) {
112 			a_11 = Math.cos(angle);
113 			a_22 = a_11;
114 			a_12 = Math.sin(angle);
115 			a_21 = -a_12;
116 			document.getElementById('a11').value = a_11;
117 			document.getElementById('a12').value = a_12;
118 			document.getElementById('a21').value = a_21;
119 			document.getElementById('a22').value = a_22;
120 			document.getElementById('a11_ch').value = a_11;
121 			document.getElementById('a12_ch').value = a_12;
122 			document.getElementById('a21_ch').value = a_21;
123 			document.getElementById('a22_ch').value = a_22;
124 		}
125 		
126 		control();
127 	
128 	}
129 
130 	function Func (numb) {
131 		decim = parseFloat(numb) - Math.floor(numb);
132 		return(decim);
133 	}
134 	
135 	function coord() {
136 		
137 		way = document.getElementsByName('ways');
138 		if (way[0].checked == true) { 
139 			numb1 = a_11*x+a_12*y;
140 			numb2 = a_21*x+a_22*y;
141 			x = Func(numb1);
142 			y = Func(numb2);
143 		}
144 		if (way[1].checked == true) {
145 			numb1 = a_11*x+a_12*y;
146 			x = Func(numb1);
147 			numb2 = a_21*x+a_22*y;
148 			y = Func(numb2);
149 		}
150 		
151 	}
152 	function draw() { 
153 		ctx.beginPath();
154 		ctx.rect(x*scale,y*scale,1,1);
155 		ctx.stroke();
156 	}
157 	
158 	function control () {
159 		for (j = 0;j<=N; j++){
160 		coord();
161 		draw();
162 		}
163 	}
164 
165 	function set_exp(N_exp) {
166 		var k = Number(N_exp);
167 		ctx.clearRect(0,0,w,h);
168 		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; } 			
169 		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; }  	 		
170 		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; } 
171 		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; }
172 		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; }
173 		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; }
174 		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; }
175 		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; }
176 		x_fix = x; y_fix = y;
177 		if (N_exp) {
178 			
179 			a11.value = a_11;   a11_ch.value = a_11; angle_rad.value = angle;
180 			a12.value = a_12;   a12_ch.value = a_12;
181 			a21.value = a_21;   a21_ch.value = a_21;
182 			a_22.value = a_22;	a22_ch.value = a_22;
183 		}
184 	}	
185 	num.onchange = function() { set_exp(document.getElementById('num').value); control();}
186 		
187 
188 }
html - файл: 
 1 <html>
 2 <head>
 3 <meta charset="UTF-8">
 4 <title> Fractals </title>
 5 <script src = 'Fractals_bor.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 <br><b>(*) Включить очистку холста после клика? </b>
14 <label><input type = 'radio' name = 'clear_rect' value = 'yes'><b>Да</b></label>
15 <label><input type = 'radio' name = 'clear_rect' value = 'no' checked><b>Нет</b></label>
16 &emsp;&emsp;&hairsp;&hairsp;<label><input type='text' id='a21' value='1' ><b>A_21</b></label>
17 <label><input type='text' id='a22' value='1' ><b>A_22</b></label>
18 </br>
19 <br><b> Или меняйте коэффициенты с помощью ползунков:</b>
20 <br><input type = 'range' id='a11_ch' min = '-2' max = '2' step = '0.05' value = '1'>
21 <input type = 'range' id='a12_ch' min = '-2' max = '2' step = '0.05' value = '1'>
22 <br><input type = 'range' id='a21_ch' min = '-2' max = '2' step = '0.05' value = '1'>
23 <input type = 'range' id='a22_ch' min = '-2' max = '2' step = '0.05' value = '1'>
24 <br><b> Выберите номер эксперимента:</b>
25 <input type='number' size='1' id = 'num' min='1' max='8' value='0' step='1'>
26 <br><b> <input type='button' id='addButton'  value='Сменить цвет рисовки'>
27 <b>Способ вычисления новых точек:</b>
28 <input type = 'radio' name='ways' value = 'old' checked> <b>1-ый</b>
29 <input type = 'radio' name='ways' value = 'new'><b> 2-ой</b></br>
30 <br>
31 <b>Рисование с помощью поворота точки на заданный угол</b>
32 <label><input type='text' id='angle_rad' value ='0'><b> Угол поворота (в <I> радианах</I>)</b></label>
33 </body>
34 </html>
Источник — «http://tm.spbstu.ru/?title=Фрактал&oldid=57137»