Binary Image Converter

Binary Image Converter

I made another HTML5 toy! It deals with binary images that print ASCII messages when converted, and vice versa. Try it out!

Last night, I noticed chickensnack‘s favicon on his site – I converted it to a binary string by hand (by literally typing out the 1’s and 0’s), and then feeding it through a binary-to-ASCII converter I found through Google. I decided that there must be a better way!

I wrote this toy to function almost entirely in JavaScript, so everything except form submission and image verification happens in JavaScript. This includes the actual pixel manipulation to read or generate a bitmap, thanks to data URI and canvas.

I learned how ASCII and binary are converted from one another – JavaScript has a handy function to parse a binary digit into an integer (parseInt(x, 2)), but not the other way around. I also learned how to convert images and canvas data into base64-encoded data URIs, meaning that I don’t need to temporarily host an uploaded image on my server – just process it in memory and spit it back out in the response.

This toy (currently) only works with ASCII, meaning you’re out of luck if you try throwing Unicode in there. And also due to the way that browsers display non-printing ASCII characters, you’ll run into problems if you try encoding any old image into ASCII. Perhaps I’ll create a variation that converts the binary into base64 intermediately, so non-ASCII characters can be displayed properly. This would be incompatible with the version I’ve made, though.

Some examples for you to try:

Source for this can be found here:

jeffreyatw.com v13

After a few years of my site sitting around and doing nothing, I decided I’d have it continue to sit around and do nothing… IN STYLE!

I made my site all HTML5 and CSS3-ey by using more semantic elements and some nice gradient and shadow stuff. The site looks best in Chrome, but degrades gracefully in other browsers. I load my portfolio’s section names via Django, and I request my Twitter and LiveJournal feeds via JSONP. Furthermore, there is only one image on the page, the photo of me – everything else is done up in CSS. All in all, it’s a pretty and pretty simple site.

Songogo

Townage
Simple song I made in about two hours. I had the Cinematic Orchestra in mind – also Nifflas‘ music from the Knytt series. Finally, I wanted to use a small MIDI I made that I never ended up doing anything with. I also wanted to stick to basics, and stay calm, since a lot of my songs tend to get carried away for fear of becoming too repetitive. Take a listen!

Songo

Prestidigitation
Hey, it’s a song! Sort of final-bossy, also sort of onoken-y and TaQ-y. Brian says it’s F-Zero-Anime-y but I’ve never watched that BRIAN INFORMS ME NO SUCH THING EXISTS AND I AM PUTTING WORDS INTO HIS MOUTH!!! I THINK I WILL ALSO INCLUDE MY FIST. This is the first song I’ve finished since last summer. Jesus Christ! I should really get back into the swing of things.