You know what really Grinds My Gears?
A Pen by Carlo Moscatiello on CodePen.
Created
June 28, 2017 10:42
-
-
Save cm85/2b75cae4adc2a3a056e0f7697f187b16 to your computer and use it in GitHub Desktop.
Grinds My Gears
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <canvas></canvas> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var canvas,ctx,tim; | |
| canvas = document.getElementsByTagName('canvas')[0]; | |
| ctx = canvas.getContext('2d'); | |
| canvas.width=canvas.height=400; | |
| aaa(); | |
| function aaa(){ | |
| var a,b,c; | |
| ctx.fillStyle="rgb(0,0,0)"; | |
| ctx.fillRect(0,0,canvas.width,canvas.height); | |
| tim=new Date().getTime()/30; | |
| rol(200,200,tim/13,8,0); | |
| requestAnimationFrame(aaa); | |
| } | |
| function rol(tx,ty,r,max,kai){ | |
| var a,b,c,d,e,x,y,hei,han,ste,p; | |
| if(kai>11)return; | |
| a=(kai*1117)%360; | |
| ctx.fillStyle="hsl("+a+",60%,50%)"; | |
| hei=10; | |
| han=50/8*max; | |
| p=[]; | |
| ste=Math.PI*2/max; | |
| for(a=0;a<max;a++){ | |
| b=r-ste*0.31; | |
| x=Math.cos(b); | |
| y=Math.sin(b); | |
| p.push([x*(han-hei),y*(han-hei)]); | |
| b=r-ste*0.24; | |
| x=Math.cos(b); | |
| y=Math.sin(b); | |
| p.push([x*(han),y*(han)]); | |
| b=r-ste*0.13; | |
| x=Math.cos(b); | |
| y=Math.sin(b); | |
| p.push([x*(han+hei),y*(han+hei)]); | |
| b=r+ste*0.13; | |
| x=Math.cos(b); | |
| y=Math.sin(b); | |
| p.push([x*(han+hei),y*(han+hei)]); | |
| b=r+ste*0.24; | |
| x=Math.cos(b); | |
| y=Math.sin(b); | |
| p.push([x*(han),y*(han)]); | |
| b=r+ste*0.31; | |
| x=Math.cos(b); | |
| y=Math.sin(b); | |
| p.push([x*(han-hei),y*(han-hei)]); | |
| r+=ste; | |
| } | |
| ctx.beginPath(); | |
| for(a=0;a<p.length;a++)ctx.lineTo(tx+p[a][0],ty+p[a][1]); | |
| ctx.closePath(); | |
| ctx.stroke(); | |
| ctx.arc(tx,ty,(han-hei)*0.7,0,Math.PI*2,1); | |
| ctx.fill(); | |
| a=-tim/(33+((kai*117)%40))+Math.sin(tim/31+kai*97)/3; | |
| b=(max+kai*13)%29; | |
| if(b<7)b=7; | |
| c=han*(b/max); | |
| x=Math.cos(a)*(han+c); | |
| y=Math.sin(a)*(han+c); | |
| d=1+1/(b/max); | |
| e=2; | |
| if(b%2==1)e=1; | |
| rol(tx+x,ty+y,-r*max/b+a*d+ste*max/b/e,b,kai+1); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| background: #000000 | |
| } | |
| canvas { | |
| position: relative; top:50%; | |
| left:50%; | |
| margin-left:-50vmin; | |
| width:100vmin; | |
| height:100vmin; | |
| overflow:hidden; | |
| display: block; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment