Playing with Processing.js

My last blog entry, I started my initial project plan.

And today I'm starting the process of learning Processing.js.

• get the basics of the syntax


• how to run a program in a canvas tag


• and understand the basic, mandatory methods used to run a program

Upon going to the Processing.js home page I saw a link at the bottom "Try out some Processing code!". What this is, is a page that you can edit, and immediately view the results of your changes.

First thing I noticed is that it uses setup() and draw(), which seem to be pretty mandatory methods. setup() is pretty self explanatory, sets up the canvas, and is run once as soon as the canvas loads. The second method, draw() is called based on the interval set in frameRate(), which in the default case was set to 20, that's in seconds. So, the example is running at 20 frames per second, or, a better way to put it, it's calling the draw() method 20 times per second.

The first thing I did was change the frames per second to 2, my results were as expected, slow. Next I tried a large number, 99999, and it seemed fast, but not nearly as fast as I expected, so I tried 30, which I believe to be the frame rate used in TV, and it seemed to be as fast as 99999. I later noticed in the frameRate() method, that 60 was default, and if the local machine could not handle whatever is requested, it will simply not be achieved. I tried 30 and 60, and noticed a slight difference. But, obviously not as noticeable of a difference between 1 and 30.

I then noticed in the draw() method, there was background() and random(). I promptly changed the background(50) to background(random(9999), and it did not work well, as expected. There are not 9999 potential colours, and anything over 255 would default to 255. I then played around with stroke() and tried some random colours there too. I found out that stroke sets the colour that is to be used while drawing to the screen.

I also moved the background() method from draw() into setup(), and the results were logical. It didn't remove the old lines, and they kept drawing blue lines to the screen until the screen was blue.

Then removed background() completely, by commenting it out with //. It defaulted to white.

Honestly, with my experience in other programming languages, this languages seems very straight forward and within about an hour I was done playing with it and ready to start researching the bugs I was assigned.

One final not about learning Processing.js, this is a great place to get detailed into on the methods used.