Фрактал — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
(top)
(Код программы)
Строка 3: Строка 3:
 
{{#widget:Iframe |url = http://tm.spbstu.ru/htmlets/js2020/Borisenkov/Fractals25_12_1.html | width =1500 | height = 400| border = 0}}
 
{{#widget:Iframe |url = http://tm.spbstu.ru/htmlets/js2020/Borisenkov/Fractals25_12_1.html | width =1500 | height = 400| 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 = 1000;
 +
var a_11; var a_12; var a_21; var a_22;
 +
var numb1; var numb2; var decim;
 +
var interv;
 +
var way;
 +
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 angle = 0;
 +
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;
 +
 +
// заполняем холст непрозрачными белыми пикселями
 +
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('angle_rad').value = 0;
 +
document.getElementById('num').value = 0;
 +
angle = 0;
 +
}
 +
a12.onchange = function() {
 +
a_12 = parseFloat(document.getElementById('a12').value);
 +
document.getElementById('angle_rad').value = 0;
 +
document.getElementById('num').value = 0;
 +
angle = 0;
 +
}
 +
a21.onchange = function() {
 +
a_21 = parseFloat(document.getElementById('a21').value);
 +
document.getElementById('angle_rad').value = 0;
 +
document.getElementById('num').value = 0;
 +
angle = 0;
 +
}
 +
a22.onchange = function() {
 +
a_22 = parseFloat(document.getElementById('a22').value);
 +
document.getElementById('angle_rad').value = 0;
 +
document.getElementById('num').value = 0;
 +
angle = 0;
 +
}
 +
 +
angle_rad.onchange = function() {
 +
angle = parseFloat(document.getElementById('angle_rad').value);
 +
document.getElementById('num').value = 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);
 +
if (angle != 0) {
 +
a_11 = Math.cos(angle);
 +
a_22 = a_11;
 +
a_12 = Math.sin(angle);
 +
a_21 = -a_12;
 +
document.getElementById('a11').value = a_11;
 +
document.getElementById('a12').value = a_12;
 +
document.getElementById('a21').value = a_21;
 +
document.getElementById('a22').value = a_22;
 +
}
 +
 +
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();
 +
}
 +
}
 +
 
 +
function Func (numb) {
 +
decim = parseFloat(numb) - Math.floor(numb);
 +
return(decim);
 +
}
 +
 +
function coord() {
 +
way = document.getElementsByName('ways');
 +
if (way[0].checked == true) {
 +
numb1 = a_11*x+a_12*y;
 +
numb2 = a_21*x+a_22*y;
 +
x = Func(numb1);
 +
y = Func(numb2);
 +
}
 +
if (way[1].checked == true) {
 +
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) { document.getElementsByName('ways')[1].checked = true; x = 0.31; y = 0.32; angle = 0; a_11 = 1; a_12 = 0.5;     a_21 = -0.5; a_22 = 1; }
 +
if (N_exp == 2) { document.getElementsByName('ways')[1].checked = true; x = 0.46; y = 0.63; angle = 0; a_11 = 1; a_12 = 1;     a_21 = -0.9; a_22 = 1; }
 +
if (N_exp == 3) { 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; } 
 +
if (N_exp == 4) { 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; }
 +
if (N_exp == 5) { 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; }
 +
if (N_exp == 6) { 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; }
 +
if (N_exp == 7) { 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; }
 +
if (N_exp == 8) { 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; }
 +
if (N_exp == 9) { 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; }
 +
if (N_exp) {
 +
 +
a11.value = a_11;    angle_rad.value = angle;
 +
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.js'>
 +
</script>
 +
</head>
 +
<body>
 +
<p align = 'left'><canvas id = 'cnv' width = 100 height = 100 style='border: 1px solid black;'></canvas></p>
 +
<b>(*) Задайте коэффициенты (в графе угла должен стоять "0"):</b>
 +
<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>
 +
<br><b> Или меняйте коэффициенты с помощью ползунков:</b>
 +
&emsp;&emsp;&hairsp;&hairsp;<label><b>Режим <I>ZOOM'а</I><input type = 'checkbox' id = 'zoom_check'></b></label>
 +
<br><b> Выберите номер эксперимента:</b>
 +
<input type='number' size='1' id = 'num' min='1' max='8' value='0' step='1'>
 +
<br>
 +
<b>Способ вычисления новых точек:</b>
 +
<input type = 'radio' name='ways' value = 'old' checked> <b>1-ый</b>
 +
<input type = 'radio' name='ways' value = 'new'><b> 2-ой</b>
 +
<input type = 'button' style="width:200px;height:40px" id = 'to_start' value = 'Запуск '></b></br>
 +
<br>
 +
<b>Рисование с помощью поворота точки на заданный угол</b>
 +
<label><input type='text' id='angle_rad' value ='0'><b> Угол поворота (в <I> радианах</I>)</b></label>
 +
</body>
 +
</html>
 +
</syntaxhighlight>
 +
</div>
 +
==Код 2-ой программы программы==
 
<div class="mw-collapsible mw-collapsed">
 
<div class="mw-collapsible mw-collapsed">
 
'''Код программы на языке JavaScript (разработчик Богдан Борисенков):''' <div class="mw-collapsible-content">
 
'''Код программы на языке JavaScript (разработчик Богдан Борисенков):''' <div class="mw-collapsible-content">
Строка 39: Строка 394:
 
var intermid;
 
var intermid;
 
var imageData = ctx.createImageData(w,h);
 
var imageData = ctx.createImageData(w,h);
 +
var imageData2;
 
var SECCANV = []; // массив пикселей маленького канваса  
 
var SECCANV = []; // массив пикселей маленького канваса  
 
var square; // площадь при конкретных начальных условиях
 
var square; // площадь при конкретных начальных условиях
 
var SQ = []; // массив площадей нерегулярных областей
 
var SQ = []; // массив площадей нерегулярных областей
 
var RGB = []   
 
var RGB = []   
var numbclr;
+
var numbclr; var nz = z;
  
 
for (d = 0; d<24; d++) {
 
for (d = 0; d<24; d++) {
Строка 126: Строка 482:
 
y_relativemin = event.clientY - rect.top;
 
y_relativemin = event.clientY - rect.top;
 
move = true;
 
move = true;
 +
imageData2 = ctx.getImageData(0,0,w,h);
 
}
 
}
 
}
 
}
Строка 131: Строка 488:
 
cnv.onmousemove = function () {
 
cnv.onmousemove = function () {
 
if (move) {
 
if (move) {
 +
ctx.putImageData(imageData2,0,0);
 
rect = cnv.getBoundingClientRect();
 
rect = cnv.getBoundingClientRect();
 
y_move = (event.clientY - rect.top);
 
y_move = (event.clientY - rect.top);
 
x_move = (y_move-y_relativemin) + x_relativemin;
 
x_move = (y_move-y_relativemin) + x_relativemin;
 
ctx.beginPath();
 
ctx.beginPath();
ctx.arc(x_move,y_move,1,0,2*Math.PI);
+
ctx.rect(x_relativemin,y_relativemin,x_move - x_relativemin,y_move - y_relativemin);
 
ctx.fillStyle = 'green';
 
ctx.fillStyle = 'green';
ctx.fill();
+
ctx.stroke();
 
}
 
}
 
}
 
}
Строка 163: Строка 521:
 
}
 
}
 
