Редактирование: Фрактал
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
| Текущая версия | Ваш текст | ||
| Строка 1: | Строка 1: | ||
| − | Программа позволяет строить фрактальные и простые структуры при заданных начальных условиях | + | Программа позволяет строить фрактальные и простые структуры при заданных начальных условиях: координат "x" и "y" исходной точки, от которой будут высчитываться координаты остальных, и коэффициентах, участвующих в расчетах. Или же расчет новых точек можно задать с помощью задания угла поворота исходной |
| − | + | {{#widget:Iframe |url = http://tm.spbstu.ru/htmlets/js2020/Borisenkov/Fractals23.html | width =1500 | height = 1250| border = 0}} | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | {{#widget:Iframe |url = http://tm.spbstu.ru/htmlets/js2020/Borisenkov/ | ||
==Код программы== | ==Код программы== | ||
<div class="mw-collapsible mw-collapsed"> | <div class="mw-collapsible mw-collapsed"> | ||
| − | '''Код программы на языке JavaScript | + | '''Код программы на языке JavaScript:''' <div class="mw-collapsible-content"> |
<syntaxhighlight lang="javascript" line start="1" enclose="div"> | <syntaxhighlight lang="javascript" line start="1" enclose="div"> | ||
window.addEventListener('load',main,false); | window.addEventListener('load',main,false); | ||
| Строка 82: | Строка 16: | ||
var numb1; var numb2; var decim; | var numb1; var numb2; var decim; | ||
var interv; | var interv; | ||
| + | var way; | ||
var clear; | var clear; | ||
| − | var butt = document.getElementById(' | + | var butt = document.getElementById('addButton'); |
var update = document.getElementById('refresh'); | var update = document.getElementById('refresh'); | ||
X = []; // массив начальных иксов | X = []; // массив начальных иксов | ||
| Строка 99: | Строка 34: | ||
a_22 = 1; | a_22 = 1; | ||
var N = 200000; | var N = 200000; | ||
| + | var angle = 0; | ||
var x_min = 0; var y_min = 0; | var x_min = 0; var y_min = 0; | ||
var x_max = 1; var y_max = 1; | var x_max = 1; var y_max = 1; | ||
var x_move; var y_move; | var x_move; var y_move; | ||
var x_oldmin = 0; | var x_oldmin = 0; | ||
| − | var x_oldmax = | + | var x_oldmax = 1000; |
var y_oldmin = 0; | var y_oldmin = 0; | ||
| − | var y_oldmax = | + | var y_oldmax = 1000; |
| − | |||
| − | |||
| − | |||
| − | |||
var intermid; | var intermid; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
iterations.onchange = function () { | iterations.onchange = function () { | ||
N = document.getElementById('number_it').value; | N = document.getElementById('number_it').value; | ||
| Строка 163: | Строка 49: | ||
butt.onclick = function () { | butt.onclick = function () { | ||
| − | + | 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); | |
| − | + | ctx.fillStyle = "rgb("+ | |
| − | + | r+","+ | |
| − | + | g+","+ | |
| − | + | b+")"; | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| + | update.onclick = function () { ctx.clearRect(0,0,w,h); control(); } | ||
a11.onchange = function() { | a11.onchange = function() { | ||
a_11 = parseFloat(document.getElementById('a11').value); | a_11 = parseFloat(document.getElementById('a11').value); | ||
| + | document.getElementById('angle_rad').value = 0; | ||
document.getElementById('num').value = 0; | document.getElementById('num').value = 0; | ||
angle = 0; | angle = 0; | ||
| Строка 190: | Строка 69: | ||
a12.onchange = function() { | a12.onchange = function() { | ||
a_12 = parseFloat(document.getElementById('a12').value); | a_12 = parseFloat(document.getElementById('a12').value); | ||
| + | document.getElementById('angle_rad').value = 0; | ||
document.getElementById('num').value = 0; | document.getElementById('num').value = 0; | ||
angle = 0; | angle = 0; | ||
| Строка 195: | Строка 75: | ||
a21.onchange = function() { | a21.onchange = function() { | ||
a_21 = parseFloat(document.getElementById('a21').value); | a_21 = parseFloat(document.getElementById('a21').value); | ||
| + | document.getElementById('angle_rad').value = 0; | ||
document.getElementById('num').value = 0; | document.getElementById('num').value = 0; | ||
angle = 0; | angle = 0; | ||
| Строка 200: | Строка 81: | ||
a22.onchange = function() { | a22.onchange = function() { | ||
a_22 = parseFloat(document.getElementById('a22').value); | a_22 = parseFloat(document.getElementById('a22').value); | ||
| + | document.getElementById('angle_rad').value = 0; | ||
document.getElementById('num').value = 0; | document.getElementById('num').value = 0; | ||
angle = 0; | angle = 0; | ||
} | } | ||
| − | + | ||
| + | angle_rad.onchange = function() { | ||
| + | angle = parseFloat(document.getElementById('angle_rad').value); | ||
| + | document.getElementById('num').value = 0; | ||
| + | } | ||
| + | |||
cnv.onmousedown = function() { | cnv.onmousedown = function() { | ||
var zoom = document.getElementById('zoom_check'); | var zoom = document.getElementById('zoom_check'); | ||
| Строка 221: | Строка 108: | ||
g = Math.floor(Math.random()*256); | g = Math.floor(Math.random()*256); | ||
b = Math.floor(Math.random()*256); | b = Math.floor(Math.random()*256); | ||
| + | RGB.push(r); | ||
| + | RGB.push(g); | ||
| + | RGB.push(b); | ||
| + | ctx.fillStyle = "rgb("+ | ||
| + | r+","+ | ||
| + | g+","+ | ||
| + | b+")"; | ||
} else { | } else { | ||
| − | + | ctx.clearRect(0,0,w,h); | |
| − | + | X = []; | |
| − | + | Y = []; | |
| − | + | ctx.beginPath(); | |
| + | ctx.arc(x*scale,y*scale,3,0,2*Math.PI); | ||
| + | ctx.strokeStyle = 'blue'; | ||
| + | ctx.stroke(); | ||
} | } | ||
X.push(x); | X.push(x); | ||
Y.push(y); | Y.push(y); | ||
| − | + | ||
| − | + | 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(); | control(); | ||
} else { | } else { | ||
| Строка 249: | Строка 155: | ||
ctx.fill(); | ctx.fill(); | ||
move = true; | move = true; | ||
| − | |||
} | } | ||
| + | |||
} | } | ||
cnv.onmousemove = function () { | cnv.onmousemove = function () { | ||
if (move) { | if (move) { | ||
| − | |||
var rect = cnv.getBoundingClientRect(); | var 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. | + | ctx.arc(x_move,y_move,3,0,2*Math.PI); |
| − | ctx. | + | ctx.fill(); |
} | } | ||
} | } | ||
| Строка 288: | Строка 193: | ||
} | } | ||
z = z*scale/(x_relativemax - x_relativemin); | z = z*scale/(x_relativemax - x_relativemin); | ||
| − | + | ctx.clearRect(0,0,w,h); | |
| − | |||
move = false; | move = false; | ||
control(); | control(); | ||
} | } | ||
| − | |||
} | } | ||
| Строка 302: | Строка 205: | ||
function coord() { | function coord() { | ||
| − | numb1 = a_11*x+a_12*y; | + | 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() { | function draw() { | ||
| − | if ((x>=x_min)&&(x<=x_max)&&(y>=y_min)&&(y<=y_max)) { | + | zoom = document.getElementById('zoom_check'); |
| − | + | if ((zoom.checked)||( z != 1)) { | |
| − | + | if ((x>=x_min)&&(x<=x_max)&&(y>=y_min)&&(y<=y_max)) { | |
| − | + | ctx.beginPath(); | |
| − | + | ctx.rect((x-x_min)*z*scale,(y-y_min)*z*scale,1,1); | |
| − | + | ctx.fill(); | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| + | } else { | ||
| + | ctx.beginPath(); | ||
| + | ctx.rect(x*scale,y*scale,1,1); | ||
| + | ctx.fill(); | ||
| + | |||
} | } | ||
| − | |||
} | } | ||
function control () { | function control () { | ||
zoom = document.getElementById('zoom_check'); | zoom = document.getElementById('zoom_check'); | ||
| − | if | + | if (zoom.checked) { |
numberof = X.length; | numberof = X.length; | ||
for (m = 0; m<numberof; m++) { | for (m = 0; m<numberof; m++) { | ||
x = X[m]; | x = X[m]; | ||
y = Y[m]; | y = Y[m]; | ||
| − | |||
r = Number(RGB[m*3]); | r = Number(RGB[m*3]); | ||
g = Number(RGB[m*3+1]); | g = Number(RGB[m*3+1]); | ||
b = Number(RGB[m*3+2]); | b = Number(RGB[m*3+2]); | ||
| + | ctx.fillStyle = "rgb("+r+","+g+","+b+")"; | ||
for (j = 0;j<=N; j++){ | for (j = 0;j<=N; j++){ | ||
coord(); | coord(); | ||
draw(); | draw(); | ||
} | } | ||
| − | |||
} | } | ||
} else { | } else { | ||
| − | |||
for (j = 0;j<=N; j++){ | for (j = 0;j<=N; j++){ | ||
coord(); | coord(); | ||
| Строка 353: | Строка 257: | ||
} | } | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
function set_exp(N_exp) { | function set_exp(N_exp) { | ||
var k = Number(N_exp); | var k = Number(N_exp); | ||
| − | + | ctx.clearRect(0,0,w,h); | |
X = []; | X = []; | ||
Y = []; | Y = []; | ||
RGB = []; | RGB = []; | ||
| − | + | if (N_exp == 1) { document.getElementsByName('ways')[1].checked = true; x = 0.34; y = 0.31; 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; 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 == 3) { 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 == | + | if (N_exp == 4) { 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 == | + | if (N_exp == 5) { 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 == | + | if (N_exp == 6) { 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 == | + | if (N_exp == 7) { 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 == 8) { 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) { | if (N_exp) { | ||
| − | a11.value = a_11; | + | a11.value = a_11; angle_rad.value = angle; |
| − | a12.value = a_12; | + | a12.value = a_12; X.push(x); Y.push(y); |
a21.value = a_21; | a21.value = a_21; | ||
a22.value = a_22; | 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); | ||
| + | ctx.fillStyle = "rgb("+ | ||
| + | r+","+ | ||
| + | g+","+ | ||
| + | b+")"; | ||
} | } | ||
num.onchange = function() { set_exp(document.getElementById('num').value); control();} | num.onchange = function() { set_exp(document.getElementById('num').value); control();} | ||
| + | |||
| + | |||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Строка 401: | Строка 304: | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<title> Fractals </title> | <title> Fractals </title> | ||
| − | <script src = ' | + | <script src = 'Fractals.js'> |
</script> | </script> | ||
</head> | </head> | ||
<body> | <body> | ||
<p align = 'left'><canvas id = 'cnv' width = 1000 height = 1000 style='border: 1px solid black;'></canvas></p> | <p align = 'left'><canvas id = 'cnv' width = 1000 height = 1000 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> |
| − | + |     <label><input type='text' id='number_it' value ='200000'><b>Количество итераций</b></label> | |
| − | |||
| − |  <label><input type='text' | ||
<br><b>(*) Включить очистку холста после клика? </b> | <br><b>(*) Включить очистку холста после клика? </b> | ||
<label><input type = 'radio' name = 'clear_rect' value = 'yes'><b>Да</b></label> | <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> | <label><input type = 'radio' name = 'clear_rect' value = 'no' checked><b>Нет</b></label> | ||
| − |  <label><input type='text' | + |     <label><input type='text' id='a21' value='1' ><b>A_21</b></label> |
| − | <label><input type='text' | + | <label><input type='text' id='a22' value='1' ><b>A_22</b></label> |
</br> | </br> | ||
| + | <br><b> Или меняйте коэффициенты с помощью ползунков:</b> | ||
    <label><b>Режим <I>ZOOM'а</I><input type = 'checkbox' id = 'zoom_check'></b></label> |     <label><b>Режим <I>ZOOM'а</I><input type = 'checkbox' id = 'zoom_check'></b></label> | ||
| − | + | <br><input type = 'range' id='a11_ch' min = '-2' max = '2' step = '0.05' value = '1'> | |
| + | <input type = 'range' id='a12_ch' min = '-2' max = '2' step = '0.05' value = '1'> | ||
| + | <br><input type = 'range' id='a21_ch' min = '-2' max = '2' step = '0.05' value = '1'> | ||
| + | <input type = 'range' id='a22_ch' min = '-2' max = '2' step = '0.05' value = '1'> | ||
<br><b> Выберите номер эксперимента:</b> | <br><b> Выберите номер эксперимента:</b> | ||
| − | <input type='number' size='1' id = 'num' min='1' max=' | + | <input type='number' size='1' id = 'num' min='1' max='8' value='0' step='1'> |
| − | <br><b> <input type='button' id=' | + | <br><b> <input type='button' id='addButton' value='Сменить цвет рисовки'> |
| − | <input type = ' | + | <b>Способ вычисления новых точек:</b> |
| + | <input type = 'radio' name='ways' value = 'old' checked> <b>1-ый</b> | ||
| + | <input type = 'radio' name='ways' value = 'new'><b> 2-ой</b></br> | ||
| + | <br> | ||
| + | <b>Рисование с помощью поворота точки на заданный угол</b> | ||
| + | <label><input type='text' id='angle_rad' value ='0'><b> Угол поворота (в <I> радианах</I>)</b></label> | ||
</body> | </body> | ||
</html> | </html> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
</div> | </div> | ||
