Редактирование: Фрактал(2-ая версия программы)

<br><b>Первая версия программы:</b> http://tm.spbstu.ru/Фрактал
<br>Данная программа осуществляет один из возможных алгоритмов нахождения нерегулярных областей.
==Принцип работы программы==
Аналогично начальным условиям 1-ой версии программы: дан единичный квадрат <b>А</b>, отображаемый программой с разрешением 100x100 пикселей.
<br>{{#widget:Iframe |url = http://tm.spbstu.ru/htmlets/js2020/Borisenkov/fotos/2_sposob16_01_21.png | width =301 | height = 301| border = 0}}
<br>Также имеется единичный квадрат <b>Б</b>, не видимый пользователю, с разрешением 30x30 пикселей. 
<br>Для каждой из точек, соответствующих "пикселям" квадрата <b>А</b> программа осуществляет следующий алгоритм: 
<br>{{#widget:Iframe |url = http://tm.spbstu.ru/htmlets/js2020/Borisenkov/fotos/algoritm-3.png | width =738 | height = 188| border = 0}}
<br>Таким образом, программа упрощенно проверяет каждую точку квадрата на то, к какой области фрактала она относится: регулярной или нерегулярной, и отображает лишь нерегулярные области, наиболее интересные для рассмотрения.
{{#widget:Iframe |url = http://tm.spbstu.ru/htmlets/js2020/Borisenkov/Fractals25_01_21.html | width =1500 | height = 350| border = 0}}
Для более детального рассмотрения какой-либо области следует воспользоваться 1-ой версией программы.

==Код программы==
<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 = 100;
	var scale2 = 30;
	var a_11; var a_12; var a_21; var a_22;
	var numb1; var numb2; var decim;
	var interv;
	var clear;
	var start_draw = document.getElementById('to_start');
	var move = false;
	var z = 1;
	var z2 = 1;
	// начальные условия 
	a_11 = 1;
	a_12 = 1;
	a_21 = 1;
	a_22 = 1;
	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 x_relativemin = 0;
	var x_relativemax = scale;
	var y_relativemin = 0;
	var y_relativemax = scale;
	var intermid;
	var imageData = ctx.createImageData(w,h);
	var imageData2;
	var SECCANV = []; // массив пикселей маленького канваса 
	var square; // площадь при конкретных начальных условиях
	var SQ = []; // массив площадей нерегулярных областей
	var RGB = []  
	var numbclr; var nz = z;
	var Nn = 600;
	
	x_minim.onchange = function () {
		x_min = parseFloat(document.getElementById('x_minim').value);
		z = 1/(x_max - x_min);
		z2 = 1;
		y_max = y_min + x_max - x_min;
		x_relativemin = 0;
		x_relativemax = scale;
		y_relativemin = 0;
		y_relativemax = scale;
	}
	x_maxim.onchange = function () {
		x_max = parseFloat(document.getElementById('x_maxim').value);
		z = 1/(x_max - x_min);
		z2 = 1;
		y_max = y_min + x_max - x_min;
		x_relativemin = 0;
		x_relativemax = scale;
		y_relativemin = 0;
		y_relativemax = scale;
	}
	y_minim.onchange = function () {
		y_min = parseFloat(document.getElementById('y_minim').value);
		z = 1/(x_max - x_min);
		z2 = 1;
		y_max = y_min + x_max - x_min;
		x_relativemin = 0;
		x_relativemax = scale;
		y_relativemin = 0;
		y_relativemax = scale;
	}

	for (d = 0; d<24; d++) {
		RGB.push(Math.floor(Math.random()*256));
	}
	
	// заполняем холст непрозрачными белыми пикселями
	for (i = 0; i<100; i++) {
			for (j = 0; j<100; 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);
	start_draw.onclick = function () { 
			x_relativemin = 0;
			x_relativemax = 1;
			y_relativemin = 0;
			y_relativemax = 1;
		zoom = document.getElementById('zoom_check');
		if (!zoom.checked) {
			clearcanv(); 
			square = 0;
			SQ = [];
			checking(x_min,y_min,x_max,y_max);
		} else {
			alert("Выключите режим зума");
		}
	}
	
	a11.onchange = function() {
		a_11 = parseFloat(document.getElementById('a11').value);
		document.getElementById('num').value = 0;
	}
	a12.onchange = function() {
		a_12 = parseFloat(document.getElementById('a12').value);
		document.getElementById('num').value = 0;
	}
	a21.onchange = function() {
		a_21 = parseFloat(document.getElementById('a21').value);
		document.getElementById('num').value = 0;
	}
	a22.onchange = function() {
		a_22 = parseFloat(document.getElementById('a22').value);
		document.getElementById('num').value = 0;
	}
	check2.onchange = function() {
		Nn = parseFloat(document.getElementById('check2').value);
	}
	cnv.onmousedown = function() {
		var zoom = document.getElementById('zoom_check');
		if (zoom.checked) {
			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;
			move = true;
			imageData2 = ctx.getImageData(0,0,w,h);
		}
	}

	cnv.onmousemove = function () {
		if (move) {
		ctx.putImageData(imageData2,0,0);
		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.fillStyle = 'green';
		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)+" раз";
			nz = Math.pow(z,(1/4));
			scale2 *= nz;
			clearcanv ();
			SECCANV = [];
            SQ = [];
			square = 0;
			move = false;
			checking(x_min,y_min,x_max,y_max);
		}
		    x_minim.innerHTML = x_min.toFixed(parseInt(Math.pow(z,1/2)));
			y_minim.innerHTML = y_min.toFixed(parseInt(Math.pow(z,1/2)))
			x_maxim.innerHTML = x_max.toFixed(parseInt(Math.pow(z,1/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 clearcanv () {
		for (i = 0; i<scale; i++) {
			for (j = 0; j<scale; 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 checking (xmin,ymin,xmax,ymax) { 
		for (i = 0;i<scale; i++) {
			for (j = 0;j<scale; j++) {
				SECCANV = [];
				square = 0;
				x = xmin + j*(xmax - xmin)/scale;
				y = ymin + i*(ymax - ymin)/scale;
				index = Math.floor(x*scale2)*scale2 + Math.floor(y*scale2);
				draw_check = control(index);
				if (draw_check == 1) { 
					index = parseInt((i*w + j)*4);
					if (numbclr == -1) {
					numbclr = SQ.length;
					SQ.push(square);
					}
					if (numbclr>7) { 
					numbclr = (numbclr - 1)%8;
					}
					imageData.data[index+0] = RGB[numbclr*3];
					imageData.data[index+1] = RGB[numbclr*3+1];
					imageData.data[index+2] = RGB[numbclr*3+2];
				}
			}
		}
		ctx.putImageData(imageData,0,0);
		document.getElementById('x_minim').value = x_min;
		document.getElementById('y_minim').value = y_min;
		document.getElementById('x_maxim').value = x_max;
	}
	
	function control(ind) { 
		numbclr = -1;
		SECCANV[ind] = 1;
		square += 1;
		for (k = 0; k<parseInt(Nn*nz); k++) {
			coord();
			idx = Math.floor(x*scale2)*Math.floor(scale2) + Math.floor(y*scale2);
			if (SECCANV[idx] != 1) { SECCANV[idx] = 1; square+= 1;}
		}
		if (square >=parseInt(Nn*2/10*nz)) {
			if (SQ == []) {
				SQ.push(square);
				numbclr = 0;
			} else { for (m = 0; m<SQ.length; m++) {
				if (square == SQ[m]) { numbclr = m; break;}
			}
			}
			return(1);
		} else { return(0); }

	}
	

	function set_exp(N_exp) {
		var k = Number(N_exp);
		clearcanv ();
		SQ = [];
		if (N_exp == 1) {a_11 = 1; 	a_12 = 0.5;	    a_21 = -0.5;	a_22 = 1; } 			
		if (N_exp == 2) {a_11 = 1; 	a_12 = 1;	    a_21 = -0.9;	a_22 = 1;  }
		if (N_exp == 3) {a_11 = 1; 	a_12 = 0.5;	    a_21 = -0.5;	a_22 = 1; x_min = 0.6680; y_min = 0.5460; x_max = 0.7240; y_max = 0.6020;  }
		if (N_exp == 4) {a_11 = 1; 	a_12 = 0.5;	    a_21 = -0.5;	a_22 = 1; x_min = 0.50; y_min = 0.31; x_max = 0.71; y_max = 0.51;} 	
		if (N_exp == 5) {a_11 = 1; 	a_12 = 0.5;	    a_21 = -0.5;	a_22 = 1; x_min = 0.2757; y_min = 0.3343; x_max = 0.3268; y_max = 0.3854;} 	
		if (N_exp) {
			z = 1/Math.abs(x_max-x_min);
			document.getElementById('x_minim').value = x_min;
			document.getElementById('y_minim').value = y_min;
			document.getElementById('x_maxim').value = x_max;
			some_span.innerHTML = "Увеличение в "+z.toFixed(2)+" раз";
			a11.value = a_11;
			a12.value = a_12;    
			a21.value = a_21;   
			a22.value = a_22;	
		}
	}	
	
	num.onchange = function() { x_min = 0; y_min = 0; x_max = 1; y_max = 1; set_exp(document.getElementById('num').value); checking(x_min,y_min,x_max,y_max);}
	
}
</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_01_21.js'>
 </script>
</head>
<body>
<p align = 'left'><canvas id = 'cnv' width = 100 height = 100 style='border: 1px solid black;'></canvas></p>
<span id=some_span></span>
<br><b>Рассматриваемая область: x_min = <input type = 'text' id = 'x_minim' style = "width:70px;height:10px" value ='0'> , x_max = <input type = 'text' style = "width:70px;height:10px" id = 'x_maxim' value ='1'>, y_min = <input type = 'text' style = "width:70px;height:10px" id = 'y_minim' value = '0'>
<br><b>(*) Задайте коэффициенты: </b>
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&hairsp;&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>
<label>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&hairsp;&hairsp;<b>Задайте количество итераций для проверки на меньшем холсте:&hairsp;&hairsp;</b><input type='text' id='check2' value='600' ></label>
<br><b> Выберите номер эксперимента:</b>
<input type='number' size='1' id = 'num' min='1' max='5' value='0' step='1'>
<input type = 'button' style="width:200px;height:40px" id = 'to_start' value = 'Запуск	'></b></br>
</body>
</html>
</syntaxhighlight>
</div>