Редактирование: Фрактал
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия | Ваш текст | ||
Строка 68: | Строка 68: | ||
{{#widget:Iframe |url = http://tm.spbstu.ru/htmlets/js2020/Borisenkov/Fractals25_kopia1_03_21.html | width =1500 | height = 1250| border = 0}} | {{#widget:Iframe |url = http://tm.spbstu.ru/htmlets/js2020/Borisenkov/Fractals25_kopia1_03_21.html | width =1500 | height = 1250| border = 0}} | ||
− | ==Код программы== | + | ==Код 1-ой программы программы== |
<div class="mw-collapsible mw-collapsed"> | <div class="mw-collapsible mw-collapsed"> | ||
'''Код программы на языке JavaScript (разработчик Богдан Борисенков):''' <div class="mw-collapsible-content"> | '''Код программы на языке JavaScript (разработчик Богдан Борисенков):''' <div class="mw-collapsible-content"> | ||
Строка 424: | Строка 424: | ||
<br><b> <input type='button' id='downloadimg' value='Сохранить рисунок'> | <br><b> <input type='button' id='downloadimg' value='Сохранить рисунок'> | ||
<input type = 'button' style="width:200px;height:40px" id = 'refresh' value = 'Обновить рисунок'></b></br> | <input type = 'button' style="width:200px;height:40px" id = 'refresh' value = 'Обновить рисунок'></b></br> | ||
+ | </body> | ||
+ | </html> | ||
+ | </syntaxhighlight> | ||
+ | </div> | ||
+ | ==Код 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 = 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 way; | ||
+ | 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 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 SECCANV = []; // массив пикселей маленького канваса | ||
+ | var square; // площадь при конкретных начальных условиях | ||
+ | var SQ = []; // массив площадей нерегулярных областей | ||
+ | var RGB = [] | ||
+ | var numbclr; var nz = z; | ||
+ | |||
+ | 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 () { | ||
+ | zoom = document.getElementById('zoom_check'); | ||
+ | if (!zoom.checked) { | ||
+ | clearcanv(); | ||
+ | square = 0; | ||
+ | SQ = []; | ||
+ | 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; | ||
+ | } | ||
+ | checking(x_min,y_min,x_max,y_max); | ||
+ | } else { | ||
+ | alert("Выключите режим зума"); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | 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(); | ||
+ | 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); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | 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 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); | ||
+ | } | ||
+ | |||
+ | function control(ind) { | ||
+ | numbclr = -1; | ||
+ | SECCANV[ind] = 1; | ||
+ | square += 1; | ||
+ | for (k = 0; k<parseInt(600*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(180*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) { 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 = -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; | ||
+ | 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_12_1.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>(*) Задайте коэффициенты (в графе угла должен стоять "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> | ||
+ |     <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> | ||
+ |     <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='2' value='0' step='1'> | ||
+ | <br> | ||
+ | <b>Способ вычисления новых точек:</b> | ||
+ | <input type = 'radio' name='ways' value = 'old'> <b>1-ый</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> | ||
+ | <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> |