Фрактал — различия между версиями
Материал из Department of Theoretical and Applied Mechanics
(→top) |
(→top) |
||
| Строка 1: | Строка 1: | ||
Программа позволяет строить фрактальные и простые структуры при заданных начальных условиях: координат "x" и "y" исходной точки, от которой будут высчитываться координаты остальных, и коэффициентах, участвующих в расчетах. Или же расчет новых точек можно задать с помощью задания угла поворота исходной | Программа позволяет строить фрактальные и простые структуры при заданных начальных условиях: координат "x" и "y" исходной точки, от которой будут высчитываться координаты остальных, и коэффициентах, участвующих в расчетах. Или же расчет новых точек можно задать с помощью задания угла поворота исходной | ||
| − | {{#widget:Iframe |url = http://tm.spbstu.ru/htmlets/js2020/Borisenkov/ | + | {{#widget:Iframe |url = http://tm.spbstu.ru/htmlets/js2020/Borisenkov/Fractals.html | width =1500 | height = 1250| border = 0}} |
==Код программы== | ==Код программы== | ||
Версия 16:44, 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 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     <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>
