Язык программирования:
Javascript
Среда программирования:
HTML5 + JavaScript
<head> <meta name="mobile-web-app-capable" content="yes"> </head> <body style="background: #000"> <canvas id="myCanvas" style="background: #000"></canvas> <script> canvas = document.getElementById("myCanvas") ctx = canvas.getContext("2d") w = canvas.width = window.innerWidth h = canvas.height = window.innerHeight ctx.lineWidth = 2 ctx.fillStyle = '#fff' ctx.font = '40px Arial' n=1 //начальное количество точек на 360 градусов (на каждый оборот) scale=1 //для зум-эффекта l=Math.PI*2/n // угол/шаг k=0.0005 //коэфициент увеличения точности аппроксимации s=0.0001 //скорость зума bits=1 function draw(){ ctx.clearRect(0, 0, w, h) ctx.beginPath() ctx.moveTo(w/2,h/2) for(var t=l;t<=200;t+=l) { /*** создаем эффект глубины при помощи градиента яркости ***/ var x = Math.round(Math.pow(((t+t-l)/2)/200,2)*230+25) u=((n*100)%10)*0.2 if(u>1)u=2-u /**меням цвет с помощью битовых масок**/ if(bits/4>=1) r=Math.round(x*u) else r=x if((bits%4)/2>=1) g=Math.round(x*u) else g=x if(bits%2>=1) b=Math.round(x*u) else b=x ctx.strokeStyle = 'rgb('+r+','+g+','+b+')' /*****************************************/ /*** непосредственно прорисовываем спираль в декартовых координатах (соединяем точки)***/ if(t+l>200){// если точка последняя - прорисовываем линию постепенно во избежание дерганий prev={ x:scale*(t-l)*Math.cos(t-l)+w/2, y:scale*(t-l)*Math.sin(t-l)+h/2} cur={ x:scale*t*Math.cos(t)+w/2, y:scale*t*Math.sin(t)+h/2} c=200/l-Math.floor(200/l) ctx.lineTo(prev.x+(cur.x-prev.x)*c, prev.y+(cur.y-prev.y)*c) ctx.stroke(); ctx.closePath() } else{ ctx.lineTo(scale*t*Math.cos(t)+w/2, scale*t*Math.sin(t)+h/2) ctx.stroke(); ctx.closePath(); ctx.beginPath() ctx.moveTo(scale*t*Math.cos(t)+w/2, scale*t*Math.sin(t)+h/2) } } n+=k //увеличиваем количество точек на на каждый оборот // эффект вращения образуется именно из-за этого. при больших n (к примеру 20) спираль принимает знакомый, более менее округлый вид if(((n*100)%10)>=5 && (((n-k)*100)%10)<=5)bits++ //следующая битова маска цвета if(bits==7)bits=1 scale+=100*s*scale //зум if(scale>3||scale<1) s=-s //обращаем направление зума l=Math.PI*2/n ctx.fillText((n).toFixed(3)+"",20,50) requestAnimationFrame(draw)//переходим к следующему фрейму } draw()//начинаем цикл </script>
| Прикрепленный файл | Размер |
|---|---|
| melnichuk_inSpiral.rar | 1.09 кб |