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
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 😀
- Open up http://pixelartcss.com/
- Draw your masterpiece
- Take note of the number of rows (or height) of the drawing (help)
- Open up – http://haardikk.me/pixelarttodrawing
- Input the height and the CSS code of the drawing on the website and press Go
- You now have a working colourable drawing 😀
NOTE: This does not yet work on touchscreens.