mirror of
https://github.com/direct-img/vibegif.direct-img.link.git
synced 2026-10-29 03:34:51 +00:00
28 lines
1.8 KiB
JavaScript
28 lines
1.8 KiB
JavaScript
// narwhal swimming along: bobs, flicks its tail, and the white spiral on its long tusk keeps twirling toward the tip
|
|
const{sin,cos,PI}=Math,T=2*PI
|
|
export const frames=24,delay=80,rim=3
|
|
export default(c,t)=>{
|
|
const s=sin(T*t),k=sin(T*t-1.4),bl=t>.8&&t<.86
|
|
c.fillStyle=c.strokeStyle='#111';c.lineWidth=6
|
|
c.translate(128,128+7*s);c.rotate(.04*cos(T*t));c.scale(.88,.88);c.translate(-134,-128)
|
|
const shape=(x,y,r,f)=>{c.save();c.translate(x,y);c.rotate(r);c.beginPath();f();c.fill();c.stroke();c.restore()}
|
|
shape(38,127,.3*k,()=>{
|
|
c.moveTo(6,-5);c.quadraticCurveTo(-8,-10,-22,-28);c.quadraticCurveTo(-16,-10,-12,0)
|
|
c.quadraticCurveTo(-16,10,-22,28);c.quadraticCurveTo(-8,10,6,5)})
|
|
shape(0,0,0,()=>{
|
|
c.moveTo(40,122);c.bezierCurveTo(64,116,84,96,124,96);c.bezierCurveTo(164,96,194,110,196,132)
|
|
c.bezierCurveTo(198,154,172,166,132,166);c.bezierCurveTo(92,166,66,142,40,132)})
|
|
shape(142,162,-.6-.35*sin(T*t-2),()=>c.ellipse(-18,0,20,8,0,0,T))
|
|
// tusk, with slanted white marks sliding from base to tip so the spiral looks like it turns
|
|
c.save();c.translate(190,116);c.rotate(-.3)
|
|
const tusk=()=>{c.beginPath();c.moveTo(0,-5);c.lineTo(70,-1.5);c.lineTo(70,1.5);c.lineTo(0,5);c.closePath()}
|
|
c.lineWidth=2;tusk();c.fill();c.stroke();c.clip()
|
|
c.strokeStyle='#fff';for(let i=-1;i<7;i++){const x=6+(i+t)*10,h=5-3.5*x/70;c.beginPath();c.moveTo(x-h*.8,-h);c.lineTo(x+h*.8,h);c.stroke()}
|
|
c.restore()
|
|
c.fillStyle=c.strokeStyle='#fff'
|
|
for(const[x,y,r]of[[86,112,2.2],[102,104,2.6],[120,101,2.2],[138,103,2.6],[110,114,2]])c.beginPath(),c.arc(x,y,r,0,T),c.fill()
|
|
if(bl)c.lineWidth=3.5,c.beginPath(),c.arc(170,122,5.5,.15*PI,.85*PI),c.stroke()
|
|
else c.beginPath(),c.arc(170,124,5.5,0,T),c.fill()
|
|
c.lineWidth=3;c.beginPath();c.moveTo(189,144);c.quadraticCurveTo(182,150,174,148);c.stroke()
|
|
}
|