Home

Awesome

Punkbase

query punk metadata & images via sql & more - all-in-one single-file sqlite database, that is, punkbase.db (~5MB)

Try the "serverless" query web page online

Let's try out some sql queries and let's look (and drill-down) for marilyn punkettes (w/ moles).

Click on "gender: f" in any punkette and you will filter only punkettes. Click on "head: Wild Blonde" in any punkette and you will add a "Wild Blonde" filter resulting in 144 punkettes.

Or try in "raw" sql:

select *
from   metadata
where  gender = "f" AND
       head   = "Wild Blonde"

=> 144 punkettes

Now let's drill down. Click on "skin_tone: Light".

select *
from   metadata
where  gender    = "f" AND
       head      = "Wild Blonde" AND
       skin_tone = "Light"

=> 48 punkettes

And now let's drill down further. Click on "blemishes: Mole".

select *
from   metadata
where  gender    = "f" AND
       head      = "Wild Blonde" AND
       skin_tone = "Light" AND
       blemishes = "Mole"

=> 3 punkettes

Voila! Three super-rare marilyns. Where's the blue-eyed marilyn with hot lipstick?

Tip - yes, you can - generate your own ultra-rare never-before-seen original, see Design Your Own Matt & John's® Ye Olde' Punk (Anno 2017) (24×24) Wizard ».

Run Locally ("Serverless")

Yes, you can - run locally (no database server required) - download or clone the punkbase git repo and run a local webserver to serve the static web page and sqlite database.

In node use:

 $ npx http-server

In ruby use:

 $ ruby -run -e httpd . -p 8080

Or use your local webserver of choice.

Inside

For now all data (10 000 records) is in the metadata table. The table definition reads:

CREATE TABLE metadata (
    -- general
    id         INTEGER      PRIMARY KEY AUTOINCREMENT
                            NOT NULL,
    base       VARCHAR      NOT NULL,
    gender     VARCHAR      NOT NULL,
    skin_tone  VARCHAR,
    count      INTEGER      NOT NULL,
    -- attributes
    blemishes  VARCHAR,
    head       VARCHAR,
    beard      VARCHAR,
    eyes       VARCHAR,
    nose       VARCHAR,
    mouth      VARCHAR,
    mouth_prop VARCHAR,
    ears       VARCHAR,
    neck       VARCHAR,

    -- image
    image      VARCHAR      NOT NULL
);

Notes:

The attributes are broken up in ten categories:

The images are stored "inline" in the image column in 24×24 px in the PNG (Portable Network Graphics) format with transparent background and base64-encoded and starting with data:image. Example - punk no. 0:

data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAFVBMVEUAAAAA
AABQfDNdi0NfHQmui2H/9o4qIUCBAAAAB3RSTlMA////////pX+m+wAAAHhJ
REFUeJxjYkACTORy2NLSEmAcNiCLDUVZApQDoj+wwWQ+MPz/D1f2/8MHmGlA
Bf8RRv//e4HhLEKZAMNHGIeRRYHBCdU5CXDOAZgBCQwCDA5gQ4GcWQyM/98z
/poFUTZrPaPg7wVwAw4w7EeYZrPnA4LD8h/T2wA0qh2r1DURDgAAAABJRU5E
rkJggg==
<!-- note: data:image looks to get filtered by github page ? resulting in (if you add / paste the image data to / into the src attribute): <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAFVBMVEUAAAAAAABQfDNdi0NfHQmui2H/9o4qIUCBAAAAB3RSTlMA////////pX+m+wAAAHhJREFUeJxjYkACTORy2NLSEmAcNiCLDUVZApQDoj+wwWQ+MPz/D1f2/8MHmGlABf8RRv//e4HhLEKZAMNHGIeRRYHBCdU5CXDOAZgBCQwCDA5gQ4GcWQyM/98z/poFUTZrPaPg7wVwAw4w7EeYZrPnA4LD8h/T2wA0qh2r1DURDgAAAABJRU5E"> -->

Making-Of - Yes, You Can - Build Your Own Punkbase From Zero / Scratch

See the punkbase script in /punkbase in the punk.sandbox for the building your own database from zero / scratch.

Questions? Comments?

Post them on the D.I.Y. Punk (Pixel) Art reddit. Thanks.