ipodkitty

secret playground for ipodkitty

2024-02-09 (1 year ago) unlisted blog

me soon, using my ipod

paste in a spotify track url

submit

here’s my current ipodkitty

https://ipodkitty.ncp.nathanferns.xyz/6dBUzqjtbnIa1TwYbyw5CM

how it works

when you visit ipodkitty.ncp.nathanferns.xyz/<trackid> the server sends a request to canvas-api.ncp.nathanferns.xyz with some code to generate the image of the cat listening to the track. the server then sends back a signed url which points to the image (which is generated on the fly). the server then caches the image for 5 minutes and the url itself is behind a pull cdn.

the code being sent over is my own custom language, quilt

main.ql

// draw the background image
@DrawImage(kitty, 0, 0) 

let x, y = (205, 187)
// tilt the image a bit
@ShearAbout(x, y, -0.47, 0.29)

// draw a round rectangle to be used as a mask
@DrawRoundedRectangle(204, 192, 45, 35, 5)
@ClipPreserve()

// resive the image
let cover = @Resize(cover, 45, 45)
@DrawImage(cover, x, y)

// draw a greentinted rectangle over the image, and a dark green border
@SetColor(#7a7f5f40)
@FillPreserve()
@SetStrokeWidth(3)
@SetColor(#7a7f5f60)
@Stroke()

json payload

{
    size: [330, 330],
    assets: [
        {
            name: "kitty",
            url: "https://nathanielfernandes.b-cdn.net/silly/kitty.png"
        },
        {
            name: "cover",
            url: "..."
        }
    ],
    files: [
        {
            name: "main.ql",
            content: "..."
        }
    ]
}

thats it! thats all the code needed to generate the image. ipodkitty just redirects to the signed url and the image is displayed.

if you want to try out the language, you can use the quilt playground

ipodkitty repo: https://github.com/nathanielfernandes/ipodkitty