direct-img/vibegif.direct-img.link
1
0
Fork 0
mirror of https://github.com/direct-img/vibegif.direct-img.link.git synced 2026-10-29 03:34:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Draw the minimalist creatures white directly and drop invert

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
multipleof4
2026-10-23 14:21:01 +00:00
co-authored by Claude Opus 5.5
parent b9200e390f
commit f25e39b727
13 changed files with 18 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/gen.js
+5 -9
View File
@@ -2,9 +2,8 @@
// the section folder (bw, color, anime, manga, mini, minicolor) only picks where it shows in the gallery, it isn't part of the url
// npm run gen renders only what's missing (published files never change by accident)
// npm run gen -- cat/blink renders only the named ones, even if they already exist
// a file can export rim=<px> to get a white sticker border, so black ink still shows on a black page
// a file can export rim=<px> to get a sticker border, white unless it also exports rimColor, so a shape that matches the page still shows
// delay can be one number or a list with one entry per frame (ms)
// invert=true swaps ink and paper (#111 <-> #fff), turning a black silhouette with a white rim into a white one with a dark rim
import{createCanvas}from'@napi-rs/canvas'
import sharp from'sharp'
import{readdirSync as rd,existsSync as ex,mkdirSync as mk,statSync as st}from'fs'
@@ -18,22 +17,19 @@ if(dup)throw Error(`${dup} is in more than one section`)
for(const[k,f]of files.entries()){
const id=ids[k],o=`public/${id}`
if(redo.length?!redo.includes(id):ex(o+'.webp')&&ex(o+'.gif'))continue
const{default:draw,frames=16,delay=80,rim=0,invert=false}=await import(url(resolve(f)))
const{default:draw,frames=16,delay=80,rim=0,rimColor='#fff'}=await import(url(resolve(f)))
const px=[...Array(frames)].map((_,i)=>{
let c=createCanvas(S,S).getContext('2d')
Object.assign(c,{lineWidth:7,lineCap:'round',lineJoin:'round',strokeStyle:'#111',fillStyle:'#fff'})
draw(c,i/frames,i)
if(rim){
// white silhouette grown by rim px (copies shifted around rings 1..rim px out), then the frame on top
// silhouette grown by rim px (copies shifted around rings 1..rim px out) filled with rimColor, then the frame on top
const r=createCanvas(S,S).getContext('2d')
for(let d=1;d<=rim;d++)for(let a=0;a<24;a++)r.drawImage(c.canvas,d*Math.cos(a*Math.PI/12),d*Math.sin(a*Math.PI/12))
r.globalCompositeOperation='source-in';r.fillStyle='#fff';r.fillRect(0,0,S,S)
r.globalCompositeOperation='source-in';r.fillStyle=rimColor;r.fillRect(0,0,S,S)
r.globalCompositeOperation='source-over';r.drawImage(c.canvas,0,0);c=r
}
const b=Buffer.from(c.getImageData(0,0,S,S).data.buffer)
// 17 and 255 trade places, the antialiased grays in between flip along, alpha is untouched
if(invert)for(let j=0;j<b.length;j++)if(j%4<3)b[j]=Math.min(255,272-b[j])
return b
return Buffer.from(c.getImageData(0,0,S,S).data.buffer)
})
mk(dirname(o),{recursive:true})
const img=()=>sharp(Buffer.concat(px),{raw:{width:S,height:S*frames,channels:4,pageHeight:S}})