z = z*scale/(x_relativemax - x_relativemin);
 
z = z*scale/(x_relativemax - x_relativemin);
 +
some_span.innerHTML = "Увеличение в "+z.toFixed(2)+" раз";
 +
nz = Math.pow(z,(1/4));
 +
scale2 *= nz;
 
clearcanv ();
 
clearcanv ();
 
SECCANV = [];
 
SECCANV = [];
Строка 237: Строка 598:
 
SECCANV[ind] = 1;
 
SECCANV[ind] = 1;
 
square += 1;
 
square += 1;
for (k = 0; k<600; k++) {
+
for (k = 0; k<parseInt(600*nz); k++) {
 
coord();
 
coord();
idx = Math.floor((x-x_min)*scale2)*scale2 + Math.floor((y-y_min)*scale2);
+
idx = Math.floor(x*scale2)*Math.floor(scale2) + Math.floor(y*scale2);
if ((x>=x_min)&&(x<=x_max)&&(y>=y_min)&&(y<=y_max)&&(SECCANV[idx] != 1)) { SECCANV[idx] = 1; square+= 1;}
+
if (SECCANV[idx] != 1) { SECCANV[idx] = 1; square+= 1;}
 
}
 
}
if (square >= 180) {
+
if (square >=parseInt(180*nz)) {
 
if (SQ == []) {
 
if (SQ == []) {
 
SQ.push(square);
 
SQ.push(square);
Строка 260: Строка 621:
 
SQ = [];
 
SQ = [];
 
if (N_exp == 1) { document.getElementsByName('ways')[1].checked = true; angle = 0; a_11 = 1; a_12 = 0.5;     a_21 = -0.5; a_22 = 1; }
 
if (N_exp == 1) { document.getElementsByName('ways')[1].checked = true; angle = 0; a_11 = 1; a_12 = 0.5;     a_21 = -0.5; a_22 = 1; }
if (N_exp == 2) { document.getElementsByName('ways')[0].checked = true; angle = 0; a_11 = 1;     a_12 = 0.01; a_21 = 0.01; a_22 = -1; } 
+
if (N_exp == 2) { document.getElementsByName('ways')[0].checked = true; angle = 0; a_11 = -0.05;  a_12 = -0.95;   a_21 = 1.1; a_22 = 0.65; }
if (N_exp == 3) { document.getElementsByName('ways')[0].checked = true; angle = 0; a_11 = 1;    a_12 = 0.32; a_21 = 0.32; a_22 = -1; }
 
if (N_exp == 4) { document.getElementsByName('ways')[0].checked = true; angle = 0; a_11 = 0.9;  a_12 = 0.1;     a_21 = -0.1; a_22 = 1.2; }
 
if (N_exp == 5) { document.getElementsByName('ways')[1].checked = true; angle = 3; a_11 = Math.cos(angle); a_12 = Math.sin(angle); a_21 = -a_12; a_22 = a_11; }
 
if (N_exp == 6) { document.getElementsByName('ways')[0].checked = true; angle = 0; a_11 = 1;  a_12 = 1.5;     a_21 = 0.01; a_22 = -1; }
 
if (N_exp == 7) { document.getElementsByName('ways')[0].checked = true; angle = 0; a_11 = 1;  a_12 = 0.1296;     a_21 = -0.1296; a_22 = 1; }
 
if (N_exp == 8) { document.getElementsByName('ways')[0].checked = true; angle = 0; a_11 = -0.05;  a_12 = -0.95;   a_21 = 1.1; a_22 = 0.65; }
 
 
if (N_exp) {
 
if (N_exp) {
 
 
Строка 288: Строка 643:
 
<meta charset="UTF-8">
 
<meta charset="UTF-8">
 
<title> Fractals </title>
 
<title> Fractals </title>
<script src = 'Fractals25.js'>
+
<script src = 'Fractals25_12_1.js'>
 
  </script>
 
  </script>
 
</head>
 
</head>
 
<body>
 
<body>
 
<p align = 'left'><canvas id = 'cnv' width = 100 height = 100 style='border: 1px solid black;'></canvas></p>
 
<p align = 'left'><canvas id = 'cnv' width = 100 height = 100 style='border: 1px solid black;'></canvas></p>
<b>(*) Задайте коэффициенты (в графе угла должен стоять "0"):</b>
+
<span id=some_span></span>
 +
<br><b>(*) Задайте коэффициенты (в графе угла должен стоять "0"):</b>
 
<label><input type='text' id='a11' value='1' ><b>A_11</b></label>  
 
<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>
 
<label><input type='text' id='a12' value='1' ><b>A_12</b></label>
Строка 305: Строка 661:
 
&emsp;&emsp;&hairsp;&hairsp;<label><b>Режим <I>ZOOM'а</I><input type = 'checkbox' id = 'zoom_check'></b></label>
 
&emsp;&emsp;&hairsp;&hairsp;<label><b>Режим <I>ZOOM'а</I><input type = 'checkbox' id = 'zoom_check'></b></label>
 
<br><b> Выберите номер эксперимента:</b>
 
<br><b> Выберите номер эксперимента:</b>
<input type='number' size='1' id = 'num' min='1' max='8' value='0' step='1'>
+
<input type='number' size='1' id = 'num' min='1' max='2' value='0' step='1'>
 
<br>
 
<br>
 
<b>Способ вычисления новых точек:</b>
 
<b>Способ вычисления новых точек:</b>
<input type = 'radio' name='ways' value = 'old' checked> <b>1-ый</b>
+
<input type = 'radio' name='ways' value = 'old'> <b>1-ый</b>
<input type = 'radio' name='ways' value = 'new'><b> 2-ой</b>
+
<input type = 'radio' name='ways' value = 'new' checked><b> 2-ой</b>
 
<input type = 'button' style="width:200px;height:40px" id = 'to_start' value = 'Запуск '></b></br>
 
<input type = 'button' style="width:200px;height:40px" id = 'to_start' value = 'Запуск '></b></br>
 
<br>
 
<br>

Версия 09:06, 5 ноября 2020

Программа позволяет строить фрактальные и простые структуры при заданных начальных условиях: координат "x" и "y" исходной точки, от которой будут высчитываться координаты остальных, и коэффициентах, участвующих в расчетах. Или же расчет новых точек можно задать с помощью задания угла поворота исходной

Код 1-ой программы программы

Код программы на языке 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 	var way;
 12 	var clear;
 13 	var butt = document.getElementById('downloadimg');
 14 	var update = document.getElementById('refresh');
 15 	X = []; // массив начальных иксов
 16 	Y = []; // массив начальных игриков
 17 	var move = false;
 18 	var numberof;
 19 	var z = 1;
 20 	var RGB = [];
 21 	var z2 = 1;
 22 	var iterations = document.getElementById('number_it');
 23 	// начальные условия 
 24 	a_11 = 1;
 25 	a_12 = 1;
 26 	a_21 = 1;
 27 	a_22 = 1;
 28 	var N = 200000;
 29 	var angle = 0;
 30 	var x_min = 0; var y_min = 0;
 31 	var x_max = 1; var y_max = 1;
 32 	var x_move; var y_move;
 33 	var x_oldmin = 0;
 34 	var x_oldmax = scale;
 35 	var y_oldmin = 0;
 36 	var y_oldmax = scale;
 37 	var intermid;
 38 	var imageData = ctx.createImageData(w,h);
 39 	var imageData2;
 40 	var upd = false;
 41 	
 42 	// заполняем холст непрозрачными белыми пикселями
 43 	for (i = 0; i<1000; i++) {
 44 			for (j = 0; j<1000; j++) {
 45 				index = parseInt((i*w + j)*4);
 46 				imageData.data[index+0] = 255;
 47 				imageData.data[index+1] = 255;
 48 				imageData.data[index+2] = 255;
 49 				imageData.data[index+3] = 255;
 50 			}
 51 		}
 52 	ctx.putImageData(imageData,0,0);
 53 
 54 	iterations.onchange = function () {
 55 		N = document.getElementById('number_it').value;
 56 	}
 57 
 58 	butt.onclick = function () {
 59 	var dataURL = cnv.toDataURL("image/jpeg");
 60 	var link = document.createElement("a");
 61 	document.body.appendChild(link); 
 62 	link.href = dataURL;
 63 	link.download = "my-image-name.jpg";
 64 	link.click();
 65 	document.body.removeChild(link);
 66 	}
 67 	update.onclick = function () { clearcanv(); upd = true; control(); }
 68 	a11.onchange = function() {
 69 		a_11 = parseFloat(document.getElementById('a11').value);
 70 		document.getElementById('angle_rad').value = 0;
 71 		document.getElementById('num').value = 0;
 72 		angle = 0;
 73 	}
 74 	a12.onchange = function() {
 75 		a_12 = parseFloat(document.getElementById('a12').value);
 76 		document.getElementById('angle_rad').value = 0;
 77 		document.getElementById('num').value = 0;
 78 		angle = 0;
 79 	}
 80 	a21.onchange = function() {
 81 		a_21 = parseFloat(document.getElementById('a21').value);
 82 		document.getElementById('angle_rad').value = 0;
 83 		document.getElementById('num').value = 0;
 84 		angle = 0;
 85 	}
 86 	a22.onchange = function() {
 87 		a_22 = parseFloat(document.getElementById('a22').value);
 88 		document.getElementById('angle_rad').value = 0;
 89 		document.getElementById('num').value = 0;
 90 		angle = 0;
 91 	}
 92 	
 93 	angle_rad.onchange = function() {
 94 		angle = parseFloat(document.getElementById('angle_rad').value);
 95 		document.getElementById('num').value = 0;
 96 	}
 97 		
 98 	cnv.onmousedown = function() {
 99 		var zoom = document.getElementById('zoom_check');
100 		if (!zoom.checked) {
101 		var rect = cnv.getBoundingClientRect();
102 		console.log((event.clientX - rect.left)/scale,(event.clientY - rect.top)/scale);
103 		if (z != 1) {
104 			z2 = x_max - x_min;
105 			x = x_min + (event.clientX - rect.left)*z2/scale;
106 			y = y_min + (event.clientY - rect.top)*z2/scale;
107 		} else {
108 			x = (event.clientX - rect.left)/scale;
109 			y = (event.clientY - rect.top)/scale;
110 		}
111 		clear = document.getElementsByName('clear_rect');
112 		if (clear[1].checked == true) {
113 			r = Math.floor(Math.random()*256);
114 			g = Math.floor(Math.random()*256);
115 			b = Math.floor(Math.random()*256);
116 		} else {
117 		clearcanv ();
118 		some_span.innerHTML = "";
119 		z = 1;
120 		z2 = 1;
121 		RGB = [];
122 		X = [];
123 		Y = [];
124 		r = Math.floor(Math.random()*256);
125 		g = Math.floor(Math.random()*256);
126 		b = Math.floor(Math.random()*256);
127 		ctx.beginPath();
128 		ctx.arc(x*scale,y*scale,3,0,2*Math.PI);
129 		ctx.strokeStyle = 'blue';
130 		ctx.stroke();
131 		}
132 		X.push(x);
133 		Y.push(y);
134 		RGB.push(r);
135 		RGB.push(g);
136 		RGB.push(b);
137 		if (angle != 0) {
138 			a_11 = Math.cos(angle);
139 			a_22 = a_11;
140 			a_12 = Math.sin(angle);
141 			a_21 = -a_12;
142 			document.getElementById('a11').value = a_11;
143 			document.getElementById('a12').value = a_12;
144 			document.getElementById('a21').value = a_21;
145 			document.getElementById('a22').value = a_22;
146 		}
147 		
148 		control();
149 		} else { 
150 		var rect = cnv.getBoundingClientRect();
151 		z2 = x_max - x_min;
152 		x_oldmin = x_min*scale;
153 		y_oldmin = y_min*scale;
154 		x_oldmax = x_max*scale;
155 		y_oldmax = y_max*scale;
156 		x_min = (event.clientX - rect.left)*z2 + x_oldmin;
157 		y_min = (event.clientY - rect.top)*z2 + y_oldmin;
158 		x_relativemin = event.clientX - rect.left;
159 		y_relativemin = event.clientY - rect.top;
160 		ctx.beginPath();
161 		ctx.rect(event.clientX - rect.left,event.clientY - rect.top,1,1);
162 		ctx.fillStyle = 'blue';
163 		ctx.fill();
164 		move = true;
165 		imageData2 = ctx.getImageData(0,0,w,h);
166 		}
167 		
168 	}
169 
170 	cnv.onmousemove = function () {
171 		if (move) {
172 		ctx.putImageData(imageData2,0,0);
173 		var rect = cnv.getBoundingClientRect();
174 		y_move = (event.clientY - rect.top);
175 		x_move = (y_move-y_relativemin) + x_relativemin;
176 		ctx.beginPath();
177 		ctx.rect(x_relativemin,y_relativemin,x_move-x_relativemin,y_move-y_relativemin);
178 		ctx.stroke();
179 		}
180 	}
181 	
182 	cnv.onmouseup = function () {
183 		zoom = document.getElementById('zoom_check');
184 		if (zoom.checked) { 
185 		x_relativemax = x_move;
186 		y_relativemax = y_move;
187 			y_max = y_move*z2 + y_oldmin;
188 			x_max = x_move*z2 + x_oldmin;
189 			x_min = x_min/scale;
190 			y_min = y_min/scale;
191 			x_max = x_max/scale;
192 			y_max = y_max/scale;
193 			if (x_min > x_max) {
194 				intermid = x_min;
195 				x_min = x_max;
196 				x_max = intermid;
197 			}
198 			if (y_min > y_max) { 
199 				intermid = y_min;
200 				y_min = y_max;
201 				y_max = intermid;
202 			}
203 			z = z*scale/(x_relativemax - x_relativemin);
204 			some_span.innerHTML = "Увеличение в "+z.toFixed(2)+" раз";
205 			clearcanv ();
206 			move = false;
207 			control();
208 		}
209 	}
210 
211 	function Func (numb) {
212 		decim = parseFloat(numb) - Math.floor(numb);
213 		return(decim);
214 	}
215 	
216 	function coord() {
217 		way = document.getElementsByName('ways');
218 			if (way[0].checked == true) { 
219 				numb1 = a_11*x+a_12*y;
220 				numb2 = a_21*x+a_22*y;
221 				x = Func(numb1);
222 				y = Func(numb2);
223 			}
224 			if (way[1].checked == true) {
225 				numb1 = a_11*x+a_12*y;
226 				x = Func(numb1);
227 				numb2 = a_21*x+a_22*y;
228 				y = Func(numb2);
229 			}
230 	}
231 
232 	function draw() { 
233 		if ((x>=x_min)&&(x<=x_max)&&(y>=y_min)&&(y<=y_max)) {
234 				index = (Math.floor((y-y_min)*z*scale)*w + Math.floor((x-x_min)*z*scale))*4;
235 				imageData.data[index+0] = r;
236 				imageData.data[index+1] = g;
237 				imageData.data[index+2] = b;
238 			}
239 	}
240 	// функция отчистки канваса 
241 	function clearcanv () {
242 		for (i = 0; i<1000; i++) {
243 			for (j = 0; j<1000; j++) {
244 				index = parseInt((i*w + j)*4);
245 				imageData.data[index+0] = 255;
246 				imageData.data[index+1] = 255;
247 				imageData.data[index+2] = 255;
248 			}
249 		}
250 		ctx.putImageData(imageData,0,0);
251 	}
252 	
253 	function control () {
254 		zoom = document.getElementById('zoom_check');
255 		if ((zoom.checked)||(upd == true)) {
256 			numberof = X.length;
257 			for (m = 0; m<numberof; m++) {
258 				x = X[m];
259 				y = Y[m];
260 				r = Number(RGB[m*3]);
261 				g = Number(RGB[m*3+1]);
262 				b = Number(RGB[m*3+2]);
263 				for (j = 0;j<=N; j++){
264 				coord();
265 				draw();
266 				}
267 				upd = false;
268 			}
269 		} else {
270 			for (j = 0;j<=N; j++){
271 				coord();
272 				draw();
273 				}
274 		}
275 		ctx.putImageData(imageData,0,0);
276 		
277 	}
278 
279 	function set_exp(N_exp) {
280 		var k = Number(N_exp);
281 		clearcanv ();
282 		X = [];
283 		Y = [];
284 		RGB = [];
285 		z = 1;
286 		z2 = 1;
287 		x_min = 0; y_min = 0; x_max = 1; y_max = 1; x_oldmin = 0; y_oldmin = 0; x_oldmax = scale; y_oldmax = scale;
288 		if (N_exp == 1) { document.getElementsByName('ways')[1].checked = true; x = 0.31; y = 0.32; angle = 0; a_11 = 1; 	a_12 = 0.5;	    a_21 = -0.5;	a_22 = 1; }
289 		if (N_exp == 2) { document.getElementsByName('ways')[1].checked = true; x = 0.46; y = 0.63; angle = 0; a_11 = 1; 	a_12 = 1;	    a_21 = -0.9;	a_22 = 1; } 
290 		if (N_exp == 3) { 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; }  	 		
291 		if (N_exp == 4) { 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; } 
292 		if (N_exp == 5) { 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; }
293 		if (N_exp == 6) { 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; }
294 		if (N_exp == 7) { 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; }
295 		if (N_exp == 8) { 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; }
296 		if (N_exp == 9) { 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; }
297 		if (N_exp) {
298 			
299 			a11.value = a_11;    angle_rad.value = angle; 
300 			a12.value = a_12;    X.push(x); Y.push(y);
301 			a21.value = a_21;   
302 			a22.value = a_22;	
303 		}
304 		r = Math.floor(Math.random()*256);
305 		g = Math.floor(Math.random()*256);
306 		b = Math.floor(Math.random()*256);
307 		RGB.push(r);
308 		RGB.push(g);
309 		RGB.push(b);
310 	}	
311 	num.onchange = function() { set_exp(document.getElementById('num').value); control();}
312 }
html - файл:
 1 <html>
 2 <head>
 3 <meta charset="UTF-8">
 4 <title> Fractals </title>
 5 <script src = 'Fractals25.js'>
 6  </script>
 7 </head>
 8 <body>
 9 <p align = 'left'><canvas id = 'cnv' width = 100 height = 100 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> Или меняйте коэффициенты с помощью ползунков:</b>
20 &emsp;&emsp;&hairsp;&hairsp;<label><b>Режим <I>ZOOM'а</I><input type = 'checkbox' id = 'zoom_check'></b></label>
21 <br><b> Выберите номер эксперимента:</b>
22 <input type='number' size='1' id = 'num' min='1' max='8' value='0' step='1'>
23 <br>
24 <b>Способ вычисления новых точек:</b>
25 <input type = 'radio' name='ways' value = 'old' checked> <b>1-ый</b>
26 <input type = 'radio' name='ways' value = 'new'><b> 2-ой</b>
27 <input type = 'button' style="width:200px;height:40px" id = 'to_start' value = 'Запуск	'></b></br>
28 <br>
29 <b>Рисование с помощью поворота точки на заданный угол</b>
30 <label><input type='text' id='angle_rad' value ='0'><b> Угол поворота (в <I> радианах</I>)</b></label>
31 </body>
32 </html>

Код 2-ой программы программы

Код программы на языке 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 = 100;
  8 	var scale2 = 30;
  9 	var a_11; var a_12; var a_21; var a_22;
 10 	var numb1; var numb2; var decim;
 11 	var interv;
 12 	var way;
 13 	var clear;
 14 	var start_draw = document.getElementById('to_start');
 15 	var move = false;
 16 	var z = 1;
 17 	var z2 = 1;
 18 	// начальные условия 
 19 	a_11 = 1;
 20 	a_12 = 1;
 21 	a_21 = 1;
 22 	a_22 = 1;
 23 	var angle = 0;
 24 	var x_min = 0; var y_min = 0;
 25 	var x_max = 1; var y_max = 1;
 26 	var x_move; var y_move;
 27 	var x_oldmin = 0;
 28 	var x_oldmax = scale;
 29 	var y_oldmin = 0;
 30 	var y_oldmax = scale;
 31 	var intermid;
 32 	var imageData = ctx.createImageData(w,h);
 33 	var imageData2;
 34 	var SECCANV = []; // массив пикселей маленького канваса 
 35 	var square; // площадь при конкретных начальных условиях
 36 	var SQ = []; // массив площадей нерегулярных областей
 37 	var RGB = []  
 38 	var numbclr; var nz = z;
 39 
 40 	for (d = 0; d<24; d++) {
 41 		RGB.push(Math.floor(Math.random()*256));
 42 	}
 43 	
 44 	// заполняем холст непрозрачными белыми пикселями
 45 	for (i = 0; i<100; i++) {
 46 			for (j = 0; j<100; j++) {
 47 				index = parseInt((i*w + j)*4);
 48 				imageData.data[index+0] = 255;
 49 				imageData.data[index+1] = 255;
 50 				imageData.data[index+2] = 255;
 51 				imageData.data[index+3] = 255;
 52 			}
 53 	}
 54 	ctx.putImageData(imageData,0,0);
 55 	start_draw.onclick = function () { 
 56 		zoom = document.getElementById('zoom_check');
 57 		if (!zoom.checked) {
 58 			clearcanv(); 
 59 			square = 0;
 60 			SQ = [];
 61 			if (angle != 0) {
 62 				a_11 = Math.cos(angle);
 63 				a_22 = a_11;
 64 				a_12 = Math.sin(angle);
 65 				a_21 = -a_12;
 66 				document.getElementById('a11').value = a_11;
 67 				document.getElementById('a12').value = a_12;
 68 				document.getElementById('a21').value = a_21;
 69 				document.getElementById('a22').value = a_22;
 70 			}	
 71 			checking(x_min,y_min,x_max,y_max);
 72 		} else {
 73 			alert("Выключите режим зума");
 74 		}
 75 	}
 76 	
 77 	a11.onchange = function() {
 78 		a_11 = parseFloat(document.getElementById('a11').value);
 79 		document.getElementById('angle_rad').value = 0;
 80 		document.getElementById('num').value = 0;
 81 		angle = 0;
 82 	}
 83 	a12.onchange = function() {
 84 		a_12 = parseFloat(document.getElementById('a12').value);
 85 		document.getElementById('angle_rad').value = 0;
 86 		document.getElementById('num').value = 0;
 87 		angle = 0;
 88 	}
 89 	a21.onchange = function() {
 90 		a_21 = parseFloat(document.getElementById('a21').value);
 91 		document.getElementById('angle_rad').value = 0;
 92 		document.getElementById('num').value = 0;
 93 		angle = 0;
 94 	}
 95 	a22.onchange = function() {
 96 		a_22 = parseFloat(document.getElementById('a22').value);
 97 		document.getElementById('angle_rad').value = 0;
 98 		document.getElementById('num').value = 0;
 99 		angle = 0;
100 	}
101 	
102 	angle_rad.onchange = function() {
103 		angle = parseFloat(document.getElementById('angle_rad').value);
104 		document.getElementById('num').value = 0;
105 	}
106 		
107 	cnv.onmousedown = function() {
108 		var zoom = document.getElementById('zoom_check');
109 		if (zoom.checked) {
110 			var rect = cnv.getBoundingClientRect();
111 			z2 = x_max - x_min;
112 			x_oldmin = x_min*scale;
113 			y_oldmin = y_min*scale;
114 			x_oldmax = x_max*scale;
115 			y_oldmax = y_max*scale;
116 			x_min = (event.clientX - rect.left)*z2 + x_oldmin;
117 			y_min = (event.clientY - rect.top)*z2 + y_oldmin;
118 			x_relativemin = event.clientX - rect.left;
119 			y_relativemin = event.clientY - rect.top;
120 			move = true;
121 			imageData2 = ctx.getImageData(0,0,w,h);
122 		}
123 	}
124 
125 	cnv.onmousemove = function () {
126 		if (move) {
127 		ctx.putImageData(imageData2,0,0);
128 		rect = cnv.getBoundingClientRect();
129 		y_move = (event.clientY - rect.top);
130 		x_move = (y_move-y_relativemin) + x_relativemin;
131 		ctx.beginPath();
132 		ctx.rect(x_relativemin,y_relativemin,x_move - x_relativemin,y_move - y_relativemin);
133 		ctx.fillStyle = 'green';
134 		ctx.stroke();
135 		}
136 	}
137 	
138 	cnv.onmouseup = function () {
139 		zoom = document.getElementById('zoom_check');
140 		if (zoom.checked) { 
141 		x_relativemax = x_move;
142 		y_relativemax = y_move;
143 			y_max = y_move*z2 + y_oldmin;
144 			x_max = x_move*z2 + x_oldmin;
145 			x_min = x_min/scale;
146 			y_min = y_min/scale;
147 			x_max = x_max/scale;
148 			y_max = y_max/scale;
149 			if (x_min > x_max) {
150 				intermid = x_min;
151 				x_min = x_max;
152 				x_max = intermid;
153 			}
154 			if (y_min > y_max) { 
155 				intermid = y_min;
156 				y_min = y_max;
157 				y_max = intermid;
158 			}
159 			z = z*scale/(x_relativemax - x_relativemin);
160 			some_span.innerHTML = "Увеличение в "+z.toFixed(2)+" раз";
161 			nz = Math.pow(z,(1/4));
162 			scale2 *= nz;
163 			clearcanv ();
164 			SECCANV = [];
165             SQ = [];
166 			square = 0;
167 			move = false;
168 			checking(x_min,y_min,x_max,y_max);
169 		}
170 	}
171 
172 	function Func (numb) {
173 		decim = parseFloat(numb) - Math.floor(numb);
174 		return(decim);
175 	}
176 	
177 	function coord() {
178 		way = document.getElementsByName('ways');
179 			if (way[0].checked == true) { 
180 				numb1 = a_11*x+a_12*y;
181 				numb2 = a_21*x+a_22*y;
182 				x = Func(numb1);
183 				y = Func(numb2);
184 			}
185 			if (way[1].checked == true) {
186 				numb1 = a_11*x+a_12*y;
187 				x = Func(numb1);
188 				numb2 = a_21*x+a_22*y;
189 				y = Func(numb2);
190 			}
191 	}
192 
193 	// функция отчистки канваса 
194 	function clearcanv () {
195 		for (i = 0; i<scale; i++) {
196 			for (j = 0; j<scale; j++) {
197 				index = parseInt((i*w + j)*4);
198 				imageData.data[index+0] = 255;
199 				imageData.data[index+1] = 255;
200 				imageData.data[index+2] = 255;
201 			}
202 		}
203 		ctx.putImageData(imageData,0,0);
204 	}
205 	
206 	function checking (xmin,ymin,xmax,ymax) { 
207 		for (i = 0;i<scale; i++) {
208 			for (j = 0;j<scale; j++) {
209 				SECCANV = [];
210 				square = 0;
211 				x = xmin + j*(xmax - xmin)/scale;
212 				y = ymin + i*(ymax - ymin)/scale;
213 				index = Math.floor(x*scale2)*scale2 + Math.floor(y*scale2);
214 				draw_check = control(index);
215 				if (draw_check == 1) { 
216 					index = parseInt((i*w + j)*4);
217 					if (numbclr == -1) {
218 					numbclr = SQ.length;
219 					SQ.push(square);
220 					}
221 					if (numbclr>7) { 
222 					numbclr = (numbclr - 1)%8;
223 					}
224 					imageData.data[index+0] = RGB[numbclr*3];
225 					imageData.data[index+1] = RGB[numbclr*3+1];
226 					imageData.data[index+2] = RGB[numbclr*3+2];
227 				}
228 			}
229 		}
230 		ctx.putImageData(imageData,0,0);
231 	}
232 	
233 	function control(ind) { 
234 		numbclr = -1;
235 		SECCANV[ind] = 1;
236 		square += 1;
237 		for (k = 0; k<parseInt(600*nz); k++) {
238 			coord();
239 			idx = Math.floor(x*scale2)*Math.floor(scale2) + Math.floor(y*scale2);
240 			if (SECCANV[idx] != 1) { SECCANV[idx] = 1; square+= 1;}
241 		}
242 		if (square >=parseInt(180*nz)) {
243 			if (SQ == []) {
244 				SQ.push(square);
245 				numbclr = 0;
246 			} else { for (m = 0; m<SQ.length; m++) {
247 				if (square == SQ[m]) { numbclr = m; break;}
248 			}
249 			}
250 			return(1);
251 		} else { return(0); }
252 	}
253 	
254 
255 	function set_exp(N_exp) {
256 		var k = Number(N_exp);
257 		clearcanv ();
258 		SQ = [];
259 		if (N_exp == 1) { document.getElementsByName('ways')[1].checked = true; angle = 0; a_11 = 1; 	a_12 = 0.5;	    a_21 = -0.5;	a_22 = 1; } 			
260 		if (N_exp == 2) { document.getElementsByName('ways')[0].checked = true; angle = 0; a_11 = -0.05;   a_12 = -0.95;	   a_21 = 1.1;	a_22 = 0.65; }
261 		if (N_exp) {
262 			
263 			a11.value = a_11;    angle_rad.value = angle; 
264 			a12.value = a_12;    
265 			a21.value = a_21;   
266 			a22.value = a_22;	
267 		}
268 	}	
269 	
270 	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);}
271 	
272 }
html - файл:
 1 <html>
 2 <head>
 3 <meta charset="UTF-8">
 4 <title> Fractals </title>
 5 <script src = 'Fractals25_12_1.js'>
 6  </script>
 7 </head>
 8 <body>
 9 <p align = 'left'><canvas id = 'cnv' width = 100 height = 100 style='border: 1px solid black;'></canvas></p>
10 <span id=some_span></span>
11 <br><b>(*) Задайте коэффициенты (в графе угла должен стоять "0"):</b>
12 <label><input type='text' id='a11' value='1' ><b>A_11</b></label> 
13 <label><input type='text' id='a12' value='1' ><b>A_12</b></label>
14 <br><b>(*) Включить очистку холста после клика? </b>
15 <label><input type = 'radio' name = 'clear_rect' value = 'yes'><b>Да</b></label>
16 <label><input type = 'radio' name = 'clear_rect' value = 'no' checked><b>Нет</b></label>
17 &emsp;&emsp;&hairsp;&hairsp;<label><input type='text' id='a21' value='1' ><b>A_21</b></label>
18 <label><input type='text' id='a22' value='1' ><b>A_22</b></label>
19 </br>
20 <br><b> Или меняйте коэффициенты с помощью ползунков:</b>
21 &emsp;&emsp;&hairsp;&hairsp;<label><b>Режим <I>ZOOM'а</I><input type = 'checkbox' id = 'zoom_check'></b></label>
22 <br><b> Выберите номер эксперимента:</b>
23 <input type='number' size='1' id = 'num' min='1' max='2' value='0' step='1'>
24 <br>
25 <b>Способ вычисления новых точек:</b>
26 <input type = 'radio' name='ways' value = 'old'> <b>1-ый</b>
27 <input type = 'radio' name='ways' value = 'new' checked><b> 2-ой</b>
28 <input type = 'button' style="width:200px;height:40px" id = 'to_start' value = 'Запуск	'></b></br>
29 <br>
30 <b>Рисование с помощью поворота точки на заданный угол</b>
31 <label><input type='text' id='angle_rad' value ='0'><b> Угол поворота (в <I> радианах</I>)</b></label>
32 </body>
33 </html>