Редактирование: Фрактал

Программа позволяет строить фрактальные и простые структуры при заданных начальных условиях.
==Начальные условия и принцип работы==
В системе координат Oxy дан единичный квадрат, который отображается на экран в масштабе 1000:1
<br>{{#widget:Iframe |url = http://tm.spbstu.ru/htmlets/js2020/Borisenkov/fotos/coordinat2.jpg| width= 382 | height = 362}}
<br>Пользователю предлагается задать коэффициенты рекурсивной функции вычисления новых координат и координаты "x" и "y" начальной точки, количество итераций, которое произведет программа и способ вычисления новых точек. Начальная точка задается кликом левой кнопки мыши по холсту. 
Программа получает на вход "x"(0<x<1) и "y"(0<y<1) и строит N точек, координаты которых вычисляются по формулам:
<br>
\begin{equation}
\begin{cases}
x_{k} = F(a_{11}*x_{k-1} + a_{12}*y_{k-1})\\
y_{k} = F(a_{21}*x_{k} + a_{22}*y_{k-1})
\end{cases}
\end{equation}
<br>где <math>F</math> - функция<i>  [https://ru.wikipedia.org/wiki/Дробная_часть дробной части]</i>. Сразу можно сказать, что все точки, вычисленные по этим формулам, попадут в единичный квадрат (вследствие использования функции дробной части).
==Направление исследований==
<br>Используя функцию <math>F</math>, программа строит <i><b>регулярные</b></i> и <i><b>нерегулярные</b></i> области:
<br>1. <i><b>Регулярной</b></i> будем считать область, которая состоит из малого количества отдельных элементов (например: два больших эллипса).
<br>2. <i><b>Нерегулярной</b></i> будем считать область, которая состоит из большого количества малых элементов (например: множество малых эллипсов в промежутках между регулярными областями).
<br>Ниже изображен процесс вычисления точек и их отображения в случае нерегулярной и регулярной области при заданных коэффициентах (эксперимент 1):
\begin{equation}  a_{11} = 1, a_{12} = 1, a_{21} = -0.9, a_{22} = 1.\end{equation}
<br>{{#widget:Iframe |url = http://tm.spbstu.ru/htmlets/js2020/Borisenkov/fotos/reg_obl-1.gif| width= 454 | height = 369}}
{{#widget:Iframe |url = http://tm.spbstu.ru/htmlets/js2020/Borisenkov/fotos/nereg_obl2.gif| width= 450 | height = 369}}
<br>В данных примерах использовались начальные условия: <br>1. \begin{equation}  x_{0} = 0.613, y_{0} = 0.582 \end{equation} Результат: регулярная область фрактала.
<br>2. \begin{equation}  x_{0} = 0.46, y_{0} = 0.63\end{equation} Результат: нерегулярная область фрактала.
<br><i>Синим</i> цветом обозначены точки, вычисленные по рекуррентным формулам <u>без</u> использования функции <math>F</math>. 
<br><i>Красным</i> цветом обозначены точки, вычисленные по рекуррентным формулам <u>с</u> использованием функции <math>F</math> (формулы даны выше). Данная на этой странице программа вычисляет и отображает лишь эти точки.
<br> Данные примеры призваны показать, что паттерн получаемого фрактала подобен кривой второго порядка, которую образуют точки, вычисленные по рекуррентным формулам без использования функции дробной части <math>F</math>.
==Пример работы программы==
Зададим такие же коэффициенты, как в примерах выше (эксперимент №1 в списке программы):
<br>\begin{equation}  a_{11} = 1, a_{12} = 1, a_{21} = -0.9, a_{22} = 1.\end{equation}
<br>Получив несколько начальных точек, программа построит такую картину при данных коэффициентах (картина отзеркалена относительно оси Ox для одинаковой направленности осей):
<br>{{#widget:Iframe |url = http://tm.spbstu.ru/htmlets/js2020/Borisenkov/fotos/Ellips2.jpg| width= 212 | height = 209}}
<br>Другие примечательные наборы начальных условий можно посмотреть, выбрав номер эксперимента.
==Задание коэффициентов==
Коэффициенты \begin{equation}a_{11},a_{12},a_{21},a_{22}\end{equation} можно задать с помощью полей ввода:
<br>{{#widget:Iframe |url = http://tm.spbstu.ru/htmlets/js2020/Borisenkov/fotos/koeff.png| width= 487 | height = 61}}
==Два режима работы программы==
Данная программа предусматривает два режима работы:
<br>1) Режим задания начальных данных (стоит по умолчанию). Кликом мыши по холсту добавляем начальные данные.
<br>2) Режим "ZOOM'а". Включается нажатием на соответствующий "checkbox". Позволяет подробнее рассмотреть уже полученный рисунок.
<br>Чтобы программа лучше прорисовала картину в режиме "ZOOM", необходимо задать большее количество точек в поле задания количества итераций, используя при этом кнопку "Обновить рисунок"
{{#widget:Iframe |url = http://tm.spbstu.ru/htmlets/js2020/Borisenkov/Fractals25_kopia21_01_21.html | width =1500 | height = 1228| border = 0}}

==Другая версия программы==
<br><b>http://tm.spbstu.ru/Фрактал(2-ая_версия_программы)
==Код программы==
<div class="mw-collapsible mw-collapsed">
'''Код программы на языке JavaScript (разработчик Богдан Борисенков):''' <div class="mw-collapsible-content">
<syntaxhighlight lang="javascript" line start="1" enclose="div">
window.addEventListener('load',main,false);
function main () {
	var x; var y;
	var ctx = cnv.getContext('2d');
	var h = cnv.height;
	var w = cnv.width;
	var scale = 1000;
	var a_11; var a_12; var a_21; var a_22;
	var numb1; var numb2; var decim;
	var interv;
	var clear;
	var butt = document.getElementById('downloadimg');
	var update = document.getElementById('refresh');
	X = []; // массив начальных иксов
	Y = []; // массив начальных игриков
	var move = false;
	var numberof;
	var z = 1;
	var RGB = [];
	var z2 = 1;
	var iterations = document.getElementById('number_it');
	// начальные условия 
	a_11 = 1;
	a_12 = 1;
	a_21 = 1;
	a_22 = 1;
	var N = 200000;
	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 = scale;
	var y_oldmin = 0;
	var y_oldmax = scale;
	var intermid;
	var imageData = ctx.createImageData(w,h);
	var imageData2;
	var upd = false;
	x_minim.innerHTML = x_min.toFixed(2);
    y_minim.innerHTML = y_min.toFixed(2);
	x_maxim.innerHTML = x_max.toFixed(2);
	y_maxim.innerHTML = y_max.toFixed(2);
	
	// заполняем холст непрозрачными белыми пикселями
	for (i = 0; i<1000; i++) {
			for (j = 0; j<1000; j++) {
				index = parseInt((i*w + j)*4);
				imageData.data[index+0] = 255;
				imageData.data[index+1] = 255;
				imageData.data[index+2] = 255;
				imageData.data[index+3] = 255;
			}
		}
	ctx.putImageData(imageData,0,0);

	iterations.onchange = function () {
		N = document.getElementById('number_it').value;
	}

	butt.onclick = function () {
	var dataURL = cnv.toDataURL("image/jpeg");
	var link = document.createElement("a");
	document.body.appendChild(link); 
	link.href = dataURL;
	link.download = "my-image-name.jpg";
	link.click();
	document.body.removeChild(link);
	}
	update.onclick = function () { clearcanv(); upd = true; control(); }
	a11.onchange = function() {
		a_11 = parseFloat(document.getElementById('a11').value);
		document.getElementById('num').value = 0;
		angle = 0;
	}
	a12.onchange = function() {
		a_12 = parseFloat(document.getElementById('a12').value);
		document.getElementById('num').value = 0;
		angle = 0;
	}
	a21.onchange = function() {
		a_21 = parseFloat(document.getElementById('a21').value);
		document.getElementById('num').value = 0;
		angle = 0;
	}
	a22.onchange = function() {
		a_22 = parseFloat(document.getElementById('a22').value);
		document.getElementById('num').value = 0;
		angle = 0;
	}

	cnv.onmousedown = function() {
		var zoom = document.getElementById('zoom_check');
		if (!zoom.checked) {
		var rect = cnv.getBoundingClientRect();
		console.log((event.clientX - rect.left)/scale,(event.clientY - rect.top)/scale);
		if (z != 1) {
			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;
		}
		clear = document.getElementsByName('clear_rect');
		if (clear[1].checked == true) {
			r = Math.floor(Math.random()*256);
			g = Math.floor(Math.random()*256);
			b = Math.floor(Math.random()*256);
		} else {
		clearcanv ();
		some_span.innerHTML = "";
		z = 1;
		z2 = 1;
		RGB = [];
		X = [];
		Y = [];
		r = Math.floor(Math.random()*256);
		g = Math.floor(Math.random()*256);
		b = Math.floor(Math.random()*256);
		ctx.beginPath();
		ctx.arc(x*scale,y*scale,3,0,2*Math.PI);
		ctx.strokeStyle = 'blue';
		ctx.stroke();
		}
		X.push(x);
		Y.push(y);
		RGB.push(r);
		RGB.push(g);
		RGB.push(b);
		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;
		imageData2 = ctx.getImageData(0,0,w,h);
		}
		
	}

	cnv.onmousemove = function () {
		if (move) {
		ctx.putImageData(imageData2,0,0);
		var rect = cnv.getBoundingClientRect();
		y_move = (event.clientY - rect.top);
		x_move = (y_move-y_relativemin) + x_relativemin;
		ctx.beginPath();
		ctx.rect(x_relativemin,y_relativemin,x_move-x_relativemin,y_move-y_relativemin);
		ctx.stroke();
		}
	}
	
	cnv.onmouseup = function () {
		zoom = document.getElementById('zoom_check');
		if (zoom.checked) { 
		x_relativemax = x_move;
		y_relativemax = y_move;
			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;
			if (x_min > x_max) {
				intermid = x_min;
				x_min = x_max;
				x_max = intermid;
			}
			if (y_min > y_max) { 
				intermid = y_min;
				y_min = y_max;
				y_max = intermid;
			}
			z = z*scale/(x_relativemax - x_relativemin);
			some_span.innerHTML = "Увеличение в "+z.toFixed(2)+" раз";
			clearcanv ();
			move = false;
			control();
		}
			x_minim.innerHTML = x_min.toFixed(2);
			y_minim.innerHTML = y_min.toFixed(2);
			x_maxim.innerHTML = x_max.toFixed(2);
			y_maxim.innerHTML = y_max.toFixed(2);
	}

	function Func (numb) {
		decim = parseFloat(numb) - Math.floor(numb);
		return(decim);
	}
	
	function coord() {
		numb1 = a_11*x+a_12*y;
		x = Func(numb1);
		numb2 = a_21*x+a_22*y;
		y = Func(numb2);
	}

	function draw() { 
		if ((x>=x_min)&&(x<=x_max)&&(y>=y_min)&&(y<=y_max)) {
				index = (Math.floor((y-y_min)*z*scale)*w + Math.floor((x-x_min)*z*scale))*4;
				imageData.data[index+0] = r;
				imageData.data[index+1] = g;
				imageData.data[index+2] = b;
			}
	}
	// функция отчистки канваса 
	function clearcanv () {
		for (i = 0; i<1000; i++) {
			for (j = 0; j<1000; j++) {
				index = parseInt((i*w + j)*4);
				imageData.data[index+0] = 255;
				imageData.data[index+1] = 255;
				imageData.data[index+2] = 255;
			}
		}
		ctx.putImageData(imageData,0,0);
	}
	
	function control () {
		zoom = document.getElementById('zoom_check');
		if ((zoom.checked)||(upd == true)) {
			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]);
				for (j = 0;j<=N; j++){
				coord();
				draw();
				}
				upd = false;
			}
		} else {
			for (j = 0;j<=N; j++){
				coord();
				draw();
				}
		}
		ctx.putImageData(imageData,0,0);
		
	}

	function set_exp(N_exp) {
		var k = Number(N_exp);
		clearcanv ();
		X = [];
		Y = [];
		RGB = [];
		z = 1;
		z2 = 1;
		x_min = 0; y_min = 0; x_max = 1; y_max = 1; x_oldmin = 0; y_oldmin = 0; x_oldmax = scale; y_oldmax = scale;
		if (N_exp == 1) {x = 0.31; y = 0.32;  a_11 = 1; 	a_12 = 0.5;	    a_21 = -0.5;	a_22 = 1; }
		if (N_exp == 2) {x = 0.46; y = 0.63; a_11 = 1; 	a_12 = 1;	    a_21 = -0.9;	a_22 = 1; } 
		if (N_exp == 3) {x = 1/4; y = 1/4; a_11 = 1;	    a_12 = 0.01; 	a_21 = 0.01;	a_22 = -1; }  	 		
		if (N_exp == 4) {x = 1/2; y = 1/2; a_11 = 1;     a_12 = 0.32;	a_21 = 0.32;	a_22 = -1; } 
		if (N_exp == 5) {x = 1/2; y = 1/2; a_11 = 0.9;   a_12 = 0.1;	    a_21 = -0.1;	a_22 = 1.2; }
		if (N_exp == 6) {x = 1/4; y = 1/4; a_11 = Math.cos(angle); a_12 = Math.sin(angle); a_21 = -a_12; a_22 = a_11; }
		if (N_exp == 7) {x = 1/2; y = 1/2; a_11 = 1;   a_12 = 1.5;	    a_21 = 0.01;	a_22 = -1; }
		if (N_exp == 8) {x = 1/2; y = 1/2; a_11 = 1;   a_12 = 0.1296;	    a_21 = -0.1296;	a_22 = 1; }
		if (N_exp == 9) {x = 1/4; y = 1/4; a_11 = -0.05;   a_12 = -0.95;	   a_21 = 1.1;	a_22 = 0.65; }
		if (N_exp) {
			
			a11.value = a_11;
			a12.value = a_12;    X.push(x); Y.push(y);
			a21.value = a_21;   
			a22.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);
	}	
	num.onchange = function() { set_exp(document.getElementById('num').value); control();}
}
</syntaxhighlight>
</div>
<div class="mw-collapsible mw-collapsed">
'''html - файл:''' <div class="mw-collapsible-content">
<syntaxhighlight lang="html" line start="1" enclose="div">
<html>
<head>
<meta charset="UTF-8">
<title> Fractals </title>
<script src = 'Fractals25_kopia17_11_20.js'>
 </script>
</head>
<body>
<p align = 'left'><canvas id = 'cnv' width = 1000 height = 1000 style='border: 1px solid black;'></canvas></p>
<span id=some_span></span>
<br><b>Рассматриваемая область: x_min = <span id =x_minim></span> , y_min = <span id =y_minim></span>, x_max = <span id=x_maxim></span>, y_max = <span id=y_maxim></span>
<br><b>(*) Задайте коэффициенты:</b>
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&hairsp;<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>
<br><b>(*) Включить очистку холста после клика? </b>
<label><input type = 'radio' name = 'clear_rect' value = 'yes'><b>Да</b></label>
<label><input type = 'radio' name = 'clear_rect' value = 'no' checked><b>Нет</b></label>
&emsp;&emsp;&hairsp;&hairsp;<label><input type='text' id='a21' value='1' ><b>A_21</b></label>
<label><input type='text' id='a22' value='1' ><b>A_22</b></label>
</br>
&emsp;&emsp;&hairsp;&hairsp;<label><b>Режим <I>ZOOM'а</I><input type = 'checkbox' id = 'zoom_check'></b></label>
&emsp;&emsp;&hairsp;&hairsp;<label><input type='text' id='number_it' value ='200000'><b>&hairsp;&hairsp;&hairsp;Количество итераций</b></label>
<br><b> Выберите номер эксперимента:</b>
<input type='number' size='1' id = 'num' min='1' max='9' value='0' step='1'>
<br><b> <input type='button' id='downloadimg'  value='Сохранить рисунок'>
<input type = 'button' style="width:200px;height:40px" id = 'refresh' value = 'Обновить рисунок'></b></br>
</body>
</html>
</syntaxhighlight>
</div>