Converting pixel art to a colourable drawing using HTML/CSS and Javascript

It was a friend’s birthday recently and I wanted to make her something special. She had recently gotten really into playing the Pixel Art mobile game where you just color numbered boxes to make a pixel art drawing. I ended up developing a colourable drawing similar to this!

A brief process of how I did it is as follows:

  • Generate Pixel Art using http://pixelartcss.com/ and grab it’s CSS
  • Wrote a barebone HTML document with an empty table
  • Wrote a script to convert the box-shadow parameters to individual table cells with background colors based on box-shadow
  • Using javascript, remove the white color and border I added previously on ‘uncolored’ cells on mousedown over cells

This wasn’t a hard process, but would’ve been a lot of manual labor if I didn’t write the script to do it for me. So I got an idea, why not just write a script to generate the entire website directly from the Pixel Art CSS code.

Aaaaaaand that’s what I did 😀

Introducing Pixel Art to Drawing 😀

NOTE: This does not yet work on touchscreens.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s