Фрактал
Материал из Department of Theoretical and Applied Mechanics
Программа позволяет строить фрактальные и простые структуры при заданных начальных условиях: координат "x" и "y" исходной точки, от которой будут высчитываться координаты остальных, и коэффициентах, участвующих в расчетах. Или же расчет новых точек можно задать с помощью задания угла поворота исходной
Код программы
Код программы на языке JavaScript:
1 window.addEventListener('load',main,false);
2 function main () {
3 var x; var y;
4 var ctx = cnv.getContext('2d');
5 var h = cnv.height;
6 var w = cnv.width;
7 var scale = 1000;
8 var a_11; var a_12; var a_21; var a_22;
9 var numb1; var numb2; var decim;
10 var interv;
11 a_11 = 1;
12 a_12 = 1;
13 a_21 = 1;
14 a_22 = 1;
15 const N = 200000;
16 var angle = 0;
17 var way;
18 var clear;
19 var butt = document.getElementById("addButton");
20
21 butt.onclick = function () {
22 ctx.strokeStyle = "rgb("+
23 Math.floor(Math.random()*256)+","+
24 Math.floor(Math.random()*256)+","+
25 Math.floor(Math.random()*256)+")";
26 }
27
28 a11.onchange = function () {
29 a_11 = parseFloat(document.getElementById('a11').value);
30 }
31 a12.onchange = function() {
32 a_12 = parseFloat(document.getElementById('a12').value);
33 }
34 a21.onchange = function () {
35 a_21 = parseFloat(document.getElementById('a21').value);
36 }
37 a22.onchange = function () {
38 a_22 = parseFloat(document.getElementById('a22').value);
39 }
40
41 angle_rad.onchange = function() {
42 angle = parseFloat(document.getElementById('angle_rad').value);
43 }
44
45 cnv.onmousedown = function () {
46 var rect = cnv.getBoundingClientRect();
47 x = (event.clientX - rect.left)/scale;
48 y = (event.clientY - rect.top)/scale;
49 clear = document.getElementsByName('clear_rect');
50 if (clear[1].checked == true) {
51 ctx.strokeStyle = "rgb("+
52 Math.floor(Math.random()*256)+","+
53 Math.floor(Math.random()*256)+","+
54 Math.floor(Math.random()*256)+")";
55 } else {
56 ctx.clearRect(0,0,w,h);
57 ctx.beginPath();
58 ctx.arc(x*scale,y*scale,3,0,2*Math.PI);
59 ctx.fillStyle = 'blue';
60 ctx.fill();
61 }
62
63 if (angle != 0) {
64 a_11 = Math.cos(angle);
65 a_22 = a_11;
66 a_12 = Math.sin(angle);
67 a_21 = -a_12;
68 document.getElementById('a11').value = a_11;
69 document.getElementById('a12').value = a_12;
70 document.getElementById('a21').value = a_21;
71 document.getElementById('a22').value = a_22;
72 }
73
74 control();
75
76 }
77
78 function Func (numb) {
79 decim = parseFloat(numb) - Math.floor(numb);
80 return(decim);
81 }
82
83 function coord() {
84 way = document.getElementsByName('ways');
85 if (way[0].checked == true) {
86 numb1 = a_11*x+a_12*y;
87 numb2 = a_21*x+a_22*y;
88 x = Func(numb1);
89 y = Func(numb2);
90 }
91 if (way[1].checked == true) {
92 numb1 = a_11*x+a_12*y;
93 x = Func(numb1);
94 numb2 = a_21*x+a_22*y;
95 y = Func(numb2);
96 }
97 }
98 function draw() {
99 ctx.beginPath();
100 ctx.rect(x*scale,y*scale,1,1);
101 ctx.stroke();
102 }
103
104 function control () {
105 for (j = 0;j<=N; j++){
106 coord();
107 draw();
108 }
109 }
110
111 }
html - файл:
1 <html>
2 <head>
3 <meta charset="UTF-8">
4 <title> Fractals </title>
5 <script src = '1_zad.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> <input type="button" id="addButton" value="Сменить цвет рисовки">
20 <b>Способ вычисления новых точек:</b>
21 <input type = 'radio' name='ways' value = 'old' checked> <b>1-ый</b>
22 <input type = 'radio' name='ways' value = 'new'><b> 2-ой</b></br>
23 <br>
24 <b>Рисование с помощью поворота точки на заданный угол
25 <label><input type='text' id='angle_rad' value ='0'><b> Угол поворота (в <I> радианах</I>)</b></label>
26
27 </body>
28 </html>
