Files
vibegif.direct-img.link/gen/mini/quail/bob.js
T

28 lines
1.8 KiB
JavaScript

// quail bobbing along: its black topknot nods and springs with every head bob, its little legs step and it blinks
const{sin,cos,PI,max}=Math,T=2*PI
export const frames=24,delay=80,rim=3,rimColor='#111'
export default(c,t)=>{
const b=sin(T*t*2),pl=sin(T*t*2-1.3),bl=t>.7&&t<.76,hx=164+6*b,hy=98+5*b
c.fillStyle=c.strokeStyle='#fff';c.translate(6,0)
const shape=f=>{c.beginPath();f();c.fill();c.stroke()}
c.lineWidth=6
for(const k of[0,1]){const x=118+k*14+10*sin(T*t*2+k*PI),y=214-5*max(0,cos(T*t*2+k*PI))
c.beginPath();c.moveTo(118+k*14,186);c.lineTo(x,y);c.moveTo(x-10,y+2);c.lineTo(x+10,y+2);c.stroke()}
c.translate(0,2*b)
shape(()=>{c.moveTo(56,128);c.bezierCurveTo(70,96,150,94,170,124);c.bezierCurveTo(186,170,140,198,108,194);c.bezierCurveTo(72,190,52,160,56,128)})
shape(()=>{c.moveTo(60,124);c.lineTo(34,112);c.lineTo(44,140)})
c.lineWidth=26;c.beginPath();c.moveTo(150,124);c.lineTo(hx-2,hy+6);c.stroke();c.lineWidth=6
shape(()=>c.arc(hx,hy,22,0,T))
c.fillStyle=c.strokeStyle='#111'
c.save();c.translate(hx+4,hy-18);c.rotate(.3*pl)
// white ring so the black plume still shows on a black page
c.beginPath();c.moveTo(-3,0);c.bezierCurveTo(-8,-26,8,-40,24,-34);c.bezierCurveTo(34,-30,30,-16,20,-18);c.bezierCurveTo(12,-20,6,-12,3,0)
c.lineWidth=8;c.strokeStyle='#fff';c.stroke();c.fill();c.restore();c.strokeStyle='#111'
c.beginPath();c.moveTo(hx+18,hy-4);c.quadraticCurveTo(hx+32,hy,hx+19,hy+8);c.fill()
if(bl)c.lineWidth=3.5,c.beginPath(),c.arc(hx+5,hy-6,5,.15*PI,.85*PI),c.stroke()
else c.beginPath(),c.arc(hx+5,hy-4,5,0,T),c.fill()
c.lineWidth=3.5;c.beginPath();c.moveTo(hx+12,hy+10);c.quadraticCurveTo(hx+2,hy+22,hx-14,hy+18);c.stroke()
c.beginPath();c.moveTo(150,134);c.quadraticCurveTo(128,170,72,146);c.stroke()
for(const[x,y]of[[118,176],[134,166],[100,170]])c.beginPath(),c.arc(x,y,6,PI*.15,PI*.85),c.stroke()
}