This quarter I have been taking CSC484 at Cal Poly. CSC484 is a class offered by the computer science department titled User Centered Interaction Design, and is taught by Dr. Franz Kurfess.

CSC484 changes every time it is taught, mainly due to the fact that computer interaction is something that is constantly changing. New devices and designs are being invented daily, which have the possibility to dramatically change the space.

This quarter, our class is working with Yahoo, developing possible UIs for some of their internal tools. My team, team hzzah!, has been tasked with making a workflow management tool. Basically, Yahoo needs a better UI than the current gigantic table they have for tracking instances of various workflows/processes that are being enacted by their IT team. To solve this problem, we are trying to design a few different interfaces. One of these is a circle with spokes to describe an entire process and all of the instances of that process that currently exist.

After a little searching, my team member Reed stumbled across Processing.js. This little javascript framework lets you do all kinds of fun HTML5 canvas stuff in a nice abstract way. Before I walk you through it, I figured I would dump a bunch of it in front of you.

Liquid error: No such file or directory - posix_spawnp

Cool right? There are some interesting things to notice about this code. First of all, when the page is loaded, the setup function is called. This function should in theory instantiate your classes and set things that probably will not change, like background color.

Next checkout the draw function. This is an interesting function because it is called every time a frame needs to be rendered, which since we have our frames per second set at 60, this function is called 60 times every second. This can present some interesting concurrency problems, because if you loop through a group of functions that modify similar areas of the page (like write text to a DOM element) you will quickly notice that they are stomping on each other.

Processing.js works using a cartesian plane, so if you take a look at all of the functions on the processing.js reference page, most of them are pretty straight forward. For instance, to draw any sort of quadrilateral, you just need the four points, and processing.js will just draw it for you.

Finally, once you have your code written, you probably want to be able to display it one a page. The processing.js package comes with a very nice little script to insert your processing code into a canvas element. The file is called init.js in the archive you can download, but I’ve also included it here, just in case.

Liquid error: No such file or directory - posix_spawnp

In reality, that’s all you need to know. I’ve found processing.js a really fun language to code in, because it works well when using mooTools or jquery or any other javascript framework. Probably my biggest issue is that I’ve totally forgotten how to use trigonometry in the years since highschool, so I’ve spent a decent amount of time on Wikipedia and StackOverflow re-learning my maths.

Hasta,
/Nat