Фрактал

Материал из Department of Theoretical and Applied Mechanics
Версия от 23:54, 17 июля 2020; Nickendsm (обсуждение | вклад) (Код программы)

Перейти к: навигация, поиск

Программа позволяет строить фрактальные и простые структуры при заданных начальных условиях: координат "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 &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> <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>