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.

On phases

I feel we all can relate to the feeling of having a different life before and after a certain incident. Something which completely changed the direction your life was going in. Be it because of something extremely nice or something extremely tragic, your life changed for the good or worse.

Personal experience, I don’t know how many people go through this as well, but I’ve noticed these phase changes are often associated with changing friend circles or making new friends and getting close to them while distancing yourself from your older friends. While this sounds sort of selfish, is it really? I don’t think anybody does this on purpose, I do strongly believe that you are the average of the 5 people you’re closest to – not necessarily in real life.

Also, each of these phases have their own pros and cons. With enough experience and thought putting, you can figure the pros and cons out and decide whether you want to switch to that phase or not. Life can be a lot simpler if you can think like that because in my opinion it unleashes your potential. If you can look up to someone and be like “I want to be like that person next,” and actually put your time in it to shift to that ‘phase,’ it’s gonna work out.

Recently having gone through a series of unfortunate events followed by me realizing I like this girl I have been talking to recently, it’s been a confusing few weeks. There’s only two ways the latter can go, each defining a different phase for me.

The making of HadYouBought.com

facebook

For those of you here who don’t know, I recently made HadYouBought.comΒ – a website where you can check how much money you could’ve earned had you bought $100 of a coin the other day.

The idea for this web-app came to me while I was giving some investment advice to a friend of mine. I had been asking him to purchase some VeChain (VEN) for a while. One day, the coin experienced a gain of over 20% and it was a classic “I told you so” moment for me. However, I realized I’ve been through this so many times before. Multiple times have I suggested my friends or my family to invest in a specific cryptocurrency but they didn’t and eventually it experienced gains in price. This gave me the idea of putting those gains in numbers – because visual representations speak more than words.

In the back of my head I sort of remembered visiting a website which showed you how much your investment in Bitcoin would’ve been today had you bought it on a past date – but upon a couple quick minutes of Google-ing I could not find that – so I decided to make my own.

The first step was to look for a good pricing API which offered historical pricing data for a wide range of coins. Initially, the website used CoinMetrics.io but I switched to CryptoCompare a couple of days later mainly because they have more data and just more coins in their database as well. Plus, with CryptoCompare, I didn’t have to cache the datasets anymore.

After the backbone scripts were done began the hard part. Being a backend software developer, designing good looking websites is always a struggle for me. I wanted to use a lightweight CSS framework which would assist me. I haven’t been a huge fan of Bootstrap recently so I went with MaterializeCSS instead. After a couple hours of struggling with some jQuery, I was able to make a working website.

I wish I had a screenshot of it, but the initial design looked horrible compared to what it looks like at the time of writing. I ended up adding preloader animations, switched the coin dropdown to a modal with buttons, added a FOMO warning label, and made the project open source on GitHub

Finally, I took to Reddit to promote the website. I posted links of the website to subreddits of cryptocurrencies where it’s allowed and within a couple days I stirred up some interest in the website. It has been less than a week I launched it and the website has generated over 5,000 views. I honestly didn’t even expect it to gain this much interest, it was just a tool for me to get my friends into crypto ASAP but hey, it worked πŸ˜€