diff --git a/gen/color/avocado/split.js b/gen/color/avocado/split.js new file mode 100644 index 0000000..b35e038 --- /dev/null +++ b/gen/color/avocado/split.js @@ -0,0 +1,25 @@ +// avocado halves rocking apart and back together while the pit hops out of its half and lands again +const{sin,cos,PI,max}=Math,T=2*PI +export const frames=20,delay=70 +const SK='#2f9e44',FL='#c0eb75',IN='#e9fac8',PIT='#a9744f',BL='#ffa8a8' +const half=(c,x,a)=>{ + c.save();c.translate(x,140);c.rotate(a) + const shape=(s)=>{c.beginPath();c.moveTo(0,-86*s);c.bezierCurveTo(30*s,-86*s,34*s,-34*s,46*s,0);c.bezierCurveTo(62*s,40*s,48*s,84*s,0,84*s);c.bezierCurveTo(-48*s,84*s,-62*s,40*s,-46*s,0);c.bezierCurveTo(-34*s,-34*s,-30*s,-86*s,0,-86*s);c.closePath()} + shape(1);c.fillStyle=SK;c.fill();c.stroke() + shape(.84);c.fillStyle=FL;c.fill();c.lineWidth=4;c.stroke() + c.fillStyle=IN;c.beginPath();c.ellipse(0,20,30,32,0,0,T);c.fill();c.lineWidth=7;c.restore() +} +export default(c,t)=>{ + const o=(1-cos(t*T))/2,hop=max(0,sin(2*T*t)),py=-38*hop + half(c,72-14*o,-.12-.1*o) + c.save();c.translate(72-14*o,140);c.rotate(-.12-.1*o);c.fillStyle='#d8f5a2';c.beginPath();c.arc(0,22,24,0,T);c.fill();c.lineWidth=5;c.stroke();c.restore() + half(c,184+14*o,.12+.1*o) + c.save();c.translate(184+14*o,140);c.rotate(.12+.1*o) + const sq=hop<.1?.9:1 + c.translate(0,22+py);c.scale(2-sq,sq) + c.fillStyle=PIT;c.beginPath();c.arc(0,0,26,0,T);c.fill();c.stroke() + c.fillStyle='#111';for(const d of[-1,1])c.beginPath(),c.arc(d*9,-3,4,0,T),c.fill() + c.lineWidth=4;c.beginPath();c.arc(0,4,6,.15*PI,.85*PI);c.stroke() + c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(d*16,6,5,3,0,0,T),c.fill() + c.restore() +} diff --git a/gen/color/boba/sip.js b/gen/color/boba/sip.js new file mode 100644 index 0000000..49fd203 --- /dev/null +++ b/gen/color/boba/sip.js @@ -0,0 +1,25 @@ +// bubble tea cup with tapioca pearls riding up the straw and jiggling at the bottom +const{sin,cos,PI,hypot}=Math,T=2*PI +export const frames=20,delay=70 +const TEA='#ffd8a8',PE='#5c3d2e',ST='#f783ac',LID='#e7f5ff',BL='#ffa8a8' +const S0=[146,196],S1=[172,22] +export default(c,t)=>{ + for(const[w,s]of[[30,'#111'],[20,ST]])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),c.moveTo(...S0),c.lineTo(...S1),c.stroke() + c.strokeStyle='#111';c.lineWidth=7 + for(let k=0;k<4;k++){const p=(t+k/4)%1,x=S0[0]+(S1[0]-S0[0])*p,y=S0[1]+(S1[1]-S0[1])*p;if(y<70){c.fillStyle=PE;c.beginPath();c.arc(x,y,7,0,T);c.fill()}} + const cup=()=>{c.beginPath();c.moveTo(62,84);c.lineTo(194,84);c.lineTo(178,232);c.quadraticCurveTo(176,240,168,240);c.lineTo(88,240);c.quadraticCurveTo(80,240,78,232);c.closePath()} + cup();c.fillStyle=TEA;c.fill() + c.save();cup();c.clip() + c.fillStyle='#fff8f0';c.fillRect(50,84,160,22) + c.fillStyle=PE;for(let k=0;k<11;k++){const x=92+(k%6)*15+(k>5?8:0),y=224-(k>5?14:0)+2*sin(2*T*t+k);c.beginPath();c.arc(x,y,8,0,T);c.fill()} + c.fillStyle='#fff';for(let k=0;k<11;k++){const x=92+(k%6)*15+(k>5?8:0),y=224-(k>5?14:0)+2*sin(2*T*t+k);c.beginPath();c.arc(x-3,y-3,2,0,T);c.fill()} + c.restore();cup();c.stroke() + c.lineWidth=5;c.beginPath();c.moveTo(66,106);c.lineTo(190,106);c.stroke();c.lineWidth=7 + c.fillStyle=LID;c.beginPath();c.moveTo(54,84);c.bezierCurveTo(60,36,196,36,202,84);c.closePath();c.fill();c.stroke() + c.beginPath();c.roundRect(50,78,156,14,7);c.fill();c.stroke() + c.lineWidth=4;c.beginPath();c.arc(108,70,18,PI*1.15,PI*1.45);c.stroke();c.lineWidth=7 + c.fillStyle='#111';for(const d of[-1,1])c.beginPath(),c.arc(128+d*22,146,6,0,T),c.fill() + c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(128+d*22-2,144,2.2,0,T),c.fill() + c.lineWidth=5;c.beginPath();c.arc(128,154,9,.15*PI,.85*PI);c.stroke() + c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*42,160,9,5,0,0,T),c.fill() +} diff --git a/gen/color/burger/stack.js b/gen/color/burger/stack.js new file mode 100644 index 0000000..a172766 --- /dev/null +++ b/gen/color/burger/stack.js @@ -0,0 +1,19 @@ +// burger bouncing on the spot, top bun lagging behind like it's singing, lettuce flapping +const{sin,cos,PI,max}=Math,T=2*PI +export const frames=16,delay=70 +const BUN='#f4a259',PT='#8b5a3c',CH='#ffd43b',LT='#69db7c',TM='#fa5252',SE='#fff4e6' +export default(c,t)=>{ + const b=max(0,sin(2*T*t)),y=-14*b,sq=1-.08*(1-b),lid=-18*max(0,sin(2*T*t-.9)) + c.translate(128,226);c.scale(2-sq,sq);c.translate(-128,-226+y) + const R=(col,x,yy,w,h,r)=>{c.fillStyle=col;c.beginPath();c.roundRect(x,yy,w,h,r);c.fill();c.stroke()} + R(BUN,52,192,152,32,[8,8,18,18]) + R(PT,44,166,168,30,15) + c.fillStyle=CH;c.beginPath();c.moveTo(52,160);c.lineTo(204,160);c.lineTo(196,170);c.lineTo(172,186);c.lineTo(160,170);c.lineTo(100,170);c.lineTo(86,190);c.lineTo(70,170);c.lineTo(52,170);c.closePath();c.fill();c.stroke() + c.fillStyle=LT;c.beginPath();c.moveTo(40,152);for(let x=40;x<=216;x+=8)c.lineTo(x,152+6*sin(x/8+4*T*t)*(x%16?1:-1));c.lineTo(216,140);c.lineTo(40,140);c.closePath();c.fill();c.stroke() + R(TM,54,130,148,16,8) + c.translate(0,lid) + c.fillStyle=BUN;c.beginPath();c.moveTo(46,130);c.bezierCurveTo(46,40,210,40,210,130);c.quadraticCurveTo(210,138,200,138);c.lineTo(56,138);c.quadraticCurveTo(46,138,46,130);c.fill();c.stroke() + c.fillStyle=SE;c.lineWidth=3;for(const[x,yy,a]of[[96,74,.4],[128,64,0],[160,74,-.4],[110,92,.2],[148,92,-.2],[78,98,.6],[178,98,-.6]])c.beginPath(),c.ellipse(x,yy,6,3.5,a,0,T),c.fill(),c.stroke() + c.fillStyle='#111';for(const d of[-1,1])c.beginPath(),c.arc(128+d*22,110,5.5,0,T),c.fill() + c.lineWidth=5;c.beginPath();c.arc(128,116,9,.15*PI,.85*PI);c.stroke() +} diff --git a/gen/color/donut/spin.js b/gen/color/donut/spin.js new file mode 100644 index 0000000..71f7b91 --- /dev/null +++ b/gen/color/donut/spin.js @@ -0,0 +1,23 @@ +// pink frosted donut turning on the spot like it's on a turntable, sprinkles riding around with it +const{sin,cos,PI}=Math,T=2*PI +export const frames=24,delay=60 +const DO='#e8a15a',IC='#f783ac',SPR=['#ffd43b','#4dabf7','#fff','#69db7c','#b197fc','#ffd43b','#4dabf7','#fff','#69db7c','#b197fc','#ff922b','#fff'] +export default(c,t)=>{ + const y=4*sin(2*T*t),rot=t*T,X=128,Y=124+y,ry=.5 + c.fillStyle=DO + c.beginPath();c.ellipse(X,Y+18,94,94*ry,0,0,PI);c.lineTo(X-94,Y);c.ellipse(X,Y,94,94*ry,0,PI,0,true);c.closePath();c.fill();c.stroke() + c.beginPath();c.ellipse(X,Y,94,94*ry,0,0,T);c.fill();c.stroke() + c.fillStyle=IC;c.beginPath() + for(let a=0;a<=T+.01;a+=.05){const r=80+7*sin(7*a-rot*7)*(sin(a)>-.2?1:.3);c.lineTo(X+cos(a)*r,Y+sin(a)*r*ry-2)} + c.closePath();c.fill();c.stroke() + c.lineWidth=5 + SPR.forEach((col,k)=>{ + const a=rot+k*T/SPR.length+(k%3)*.2,r=k%2?62:46,x=X+cos(a)*r,yy=Y-2+sin(a)*r*ry,o=a*1.7+k + c.strokeStyle='#111';c.lineWidth=9;c.beginPath();c.moveTo(x-cos(o)*6,yy-sin(o)*3);c.lineTo(x+cos(o)*6,yy+sin(o)*3);c.stroke() + c.strokeStyle=col;c.lineWidth=4;c.stroke() + }) + c.strokeStyle='#111';c.lineWidth=7 + c.globalCompositeOperation='destination-out';c.beginPath();c.ellipse(X,Y-2,24,24*ry,0,0,T);c.fill();c.globalCompositeOperation='source-over' + c.save();c.beginPath();c.ellipse(X,Y-2,24,24*ry,0,0,T);c.clip();c.fillStyle=DO;c.beginPath();c.ellipse(X,Y+8,24,24*ry,0,PI,T);c.lineTo(X+24,Y+20);c.lineTo(X-24,Y+20);c.fill();c.restore() + c.beginPath();c.ellipse(X,Y-2,24,24*ry,0,0,T);c.stroke() +} diff --git a/gen/color/hamster/run.js b/gen/color/hamster/run.js new file mode 100644 index 0000000..41f287e --- /dev/null +++ b/gen/color/hamster/run.js @@ -0,0 +1,29 @@ +// hamster running flat out in a spinning wheel +const{sin,cos,PI}=Math,T=2*PI +export const frames=16,delay=50 +const RIM='#4dabf7',ST='#adb5bd',HB='#ffc078',BE='#fff4e6',PK='#faa2c1' +export default(c,t)=>{ + const rot=t*T/4,b=2*sin(4*T*t) + for(const d of[-1,1])c.beginPath(),c.moveTo(128,128),c.lineTo(128+d*52,236),c.lineWidth=12,c.stroke(),c.lineWidth=7 + c.fillStyle=ST;c.beginPath();c.roundRect(60,228,136,14,7);c.fill();c.stroke() + for(const[w,st]of[[8,'#111'],[3,'#dee2e6']]){c.lineWidth=w;c.strokeStyle=st;c.beginPath();for(let k=0;k<8;k++){const a=rot+k*PI/4;c.moveTo(128,128);c.lineTo(128+cos(a)*90,128+sin(a)*90)}c.stroke()} + c.strokeStyle='#111' + c.lineWidth=7;c.beginPath();c.arc(128,128,100,0,T);c.arc(128,128,88,0,T,true);c.fillStyle=RIM;c.fill('evenodd') + c.beginPath();c.arc(128,128,100,0,T);c.stroke();c.beginPath();c.arc(128,128,88,0,T);c.stroke() + c.lineWidth=4;for(let k=0;k<24;k++){const a=rot+k*T/24;c.beginPath();c.moveTo(128+cos(a)*88,128+sin(a)*88);c.lineTo(128+cos(a)*100,128+sin(a)*100);c.stroke()} + c.fillStyle='#fff';c.lineWidth=5;c.beginPath();c.arc(128,128,10,0,T);c.fill();c.stroke();c.lineWidth=7 + const hy=180+b + c.save();c.translate(128,200);c.scale(1.25,1.25);c.translate(-128,-200) + for(let k=0;k<4;k++){const a=-4*T*t+k*PI/2+(k>1?PI/4:0),lx=(k<2?106:146)+cos(a)*7,ly=hy+26+sin(a)*5;c.fillStyle=PK;c.beginPath();c.ellipse(lx,ly,8,6,0,0,T);c.fill();c.lineWidth=5;c.stroke();c.lineWidth=7} + c.fillStyle=HB;c.beginPath();c.arc(108,hy-26,9,0,T);c.fill();c.stroke() + c.beginPath();c.moveTo(84,hy+4);c.lineTo(76,hy);c.stroke() + c.beginPath();c.ellipse(128,hy,48,30,0,0,T);c.fill();c.stroke() + c.fillStyle=BE;c.beginPath();c.ellipse(140,hy+12,26,15,0,0,T);c.fill() + c.fillStyle=PK;c.beginPath();c.arc(124,hy-24,4,0,T);c.fill() + c.fillStyle='#111';c.beginPath();c.arc(156,hy-10,5,0,T);c.fill();c.beginPath();c.arc(176,hy-2,3.5,0,T);c.fill() + c.fillStyle='#fff';c.beginPath();c.arc(154,hy-12,1.8,0,T);c.fill() + c.fillStyle=PK;c.beginPath();c.ellipse(158,hy+4,7,4,0,0,T);c.fill() + c.restore() + for(const k of[0,1,2])for(const[w,st]of[[9,'#111'],[3,'#fff']]){const x=62-k*6;c.lineWidth=w;c.strokeStyle=st;c.beginPath();c.moveTo(x,hy-12+k*12);c.lineTo(x-14,hy-12+k*12);c.stroke()} + c.strokeStyle='#111' +} diff --git a/gen/color/ladybug/crawl.js b/gen/color/ladybug/crawl.js new file mode 100644 index 0000000..d425998 --- /dev/null +++ b/gen/color/ladybug/crawl.js @@ -0,0 +1,28 @@ +// ladybug crawling on a leaf, legs stepping, antennae twitching, wings peeking open now and then +const{sin,cos,PI,max}=Math,T=2*PI +export const frames=20,delay=70 +const LF='#69db7c',VN='#2f9e44',R='#fa5252',WG='#e7f5ff' +export default(c,t)=>{ + c.save();c.translate(128,128);c.rotate(-.5) + c.fillStyle=LF;c.beginPath();c.moveTo(-122,0);c.quadraticCurveTo(0,-118,122,0);c.quadraticCurveTo(0,118,-122,0);c.fill();c.stroke() + c.strokeStyle=VN;c.lineWidth=5;c.beginPath();c.moveTo(-110,0);c.lineTo(110,0);for(const x of[-60,-20,20,60])c.moveTo(x,0),c.lineTo(x+26,-36),c.moveTo(x,0),c.lineTo(x+26,36);c.stroke() + c.restore();c.strokeStyle='#111';c.lineWidth=7 + const y=4*sin(2*T*t),r=.08*sin(T*t),w=max(0,sin(PI*(t-.55)/.3))*(t>.55&&t<.85) + c.translate(128,140+y);c.rotate(r) + for(const d of[-1,1])for(let k=0;k<3;k++){ + const st=(k%2?1:-1)*d*5*sin(2*T*t) + c.lineWidth=6;c.beginPath();c.moveTo(d*30,-22+k*24);c.lineTo(d*58,-34+k*28+st);c.lineTo(d*66,-24+k*30+st);c.stroke() + } + for(const d of[-1,1]){c.lineWidth=5;c.beginPath();c.moveTo(d*10,-58);c.quadraticCurveTo(d*18,-84,d*(28+3*sin(4*T*t+d)),-88);c.stroke();c.fillStyle='#111';c.beginPath();c.arc(d*(28+3*sin(4*T*t+d)),-88,5,0,T);c.fill()} + c.lineWidth=7 + if(w>0)for(const d of[-1,1])c.fillStyle=WG,c.beginPath(),c.ellipse(d*30,20,26,52,d*.3,0,T),c.fill(),c.lineWidth=4,c.stroke(),c.lineWidth=7 + c.fillStyle='#111';c.beginPath();c.arc(0,-46,26,PI,0);c.closePath();c.fill();c.stroke() + c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(d*11,-56,6,0,T),c.fill() + c.fillStyle='#111';for(const d of[-1,1])c.beginPath(),c.arc(d*11,-55,3,0,T),c.fill() + for(const d of[-1,1]){ + c.save();c.translate(0,-44);c.rotate(-d*w*.45);c.translate(0,44) + c.fillStyle=R;c.beginPath();c.moveTo(0,-44);c.arc(0,4,48,-PI/2,PI/2,d<0);c.closePath();c.fill();c.stroke() + c.fillStyle='#111';for(const[x,yy,rr]of[[16,-14,9],[28,14,8],[12,26,7]])c.beginPath(),c.arc(d*x,yy,rr,0,T),c.fill() + c.restore() + } +} diff --git a/gen/color/panda/munch.js b/gen/color/panda/munch.js new file mode 100644 index 0000000..1e2ca32 --- /dev/null +++ b/gen/color/panda/munch.js @@ -0,0 +1,30 @@ +// panda sitting and munching on a bamboo stalk, cheeks working, bamboo bobbing with every chew +// black parts get a white rim so they still show on dark backgrounds +const{sin,cos,PI,abs}=Math,T=2*PI +export const frames=16,delay=80 +const BB='#69db7c',PK='#ffa8c5' +export default(c,t)=>{ + const ch=abs(sin(2*PI*t*2)),by=6*ch + const dark=f=>{c.beginPath();f();c.lineWidth=15;c.strokeStyle='#fff';c.stroke();c.fillStyle='#111';c.fill();c.lineWidth=7;c.strokeStyle='#111';c.stroke()} + for(const d of[-1,1])dark(()=>c.arc(128+d*46,56,20,0,T)) + for(const d of[-1,1])dark(()=>c.ellipse(128+d*40,222,24,16,0,0,T)) + c.fillStyle='#fff';c.beginPath();c.ellipse(128,180,62,52,0,0,T);c.fill();c.stroke() + for(const d of[-1,1]){c.fillStyle=PK;c.beginPath();c.ellipse(128+d*40,224,10,7,0,0,T);c.fill()} + c.fillStyle='#fff';c.beginPath();c.arc(128,100,56,0,T);c.fill();c.stroke() + for(const d of[-1,1])c.fillStyle='#111',c.beginPath(),c.ellipse(128+d*24,96,15,19,d*.55,0,T),c.fill() + c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(128+d*23,94,5,0,T),c.fill() + c.fillStyle='#111';c.beginPath();c.ellipse(128,116,8,6,0,0,T);c.fill() + c.fillStyle=PK;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*38,122+ch*2,10,6,0,0,T),c.fill() + c.lineWidth=5;c.beginPath() + if(ch>.5)c.ellipse(128,132,7,5,0,0,T);else c.moveTo(118,130),c.quadraticCurveTo(123,136,128,130),c.quadraticCurveTo(133,136,138,130) + c.stroke() + for(const[x0,y0,x1,y1]of[[86,158,156,186-by],[176,152,176,170-by]]) + for(const[w,s]of[[36,'#fff'],[26,'#111']])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),c.moveTo(x0,y0),c.lineTo(x1,y1),c.stroke() + c.save();c.translate(196,230-by);c.rotate(-.42) + for(const[w,s]of[[28,'#111'],[16,BB]])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),c.moveTo(0,0),c.lineTo(0,-118),c.stroke() + c.strokeStyle='#111';c.lineWidth=5;for(const y of[-36,-80])c.beginPath(),c.moveTo(-9,y),c.lineTo(9,y),c.stroke() + c.fillStyle=BB;for(const[a,y]of[[1,-104],[1,-88]])c.save(),c.translate(a*8,y),c.rotate(-.5+(y+96)*.03),c.beginPath(),c.ellipse(18,0,20,7,0,0,T),c.fill(),c.stroke(),c.restore() + c.restore() + for(const[x,y]of[[156,186],[176,170]])c.lineWidth=13,c.strokeStyle='#fff',c.beginPath(),c.arc(x,y-by,13,0,T),c.stroke(),c.fillStyle='#111',c.fill() + c.lineWidth=7;c.strokeStyle='#111' +} diff --git a/gen/color/pizza/stretch.js b/gen/color/pizza/stretch.js new file mode 100644 index 0000000..e6bb0ec --- /dev/null +++ b/gen/color/pizza/stretch.js @@ -0,0 +1,23 @@ +// slice of pizza being lifted off the pie with cheese strings stretching under it +const{sin,cos,PI}=Math,T=2*PI +export const frames=20,delay=70 +const CR='#e8a15a',CH='#ffd43b',PP='#fa5252',SAUCE='#ff8787' +export default(c,t)=>{ + const L=46*(1-cos(t*T))/2 + c.fillStyle=CR;c.beginPath();c.ellipse(128,212,112,30,0,0,T);c.fill();c.stroke() + c.fillStyle=CH;c.beginPath();c.ellipse(128,208,96,22,0,0,T);c.fill();c.lineWidth=5;c.stroke() + c.fillStyle=PP;for(const[x,y]of[[70,206],[180,210],[150,200],[96,216]])c.beginPath(),c.ellipse(x,y,12,6,0,0,T),c.fill(),c.stroke() + c.lineWidth=7 + for(const[x0,x1]of[[96,98],[112,112],[128,128],[144,146],[160,158]]){ + const w=Math.max(4,14-L*.18),sag=6*sin(t*T*2+x0) + for(const[l,s]of[[w+7,'#111'],[w,CH]])c.lineWidth=l,c.strokeStyle=s,c.beginPath(),c.moveTo(x0,150-L+(x0-128)**2/80),c.quadraticCurveTo((x0+x1)/2+sag,(150-L+200)/2,x1,200),c.stroke() + } + c.lineWidth=7;c.strokeStyle='#111' + c.translate(0,-L) + c.fillStyle=CH;c.beginPath();c.moveTo(60,56);c.lineTo(196,56);c.lineTo(128,182);c.closePath();c.fill();c.stroke() + c.save();c.clip();c.fillStyle=SAUCE;for(const[x,y]of[[100,80],[156,84]])c.beginPath(),c.ellipse(x,y,14,8,0,0,T),c.fill();c.restore() + c.fillStyle=PP;for(const[x,y]of[[96,78],[150,92],[124,130]])c.beginPath(),c.arc(x,y,13,0,T),c.fill(),c.stroke() + c.fillStyle=CR;c.beginPath();c.roundRect(52,40,152,24,12);c.fill();c.stroke() + c.lineWidth=5;for(const d of[-1,1])c.beginPath(),c.arc(128+d*14,104,6,PI*1.15,PI*1.85),c.stroke() + c.beginPath();c.arc(128,110,7,.15*PI,.85*PI);c.stroke() +} diff --git a/gen/color/taco/wiggle.js b/gen/color/taco/wiggle.js new file mode 100644 index 0000000..a7d9caf --- /dev/null +++ b/gen/color/taco/wiggle.js @@ -0,0 +1,19 @@ +// taco dancing side to side, lettuce flapping and its fillings jiggling +const{sin,cos,PI}=Math,T=2*PI +export const frames=16,delay=70 +const SH='#ffd43b',SD='#f59f00',LT='#69db7c',TM='#fa5252',MT='#8b5a3c',CH='#fff3bf',BL='#ffa8a8' +export default(c,t)=>{ + const r=.16*sin(t*T),j=3*sin(2*T*t) + c.translate(128,214);c.rotate(r);c.translate(-128,-214) + c.fillStyle=MT;c.beginPath();c.ellipse(128,108+j,82,26,0,0,T);c.fill();c.stroke() + c.fillStyle=LT;c.beginPath();c.moveTo(40,116);for(let k=0;k<=12;k++){const x=40+k*176/12;c.lineTo(x,(k%2?84:100)+j*(k%3-1))}c.lineTo(216,116);c.closePath();c.fill();c.stroke() + c.fillStyle=TM;for(const[x,y]of[[72,96],[104,86],[150,88],[184,98],[128,96]])c.beginPath(),c.arc(x,y+j,12,0,T),c.fill(),c.stroke() + c.lineWidth=5;c.strokeStyle='#111';c.fillStyle=CH;for(const[x,y,a]of[[90,104,.6],[120,100,-.4],[166,104,.3]])c.save(),c.translate(x,y-j),c.rotate(a),c.beginPath(),c.roundRect(-12,-3,24,6,3),c.fill(),c.stroke(),c.restore() + c.lineWidth=7 + c.fillStyle=SH;c.beginPath();c.moveTo(30,112);c.arc(128,112,98,PI,0,true);c.closePath();c.fill();c.stroke() + c.fillStyle=SD;for(const[x,y]of[[70,150],[96,186],[160,184],[186,146],[128,196],[56,124],[200,122]])c.beginPath(),c.arc(x,y,4,0,T),c.fill() + c.fillStyle='#111';for(const d of[-1,1])c.beginPath(),c.arc(128+d*26,140,6,0,T),c.fill() + c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(128+d*26-2,138,2.2,0,T),c.fill() + c.fillStyle='#111';c.beginPath();c.moveTo(114,154);c.quadraticCurveTo(128,174,142,154);c.closePath();c.fill() + c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*46,154,9,5,0,0,T),c.fill() +} diff --git a/gen/color/watermelon/chomp.js b/gen/color/watermelon/chomp.js new file mode 100644 index 0000000..2f344b7 --- /dev/null +++ b/gen/color/watermelon/chomp.js @@ -0,0 +1,21 @@ +// watermelon slice getting chomped three times, then popping back whole for another round +const{sin,PI,min,max}=Math,T=2*PI +export const frames=24,delay=80 +const RD='#51cf66',RL='#d3f9d8',FL='#ff6b6b' +const B=[[.12,84],[.3,170],[.5,128]] +const slice=c=>{c.beginPath();c.moveTo(232,108);c.arc(128,108,104,0,PI);c.closePath()} +export default(c,t)=>{ + const pop=t>.78?(t-.78)/.22:0,s=pop?1+.12*sin(PI*min(1,pop*1.4)):1,done=B.filter(([at])=>t>=at&&!pop) + c.translate(128,160);c.scale(s,s);c.translate(-128,-160) + slice(c);c.fillStyle=RD;c.fill() + c.fillStyle=RL;c.beginPath();c.moveTo(220,108);c.arc(128,108,92,0,PI);c.closePath();c.fill() + c.fillStyle=FL;c.beginPath();c.moveTo(212,108);c.arc(128,108,84,0,PI);c.closePath();c.fill() + c.fillStyle='#111';for(const[x,y,a]of[[68,140,.5],[94,168,.2],[128,184,0],[162,168,-.2],[188,140,-.5]])c.save(),c.translate(x,y),c.rotate(a),c.beginPath(),c.ellipse(0,0,4,7,0,0,T),c.fill(),c.restore() + const surprised=done.some(([at])=>t-at<.08) + c.fillStyle='#111';for(const d of[-1,1])c.beginPath(),c.arc(128+d*30,128,6,0,T),c.fill() + c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(128+d*30-2,126,2.2,0,T),c.fill() + c.lineWidth=5;c.strokeStyle='#111';c.beginPath();if(surprised)c.ellipse(128,148,7,9,0,0,T);else c.arc(128,140,10,.15*PI,.85*PI);c.stroke();c.lineWidth=7 + c.globalCompositeOperation='destination-out';for(const[,x]of done)c.beginPath(),c.arc(x,108,26,0,T),c.fill();c.globalCompositeOperation='source-over' + c.save();c.beginPath();c.rect(0,0,256,256);for(const[,x]of done)c.moveTo(x+26,108),c.arc(x,108,26,0,T);c.clip('evenodd');slice(c);c.stroke();c.restore() + c.save();slice(c);c.clip();for(const[,x]of done)c.beginPath(),c.arc(x,108,26,0,T),c.stroke();c.restore() +} diff --git a/public/avocado/split.gif b/public/avocado/split.gif new file mode 100644 index 0000000..7829fac Binary files /dev/null and b/public/avocado/split.gif differ diff --git a/public/avocado/split.webp b/public/avocado/split.webp new file mode 100644 index 0000000..18c4886 Binary files /dev/null and b/public/avocado/split.webp differ diff --git a/public/boba/sip.gif b/public/boba/sip.gif new file mode 100644 index 0000000..30fa160 Binary files /dev/null and b/public/boba/sip.gif differ diff --git a/public/boba/sip.webp b/public/boba/sip.webp new file mode 100644 index 0000000..c6376f1 Binary files /dev/null and b/public/boba/sip.webp differ diff --git a/public/burger/stack.gif b/public/burger/stack.gif new file mode 100644 index 0000000..c2e1021 Binary files /dev/null and b/public/burger/stack.gif differ diff --git a/public/burger/stack.webp b/public/burger/stack.webp new file mode 100644 index 0000000..5306c68 Binary files /dev/null and b/public/burger/stack.webp differ diff --git a/public/donut/spin.gif b/public/donut/spin.gif new file mode 100644 index 0000000..c60417b Binary files /dev/null and b/public/donut/spin.gif differ diff --git a/public/donut/spin.webp b/public/donut/spin.webp new file mode 100644 index 0000000..8b1ce81 Binary files /dev/null and b/public/donut/spin.webp differ diff --git a/public/hamster/run.gif b/public/hamster/run.gif new file mode 100644 index 0000000..245d085 Binary files /dev/null and b/public/hamster/run.gif differ diff --git a/public/hamster/run.webp b/public/hamster/run.webp new file mode 100644 index 0000000..3a236e4 Binary files /dev/null and b/public/hamster/run.webp differ diff --git a/public/ladybug/crawl.gif b/public/ladybug/crawl.gif new file mode 100644 index 0000000..1717b37 Binary files /dev/null and b/public/ladybug/crawl.gif differ diff --git a/public/ladybug/crawl.webp b/public/ladybug/crawl.webp new file mode 100644 index 0000000..74b2a23 Binary files /dev/null and b/public/ladybug/crawl.webp differ diff --git a/public/panda/munch.gif b/public/panda/munch.gif new file mode 100644 index 0000000..93d2553 Binary files /dev/null and b/public/panda/munch.gif differ diff --git a/public/panda/munch.webp b/public/panda/munch.webp new file mode 100644 index 0000000..ad3295a Binary files /dev/null and b/public/panda/munch.webp differ diff --git a/public/pizza/stretch.gif b/public/pizza/stretch.gif new file mode 100644 index 0000000..b42412b Binary files /dev/null and b/public/pizza/stretch.gif differ diff --git a/public/pizza/stretch.webp b/public/pizza/stretch.webp new file mode 100644 index 0000000..c67c68c Binary files /dev/null and b/public/pizza/stretch.webp differ diff --git a/public/taco/wiggle.gif b/public/taco/wiggle.gif new file mode 100644 index 0000000..f2f81bf Binary files /dev/null and b/public/taco/wiggle.gif differ diff --git a/public/taco/wiggle.webp b/public/taco/wiggle.webp new file mode 100644 index 0000000..ea41248 Binary files /dev/null and b/public/taco/wiggle.webp differ diff --git a/public/watermelon/chomp.gif b/public/watermelon/chomp.gif new file mode 100644 index 0000000..a511303 Binary files /dev/null and b/public/watermelon/chomp.gif differ diff --git a/public/watermelon/chomp.webp b/public/watermelon/chomp.webp new file mode 100644 index 0000000..37be200 Binary files /dev/null and b/public/watermelon/chomp.webp differ