Forked from: jagarikin's ソードフィッシュ View Diff (11) forked: ソードフィッシュ tjoen Follow 2017-04-28 06:20:23 License: MIT License Fork0 Fav0 View453 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 336 lines HTML 1 lines CSS 10 lines forked: ソードフィッシュ // forked from jagarikin's "ソードフィッシュ" http://jsdo.it/jagarikin/vSfD var canvas,ctx,ptank,ido,plen,maez,gty,rty,gtx,rtx,mtx,mty; canvas = document.getElementsByTagName('canvas')[0]; ctx = canvas.getContext('2d'); canvas.width=canvas.height=400; ctx.fillRect(0,0,400,400); ptank=[]; plen=5000; for(var a=0;a<plen;a++)ptank[a]=Math.random()*Math.random(); count=maez=ido=0; gty=rty=0.25; gtx=rtx=0; soku=35; main(); function main(){ baum(); rus(); requestAnimationFrame(main); } function baum(){ var a,b,c,d,max,count; count=new Date().getTime()/20; ctx.fillStyle="hsl("+(((count/4)|0)%360)+",40%,80%)"; ctx.fillRect(0,0,400,160); ctx.fillStyle="rgb(215,215,215)"; ctx.fillRect(0,160,400,240); max=5; c=count/1200; b=c%(1/max); if(b<=maez){ mtx=rtx; mty=rty; rtx=(Math.random()-0.5)*10; rty=twis(1+b-1/max,c,rtx,1); ido=soku; if(Math.random()<0.2){ rty*=3; if(rty>0.4)rty=0.4; rtx*=rty*10; } } maez=b; for(a=0;a<max;a++)twis(b+a/max,c,gtx,0); if(ido){ a=(soku-ido)/soku; a=0.5-Math.cos(a*Math.PI)/2; d=1-a; gtx=rtx*a+mtx*d; gty=rty*a+mty*d; ido--; } } function twis(nam,xp,tx,ch){ var a,b,c,zp,px,x,y,mt,st,ritu,sco,zoom,zoom2,hp,max,hei,ido,soku; ctx.beginPath(); mt=new Float32Array(401); xp-=nam; if(ch)nam=1; a=1; if(nam<0.05)a=(nam*20); if(nam>0.98)a=(1-nam)*50; ctx.fillStyle="hsla(211,45%,"+((50-nam*30)|0)+"%,"+a+")"; a=1.005-nam; zoom=1/(a*a); hp=zoom*20; hei=150+zoom*22*gty; zp=(Math.log(zoom)/Math.log(2))|0; zoom2=(zoom)/(1<<zp); bai=zoom2; ritu=1; sco=0; max=3+zp; for(b=0;b<max;b++){ st=-(1/bai)*200+(b-zp)*73+xp*100+(tx*zoom/bai); c=ritu; if(!b)c*=(zoom2-1); for(a=0;a<401;a++){ px=a/bai+st; x=Math.floor(px); px=px-x; x=x%plen;if(x<0)x+=plen; mt[a]+=noize1(px,ptank[x%plen],ptank[(x+1)%plen],ptank[(x+2)%plen])*c; } bai*=2; sco+=c; ritu*=1.6; } if(ch)return mt[200]/sco; sco=hp/sco; for(a=0;a<401;a++){ y=hei-mt[a]*sco; if(y>400)y=400; if(a){ ctx.lineTo(a,y); }else{ ctx.moveTo(a,y); } } for(a=400;a>=0;a--){ y=hei+mt[a]*sco/6; if(y>400)y=400; ctx.lineTo(a,y); } ctx.fill(); ctx.fillStyle="rgba(215,215,215,0.1)"; for(a=0;a<6;a++)ctx.fillRect(0,hei-hp/(20+a*3),400,hp/5); } function noize1(r1,p0,p1,p2){ var r2=1-r1, x0=(p0+p1)*0.5,x1=(p1+p2)*0.5; return (x0*r2+p1*r1)*r2+(p1*r2+x1*r1)*r1; } function rus(){ var a,b,c,d,e,f,g,h,i,r,r1,x,y,z,x1,y1,z1,x2,y2,z2,p,p2,xp,xp2,yp,yp2,zp,zp2, st,size,tx,ty,han,len,kk,tim,px,py,pz,nobi,sin,cos; sin=Math.sin; cos=Math.cos; ctx.strokeStyle="rgb(181,92,34)"; tim=new Date().getTime()/40; size=15; kk=7; len=45; a=tim/31; py=cos(a); pz=sin(a); a=tim/47; px=pz*cos(a); pz=pz*sin(a); a=8+sin(tim/7)*2; px*=a;py*=a;pz*=a; p=[]; nobi=sin(tim/143); for(h=-1;h<2;h+=2){ p2=[]; tim+=10000; r1=sin(tim/31)*1.5; a=tim/29; x=cos(a); z=sin(a); a=tim/23; y=cos(a)*z; z=sin(a)*z; x*=5;y*=5;z*=5; xp=tim/37;yp=tim/123; c=sin(tim/71); i=sin(tim/83); e=1+nobi; e=0.5+e*6; for(a=0;a<len;a++){ y2=sin(yp); z2=-cos(yp); x2=-z2*sin(xp); z2=z2*cos(xp); d=0.5; if(a==5)d=0.1; if(a==len-10)d=e; x+=x2*d;y+=y2*d;z+=z2*d; r=r1; for(b=0;b<kk;b++){ g=r; if(a>6 && a<12 && a%2==1){ if(b==2){ g+=Math.sin(tim/15-a/4)-1; } if(b==kk-3){ g-=Math.sin(tim/15-a/4)-1; } } x3=cos(g); z3=sin(g); y1=cos(yp)*z3; z1=-sin(yp)*z3; x1=cos(xp)*x3+sin(xp)*z1; z1=sin(xp)*x3-cos(xp)*z1; han=0.3; if(a<5){ han*=(a+1)/5*1.7; if((b==1 || b==kk-2) && a%2==1)han*=2.2; }else if(a>=len-10){ han*=(len-a-1)/10*1.4; if(b===0){ han*=4; if(nobi<-0.5)han*=-nobi*2; } }else if(a>6 && a<12){ if(b==2 || b==kk-3){ if(a%2==1){ han*=7+(12-a)*4; f=(a-7)*0.2; x1+=x2*f;y1+=y2*f;z1+=z2*f; } } }else if(a>22 && a<28){ if(b==2 || b==kk-3){ if(a%2==1){ han*=3; }else{ han*=2; } } } p2.push([x+x1*han,y+y1*han,z+z1*han]); r+=Math.PI*2/kk; } d=1; if(a>=len-10)d=1/e; xp+=(sin(a/20*c+sin(tim/23)*2)/7+sin(-a/11*i+sin(tim/11)*2)/10)*d; yp+=(sin(a/20*c+sin(tim/29)*2)/7+sin(-a/11*i+sin(tim/17)*2)/10)*d; } for(a=0;a<p2.length;a++){ p2[a][0]-=x/7; p2[a][1]-=y/7; p2[a][2]-=z/7; } a=tim/59+Math.sin(tim/47)/80; yp=Math.cos(a); yp2=Math.sin(a); a=tim/43+Math.sin(tim/67)/80; xp=Math.cos(a); xp2=Math.sin(a); a=tim/57+Math.sin(tim/53)/80; zp=Math.cos(a); zp2=Math.sin(a); for(a=0;a<p2.length;a++){ x=p2[a][0]+px*h;y=p2[a][1]+py*h;z=p2[a][2]+pz*h; c=y*zp+x*zp2; y=y*zp2-x*zp; x=c; y1=y*yp+z*yp2; z1=y*yp2-z*yp; x1=x*xp+z1*xp2; z=x*xp2-z1*xp; z1=(Math.pow(1.07,z)); x=x1*z1; y=y1*z1; p.push([x,y,z]); } e=0; if(h==1)e=len; for(a=e;a<e+len-1;a++){ for(b=0;b<kk;b++){ c=(b+1)%kk; d=(b+2)%kk; f=(h+1)*50+b*15+a*2; pp([a*kk+c,a*kk+b,a*kk+kk+b],1,f,a-e); pp([a*kk+d,a*kk+c+kk,a*kk+d+kk],0,f+20,a-e); } } e*=kk; c=[]; for(a=0;a<kk;a++)c[a]=e+a; pp(c,1,(h+1)*50+len*2,0); } function pp(q,sen,col,lit){ var a,b,c,d,e,f,g,h,ob; a=p[q[0]];b=p[q[1]];c=p[q[2]]; d=[b[0]-a[0],b[1]-a[1],b[2]-a[2]]; e=[c[0]-b[0],c[1]-b[1],c[2]-b[2]]; h=d[0]*e[1]-d[1]*e[0]; if(h<0)return; f=d[1]*e[2]-d[2]*e[1]; g=d[2]*e[0]-d[0]*e[2]; ob={q:q,sen:sen}; a=f-g*0.7+h*0.4; a=a/(Math.abs(f)+Math.abs(h)+Math.abs(g)+0.000001); a=a*70+25; if(a<0)a=0; if(lit>=len-11 && nobi>0.3)a+=(nobi-0.3)*150; ob.c="hsl("+(col+100)+",90%,"+a+"%)"; a=p[q[0]][2]; for(b=1;b<q.length;b++)if(p[q[b]][2]<a)a=p[q[b]][2]; ob.m=a; if(!st){ st=ob; return; } b=st; for(;;){ if(b.m>a){ if(!b.mae){ st=ob; }else{ b.mae.tugi=ob; } ob.mae=b.mae; b.mae=ob; ob.tugi=b; break; } if(!b.tugi){ b.tugi=ob; ob.mae=b; break; } b=b.tugi; } } d=st; for(;;){ e=d.q; ctx.beginPath(); ctx.moveTo(200+p[e[0]][0]*size,200+p[e[0]][1]*size); for(a=1;a<e.length;a++)ctx.lineTo(200+p[e[a]][0]*size,200+p[e[a]][1]*size); ctx.closePath(); ctx.fillStyle=d.c; ctx.strokeStyle=d.c; ctx.fill(); if(d.sen)ctx.stroke(); if(!d.tugi)break; d=d.tugi; } } <canvas></canvas> forked: ソードフィッシュ * { margin: 0; padding: 0; border: 0; } body { background: #fdf; font: 30px sans-serif; } // forked from jagarikin's "ソードフィッシュ" http://jsdo.it/jagarikin/vSfD var canvas,ctx,ptank,ido,plen,maez,gty,rty,gtx,rtx,mtx,mty; canvas = document.getElementsByTagName('canvas')[0]; ctx = canvas.getContext('2d'); canvas.width=canvas.height=400; ctx.fillRect(0,0,400,400); ptank=[]; plen=5000; for(var a=0;a<plen;a++)ptank[a]=Math.random()*Math.random(); count=maez=ido=0; gty=rty=0.25; gtx=rtx=0; soku=35; main(); function main(){ baum(); rus(); requestAnimationFrame(main); } function baum(){ var a,b,c,d,max,count; count=new Date().getTime()/20; ctx.fillStyle="hsl("+(((count/4)|0)%360)+",40%,80%)"; ctx.fillRect(0,0,400,160); ctx.fillStyle="rgb(215,215,215)"; ctx.fillRect(0,160,400,240); max=5; c=count/1200; b=c%(1/max); if(b<=maez){ mtx=rtx; mty=rty; rtx=(Math.random()-0.5)*10; rty=twis(1+b-1/max,c,rtx,1); ido=soku; if(Math.random()<0.2){ rty*=3; if(rty>0.4)rty=0.4; rtx*=rty*10; } } maez=b; for(a=0;a<max;a++)twis(b+a/max,c,gtx,0); if(ido){ a=(soku-ido)/soku; a=0.5-Math.cos(a*Math.PI)/2; d=1-a; gtx=rtx*a+mtx*d; gty=rty*a+mty*d; ido--; } } function twis(nam,xp,tx,ch){ var a,b,c,zp,px,x,y,mt,st,ritu,sco,zoom,zoom2,hp,max,hei,ido,soku; ctx.beginPath(); mt=new Float32Array(401); xp-=nam; if(ch)nam=1; a=1; if(nam<0.05)a=(nam*20); if(nam>0.98)a=(1-nam)*50; ctx.fillStyle="hsla(211,45%,"+((50-nam*30)|0)+"%,"+a+")"; a=1.005-nam; zoom=1/(a*a); hp=zoom*20; hei=150+zoom*22*gty; zp=(Math.log(zoom)/Math.log(2))|0; zoom2=(zoom)/(1<<zp); bai=zoom2; ritu=1; sco=0; max=3+zp; for(b=0;b<max;b++){ st=-(1/bai)*200+(b-zp)*73+xp*100+(tx*zoom/bai); c=ritu; if(!b)c*=(zoom2-1); for(a=0;a<401;a++){ px=a/bai+st; x=Math.floor(px); px=px-x; x=x%plen;if(x<0)x+=plen; mt[a]+=noize1(px,ptank[x%plen],ptank[(x+1)%plen],ptank[(x+2)%plen])*c; } bai*=2; sco+=c; ritu*=1.6; } if(ch)return mt[200]/sco; sco=hp/sco; for(a=0;a<401;a++){ y=hei-mt[a]*sco; if(y>400)y=400; if(a){ ctx.lineTo(a,y); }else{ ctx.moveTo(a,y); } } for(a=400;a>=0;a--){ y=hei+mt[a]*sco/6; if(y>400)y=400; ctx.lineTo(a,y); } ctx.fill(); ctx.fillStyle="rgba(215,215,215,0.1)"; for(a=0;a<6;a++)ctx.fillRect(0,hei-hp/(20+a*3),400,hp/5); } function noize1(r1,p0,p1,p2){ var r2=1-r1, x0=(p0+p1)*0.5,x1=(p1+p2)*0.5; return (x0*r2+p1*r1)*r2+(p1*r2+x1*r1)*r1; } function rus(){ var a,b,c,d,e,f,g,h,i,r,r1,x,y,z,x1,y1,z1,x2,y2,z2,p,p2,xp,xp2,yp,yp2,zp,zp2, st,size,tx,ty,han,len,kk,tim,px,py,pz,nobi,sin,cos; sin=Math.sin; cos=Math.cos; ctx.strokeStyle="rgb(181,92,34)"; tim=new Date().getTime()/40; size=15; kk=7; len=45; a=tim/31; py=cos(a); pz=sin(a); a=tim/47; px=pz*cos(a); pz=pz*sin(a); a=8+sin(tim/7)*2; px*=a;py*=a;pz*=a; p=[]; nobi=sin(tim/143); for(h=-1;h<2;h+=2){ p2=[]; tim+=10000; r1=sin(tim/31)*1.5; a=tim/29; x=cos(a); z=sin(a); a=tim/23; y=cos(a)*z; z=sin(a)*z; x*=5;y*=5;z*=5; xp=tim/37;yp=tim/123; c=sin(tim/71); i=sin(tim/83); e=1+nobi; e=0.5+e*6; for(a=0;a<len;a++){ y2=sin(yp); z2=-cos(yp); x2=-z2*sin(xp); z2=z2*cos(xp); d=0.5; if(a==5)d=0.1; if(a==len-10)d=e; x+=x2*d;y+=y2*d;z+=z2*d; r=r1; for(b=0;b<kk;b++){ g=r; if(a>6 && a<12 && a%2==1){ if(b==2){ g+=Math.sin(tim/15-a/4)-1; } if(b==kk-3){ g-=Math.sin(tim/15-a/4)-1; } } x3=cos(g); z3=sin(g); y1=cos(yp)*z3; z1=-sin(yp)*z3; x1=cos(xp)*x3+sin(xp)*z1; z1=sin(xp)*x3-cos(xp)*z1; han=0.3; if(a<5){ han*=(a+1)/5*1.7; if((b==1 || b==kk-2) && a%2==1)han*=2.2; }else if(a>=len-10){ han*=(len-a-1)/10*1.4; if(b===0){ han*=4; if(nobi<-0.5)han*=-nobi*2; } }else if(a>6 && a<12){ if(b==2 || b==kk-3){ if(a%2==1){ han*=7+(12-a)*4; f=(a-7)*0.2; x1+=x2*f;y1+=y2*f;z1+=z2*f; } } }else if(a>22 && a<28){ if(b==2 || b==kk-3){ if(a%2==1){ han*=3; }else{ han*=2; } } } p2.push([x+x1*han,y+y1*han,z+z1*han]); r+=Math.PI*2/kk; } d=1; if(a>=len-10)d=1/e; xp+=(sin(a/20*c+sin(tim/23)*2)/7+sin(-a/11*i+sin(tim/11)*2)/10)*d; yp+=(sin(a/20*c+sin(tim/29)*2)/7+sin(-a/11*i+sin(tim/17)*2)/10)*d; } for(a=0;a<p2.length;a++){ p2[a][0]-=x/7; p2[a][1]-=y/7; p2[a][2]-=z/7; } a=tim/59+Math.sin(tim/47)/80; yp=Math.cos(a); yp2=Math.sin(a); a=tim/43+Math.sin(tim/67)/80; xp=Math.cos(a); xp2=Math.sin(a); a=tim/57+Math.sin(tim/53)/80; zp=Math.cos(a); zp2=Math.sin(a); for(a=0;a<p2.length;a++){ x=p2[a][0]+px*h;y=p2[a][1]+py*h;z=p2[a][2]+pz*h; c=y*zp+x*zp2; y=y*zp2-x*zp; x=c; y1=y*yp+z*yp2; z1=y*yp2-z*yp; x1=x*xp+z1*xp2; z=x*xp2-z1*xp; z1=(Math.pow(1.07,z)); x=x1*z1; y=y1*z1; p.push([x,y,z]); } e=0; if(h==1)e=len; for(a=e;a<e+len-1;a++){ for(b=0;b<kk;b++){ c=(b+1)%kk; d=(b+2)%kk; f=(h+1)*50+b*15+a*2; pp([a*kk+c,a*kk+b,a*kk+kk+b],1,f,a-e); pp([a*kk+d,a*kk+c+kk,a*kk+d+kk],0,f+20,a-e); } } e*=kk; c=[]; for(a=0;a<kk;a++)c[a]=e+a; pp(c,1,(h+1)*50+len*2,0); } function pp(q,sen,col,lit){ var a,b,c,d,e,f,g,h,ob; a=p[q[0]];b=p[q[1]];c=p[q[2]]; d=[b[0]-a[0],b[1]-a[1],b[2]-a[2]]; e=[c[0]-b[0],c[1]-b[1],c[2]-b[2]]; h=d[0]*e[1]-d[1]*e[0]; if(h<0)return; f=d[1]*e[2]-d[2]*e[1]; g=d[2]*e[0]-d[0]*e[2]; ob={q:q,sen:sen}; a=f-g*0.7+h*0.4; a=a/(Math.abs(f)+Math.abs(h)+Math.abs(g)+0.000001); a=a*70+25; if(a<0)a=0; if(lit>=len-11 && nobi>0.3)a+=(nobi-0.3)*150; ob.c="hsl("+(col+100)+",90%,"+a+"%)"; a=p[q[0]][2]; for(b=1;b<q.length;b++)if(p[q[b]][2]<a)a=p[q[b]][2]; ob.m=a; if(!st){ st=ob; return; } b=st; for(;;){ if(b.m>a){ if(!b.mae){ st=ob; }else{ b.mae.tugi=ob; } ob.mae=b.mae; b.mae=ob; ob.tugi=b; break; } if(!b.tugi){ b.tugi=ob; ob.mae=b; break; } b=b.tugi; } } d=st; for(;;){ e=d.q; ctx.beginPath(); ctx.moveTo(200+p[e[0]][0]*size,200+p[e[0]][1]*size); for(a=1;a<e.length;a++)ctx.lineTo(200+p[e[a]][0]*size,200+p[e[a]][1]*size); ctx.closePath(); ctx.fillStyle=d.c; ctx.strokeStyle=d.c; ctx.fill(); if(d.sen)ctx.stroke(); if(!d.tugi)break; d=d.tugi; } } <canvas></canvas> * { margin: 0; padding: 0; border: 0; } body { background: #fdf; font: 30px sans-serif; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author tjoen Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/WUPw/js"></script> application art&design html5_elements&api user_interface Discussion Questions on this code? Tags application art&design html5_elements&api user_interface