| Текущая версия |
Ваш текст |
| Строка 1: |
Строка 1: |
| | ==Авторы== | | ==Авторы== |
| − | [[Смирнова Ирина|Смирнова Ирина]] | + | [[I.m.smirnova01|Смирнова Ирина]] |
| − | <br />
| |
| − | [[Нежинская Лилия|Нежинская Лилия]]
| |
| | <br /> | | <br /> |
| | + | Нежинская Лилия |
| | | | |
| | ==Описание== | | ==Описание== |
| Строка 11: |
Строка 10: |
| | ==Визуализация== | | ==Визуализация== |
| | {{ #widget:Iframe | url=http://tm.spbstu.ru/htmlets/js2020/Smirnova/koch2_smooth.html | width=800 | height=800 | border=0 }} | | {{ #widget:Iframe | url=http://tm.spbstu.ru/htmlets/js2020/Smirnova/koch2_smooth.html | width=800 | height=800 | border=0 }} |
| − |
| |
| − | ==Код программы==
| |
| − | <div class="mw-collapsible mw-collapsed">
| |
| − | '''Код программы на языке JavaScript:''' <div class="mw-collapsible-content">
| |
| − | <syntaxhighlight lang="javascript" line start="1" enclose="div">
| |
| − |
| |
| − | <html>
| |
| − |
| |
| − | <head>
| |
| − | <style>
| |
| − | canvas {border: 4px black solid}
| |
| − | </style>
| |
| − | <title> Snowflake Koch</title>
| |
| − | </head>
| |
| − |
| |
| − | <body>
| |
| − | <h1> Snowflake Koch</h1>
| |
| − | <canvas id='canvas' ></canvas>
| |
| − |
| |
| − |
| |
| − | <script>
| |
| − | var CanvasBody = document.getElementById("canvas"),
| |
| − | canvas = CanvasBody.getContext("2d"),
| |
| − | width = CanvasBody.width = window.innerWidth - 20,
| |
| − | height = CanvasBody.height = window.innerHeight - 100,
| |
| − | timedist = 100;
| |
| − | canvas.translate(.5 * width, .5 * height);
| |
| − | if (width < height){
| |
| − |
| |
| − | height = width;
| |
| − | }
| |
| − | let crdx = [];
| |
| − | let crdy = [];
| |
| − | var scl = 1;
| |
| − | var r;
| |
| − |
| |
| − | function coordtriang()
| |
| − | {
| |
| − | var a = height/2,
| |
| − | h = a*Math.sin(Math.PI/3),
| |
| − | x1 = 0,
| |
| − | y1 = -(2*h/3),
| |
| − | x2 = Math.trunc(a/2),
| |
| − | y2 = (h/3),
| |
| − | dx = Math.abs(x1 - x2),
| |
| − | dy = Math.abs(y1 - y2),
| |
| − | dist = Math.sqrt(dx * dx + dy * dy),
| |
| − | angle = Math.atan2(dy, dx);
| |
| − | x3 = x1 + Math.cos(angle + Math.PI / 3) * dist,
| |
| − | y3 = y1 + Math.sin(angle + Math.PI / 3) * dist;
| |
| − | return [x1,y1,x2,y2,x3,y3];
| |
| − | }
| |
| − |
| |
| − | function crdcalc(x1,y1,x2,y2,r)
| |
| − | {
| |
| − | crdx[r] = x1;
| |
| − | crdy[r] = y1;
| |
| − | crdx[r+1] = (2*x1+x2)/3;
| |
| − | crdy[r+1] = (2*y1+y2)/3;
| |
| − | crdx[r+2] = (x1+x2)/2 - (y1-y2)/(2*Math.sqrt(3));
| |
| − | crdy[r+2] = (y1+y2)/2 - (x2-x1)/(2*Math.sqrt(3));
| |
| − | crdx[r+3] = (2*x2+x1)/3;
| |
| − | crdy[r+3] = (2*y2+y1)/3;
| |
| − | crdx[r+4] = x2;
| |
| − | crdy[r+4] = y2;
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | function koch(n)
| |
| − | {
| |
| − |
| |
| − |
| |
| − | crdcalc(coordtriang()[0],coordtriang()[1],coordtriang()[2],coordtriang()[3],0);
| |
| − | crdcalc(coordtriang()[2],coordtriang()[3],coordtriang()[4],coordtriang()[5],4);
| |
| − | crdcalc(coordtriang()[4],coordtriang()[5],coordtriang()[0],coordtriang()[1],8);
| |
| − |
| |
| − | let crdx_t = new Array();
| |
| − | let crdy_t = new Array();
| |
| − |
| |
| − |
| |
| − | for(var j=0; j<n; j++)
| |
| − | {
| |
| − | crdx_t = [];
| |
| − | crdy_t = [];
| |
| − | r = 3*Math.pow(4,j+1);
| |
| − | for(var i=0; i<=r; i++)
| |
| − | {
| |
| − | crdx_t[i] = crdx[i];
| |
| − | crdy_t[i] = crdy[i];
| |
| − | }
| |
| − | for(var i=0; i<r; i++)
| |
| − | {
| |
| − | crdcalc(crdx_t[i],crdy_t[i],crdx_t[i+1],crdy_t[i+1],4*i);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | function sm(x1,y1,x2,y2,k,smooth)
| |
| − | {
| |
| − | var xxs = (x1+x2)/2,
| |
| − | yys = (y1+y2)/2,
| |
| − | dx = x2 - x1,
| |
| − | dy = y2 - y1,
| |
| − | dist = Math.sqrt(dx * dx + dy * dy),
| |
| − | angle = Math.atan2(dy, dx);
| |
| − | x3 = x1 + Math.cos(angle + Math.PI / 3) * dist,
| |
| − | y3 = y1 + Math.sin(angle + Math.PI / 3) * dist;
| |
| − |
| |
| − | if (k < smooth)
| |
| − | {
| |
| − | var xm = (xxs-x3)*k/3/smooth+xxs,
| |
| − | ym = (yys-y3)*k/3/smooth+yys;
| |
| − | return [xm,ym];
| |
| − | }
| |
| − | else
| |
| − | {
| |
| − | return [Math.abs((4*xxs-x3)/3),Math.abs((4*yys-y3)/3)];
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | function centr(x1,y1,x2,y2)
| |
| − | {
| |
| − | var xxs = (x1+x2)/2,
| |
| − | yys = (y1+y2)/2,
| |
| − | dx = x2 - x1,
| |
| − | dy = y2 - y1,
| |
| − | dist = Math.sqrt(dx * dx + dy * dy),
| |
| − | angle = Math.atan2(dy, dx);
| |
| − | x3 = x1 + Math.cos(angle + Math.PI / 3) * dist,
| |
| − | y3 = y1 + Math.sin(angle + Math.PI / 3) * dist;
| |
| − | return[x3, y3];
| |
| − | }
| |
| − |
| |
| − |
| |
| − | function drw2(n, k, smooth)
| |
| − | {
| |
| − |
| |
| − |
| |
| − | koch(n)
| |
| − |
| |
| − |
| |
| − | //var i = 10;
| |
| − |
| |
| − | for(var i = 2; i<crdx.length-2; i=i+4)
| |
| − | {
| |
| − | crdx[i] =sm(crdx[i-2],crdy[i-2],crdx[i+2],crdy[i+2],k,smooth)[0];
| |
| − | crdy[i] =sm(crdx[i-2],crdy[i-2],crdx[i+2],crdy[i+2],k,smooth)[1];
| |
| − |
| |
| − | }
| |
| − |
| |
| − | canvas.clearRect(-width/2,-height/2,width,height);
| |
| − | canvas.beginPath();
| |
| − | canvas.strokeStyle = "black";
| |
| − | canvas.lineWidth = 1;
| |
| − |
| |
| − | if(n==-1)
| |
| − | {
| |
| − | canvas.moveTo(crdx[0],crdy[0]);
| |
| − | canvas.lineTo(crdx[4],crdy[4]);
| |
| − | canvas.lineTo(crdx[8],crdy[8]);
| |
| − | canvas.lineTo(crdx[0],crdy[0]);
| |
| − | }
| |
| − | else{
| |
| − | canvas.moveTo(crdx[0],crdy[0]);
| |
| − | for(var i=0; i<crdx.length;i++)
| |
| − | {
| |
| − | canvas.lineTo(crdx[i+1],crdy[i+1]);
| |
| − | }}
| |
| − | canvas.stroke();
| |
| − | canvas.closePath();
| |
| − |
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | var t = -1,
| |
| − | k_t = 0,
| |
| − | smooth = 10,
| |
| − | order = 3;
| |
| − | //console.log(crdx);
| |
| − |
| |
| − | function loop() {
| |
| − | if(t <= order){
| |
| − | drw2(t, k_t, smooth);
| |
| − | //canvas.clearRect(-width/2,-height/2,width/2,height/2);
| |
| − | k_t++;
| |
| − | console.log(k_t)
| |
| − | if(k_t == smooth)
| |
| − | {
| |
| − | k_t = 0;
| |
| − | t++;
| |
| − | //
| |
| − | }
| |
| − | if (t==order+1) {
| |
| − | setTimeout(()=>{document.location.reload()}, 2000)
| |
| − | }
| |
| − | }
| |
| − | //else{
| |
| − | //canvas.font = "48px Verdana";
| |
| − | //var text = "Koch Snowflake"
| |
| − | //canvas.fillStyle = "orange";
| |
| − | //canvas.fillText(text, -canvas.measureText(text).width/2, Math.trunc(height / 3));
| |
| − | //}
| |
| − | }
| |
| − |
| |
| − | setInterval(loop,timedist);
| |
| − |
| |
| − |
| |
| − | </script>
| |
| − | </body>
| |
| − | </html>
| |
| − |
| |
| − |
| |
| − | document.onkeydown=keyControl;
| |
| − |
| |
| − | </syntaxhighlight>
| |
| − | </div>
| |
