Текущая версия |
Ваш текст |
Строка 1: |
Строка 1: |
− | ==Авторы==
| |
− | [[Смирнова Ирина|Смирнова Ирина]]
| |
− | <br />
| |
− | [[Нежинская Лилия|Нежинская Лилия]]
| |
− | <br />
| |
− |
| |
− | ==Описание==
| |
− | Снежинка Коха - фрактал, который получается из трех копий кривой Коха. Интересно то, что данная кривая имеет бесконечную длину, непрерывна, но нигде не дифференцируема.
| |
− |
| |
− |
| |
− | ==Визуализация==
| |
| {{ #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>
| |