Coloring the canvas – the processing way

I thought it was time somebody started painting on the canvas. Its been a couple of months since I wrote this program and it was lying in a corner of my hard disk all along. Realized is pretty low on contents and decided to add it to the site.

And the source code can be viewed by pressing ctrl+u (in chrome). But I must warn you though – I’ve put absolutely zero effort into making the code readable. I’m pretty sure even I can’t make sense of it right now. I was in a hurry to do something with processing and thought “Hey, lets make a paint program”. The development came to an abrupt stand still when i tried to implement the ‘fill bucket’ tool using the flood fill algorithm – the damn thing simply refused to work the way I wanted it to.

Anyways, the program proves beyond all doubt that a lot of amazing things are simply doable with processing.

And I had to choose not to include a lot of additional libraries that might have made it a lot easier to develop the program (like a java library that can add additional drawing layers) because 3rd party processing java libraries are incompatible with processing.js , ie, they wont work when you convert the processing code into javascript.

A few handy ‘features’ were added to compensate for the ultimate pathetic-ness of the program. More info can be found in the documentation.

And the documentation :


Into the web

I’ve always thought that developing for the web was easy and boring – thanks to my computer teacher who taught me html in 8th grade. However, I used to feel a sense of accomplishment when I saw my marquee going across my web page – and change direction when it hits the edge. And soon enough i came to understand that real programming was a world apart from creating simple web pages in html. And I began to look down on web development as something that is less ‘glorious’ than developing desktop applications.

6 years later, I’m the only programmer in the house who can’t put together a (decent)web site.

I tried learning the Django web framework, all the while hoping that Django is that magical thing that will allow me to write games for the web. It wasn’t, or at least I didn’t have enough enthusiasm to get to the part where Django might turn a little interesting. And I even tried to put together some web pages with some javascript and they looked terrible – and my accounts at various free web hosts started expiring because I never log in. And I really wanted to build one of those cool websites with all those mouse-over effects. That’s when I heard about CSS. Then I hardened up and made up my mind that scripting was not what ‘real’ programmers would be doing and that creating web pages and associated programming was so simple that I shouldn’t be focusing on that – unless I wanted to be a part of the common rabble. This is the single most programming-oriented nasty mindset I’ve ever had till date.

Trying to amend my path, and right my wrongs, I again attempt to climb the web-development mountain. This time I have a rather amusing friend to take along with me – html5. Until recently I thought html5 was the good old html with some extra tags. But boy, the <canvas> tag changed all that. The <canvas> tag in html5 basically lets you draw 2d graphics on to the web page using a scripting language such as javascript. And no, I didn’t know any javascript. But in a fortunate coincidence, I stumbled upon (nothing to do with the stumbleupon site though) a java script library for the processing API around java. what? Let me elaborate :

Back when I was still a school boy my dad’s friend introduced me to this wonderful API called processing. Its built on java and it lets you create colorful graphical applications in no time. Compared to the drab console programming (c++) I was learning at school, processing was a very welcome distraction. I was hooked. It was simple, fast, and so much fun that I soon created the classic pong game in processing. Then the wretched entrance exams got in between and I let processing fade away into some teeny tiny corner of my memory.

processing homepage

Here are some examples :


And when I found the javascript library for processing, I had hit my jackpot. Because the library, called processing.js, converts all my processing code into javascipt. That means I can write my pong game in processing (which is really java) and then convert it into javascipt using the processing.js library, and then display it in the canvas.

Now this is a big deal because implementing your applet as javascipt in the canvas does away with the java plugin and the awful loading time. Also, you can write great programs in no time with the processing API and better yet, you can show it off in a WEBSITE!!!!!So I guess practically that makes me a web developer as well! Watch out watch out here I come 😉 . Until next time.