Язык программирования:
Javascript
Среда программирования:
Любая
<html> <head> <meta charset="utf-8"> <title>Spiral</title> </head> <body> <div align = "center"> <canvas id="graph" width = "600px" height = "600px"></canvas> </div> <script> var canvas = document.getElementById('graph'); var ctx = canvas.getContext('2d'); var m = 4*Math.PI; // промежуток для t [0; m] var step = 0.025; // шаг рисования var D = 0; // велечина угла вращения в градусах var angle = (Math.PI/180)*D; // угол вращения var size = 17; // размер, масштабирование var dr = -0.25; // скокость вращения var last, now; var dt; function play(){ now = Date.now(); dt = now - last; update(); render(); window.requestAnimationFrame(play); last = now; } function update(){//обновление угла вращения angle = (Math.PI/180)*D; D += dr*dt; } function render(){ ctx.fillStyle = 'black'; ctx.fillRect(0,0, canvas.width, canvas.height); ctx.lineWidth = 2; ctx.strokeStyle = 'AntiqueWhite'; ctx.strokeStyle = `rgba(250, 235, 215, 0.1)`; var a = 0.1; // яркость var x, y; var x0, y0; //вычисление и отрисовка касательных for(t = 0; t < m; t += Math.PI/20) { x0 = t*Math.sin(t)*size; y0 = t*Math.cos(t)*size; //уравнение касательной к спирали в точке спирали (x0, y0); // f'_t = y'_t/x'_t = (t cost)'/(t sint)' // f'_t = (cost - t sint)/(sint + t cost) // y - y0 = f'_t(x - x0) // y = f'_t(x - x0) + y0 var f = (Math.cos(t) - t*Math.sin(t))/(Math.sin(t) + t*Math.cos(t)); x1 = -canvas.width; x2 = canvas.width; y1 = f*(x1 - x0) + y0; y2 = f*(x2 - x0) + y0; var xt = x1; var yt = y1; x1 = xt*Math.cos(angle) - yt*Math.sin(angle); y1 = xt*Math.sin(angle) + yt*Math.cos(angle); xt = x2; yt = y2; x2 = xt*Math.cos(angle) - yt*Math.sin(angle); y2 = xt*Math.sin(angle) + yt*Math.cos(angle); ctx.strokeStyle = `rgba(250, 235, 215, ${a})`; a += 1/(m/(Math.PI/25)); ctx.beginPath(); ctx.moveTo(canvas.width/2 + x1, canvas.height/2 - y1); ctx.lineTo(canvas.width/2 + x2, canvas.height/2 - y2); ctx.stroke(); } a = 0.1; ctx.beginPath(); //отрисовка спирали for(t = 0; t < m; t += step) { x = t*Math.sin(t)*size; y = t*Math.cos(t)*size; var xt = x; var yt = y; x = xt*Math.cos(angle) - yt*Math.sin(angle); y = xt*Math.sin(angle) + yt*Math.cos(angle); ctx.strokeStyle = `rgba(250, 235, 215, ${a})`; a += 0.0005; ctx.lineTo(canvas.width/2 + x, canvas.height/2 - y); } ctx.stroke(); drawArc(); //круглая рамка } var last = Date.now(); play(); function drawArc(){ ctx.fillStyle = 'red'; ctx.strokeStyle = 'black'; ctx.beginPath(); ctx.arc(canvas.width/2, canvas.height/2, 400, 0, 2*Math.PI); ctx.lineWidth = 200; ctx.stroke(); } </script> </body> </html>
| Прикрепленный файл | Размер |
|---|---|
| Dobrovan_beamspiral.zip | 1.34 кб |