Processing.js – A Plan to Push and Pop Styles

1 What this is all about

Processing is a Java-based programming language used to display rich graphical content, like animations, on web pages. The content was embedded on web pages using Java applets. Since the time of the original implementation improvements in web technology, such as the capability of web browsers and JavaScript execution speed, has opened the possibility of accomplishing Processing's objective without Java.

Processing.js (Pjs) is a JavaScript port of Processing currently in development. Users need only a sufficiently capable web browser to view the content; there is no need for Java or Flash, their plugins, and the overhead and possible software troubles arising from using those plugins. Matters are also simplified for developers who only need Pjs's JavaScript library.

A convenient collection of links to mailing lists and code repository may be found here. A specific list of "things needing code monkey labour" may be found on MozillaWiki

2 Choosing the road frequently travelled

For DPS909 I and my fellow code monkeys-in-training were directed to jump into a Mozilla-related project. As the old (and perhaps overused) saying goes: I hear and I forget, I see and I remember, I do and I understand. Appropriately for a course about open source development, we were going to do it, and, hopefully, emerge from the experience with greater understanding.

One available set of projects fell under Pjs. Within that project I chose to work on porting pushStyle() and popStyle() from Processing to Pjs.

Before going on I should disclose that I like Java. It's the first object-oriented language I picked up. At the very least, reading the code to be ported would be easier. However, Java was not the major reason for my project choice; that language plays a relatively diminutive part in the overall task. The major part is reading and writing JavaScript which. I have very little experience with JavaScript and working on Pjs presented an opportunity to rectify this for fun and profit! Oh, and there would be ancillary social benefits such as being useful in the process.

Aren't win-win situations wonderful?

I chose tasks from the "miscellaneous feature" list rather than the "3D features" list because the latter constitutes a "here be dragons" area for me. When the course concludes and my work is evaluated, I would rather submit better material and feel silly for choosing something that did not wander far from my starting experience, than submit sub-par material and experience the self-recrimination of having barrelled toward the "bridge too far".

Discretion is the better part of valour.

3 The information must flow

So that a record of progress, U-turns, and backtracking, may be preserved for future generations to point and snicker at, I will be maintaining a wiki page. There is also a branch of the development tree. Hopefully there will be weekly posts on this blog concerning the project work.

4 If everything is going according to plan, it's a trap

As per the requirements for DPS909 the aim is for three "point releases" within the next two and a half months. This means version 0.3 will be available in early December. Per the expectations of the course it is not intended to be the final product although one hopes it will be of sufficient quality for somebody to pick up where I leave off, providing I do not take DPS911 next semester.

The following is a brief overview of the objectives and predicted issues for the point releases.

4.1 Version 0.1 (October 19)

4.1.1 What it to be done

• Add a 2D array of style variables with each "row" representing a style set.
• Add a variable tracking the style set currently in use. This will be technically superfluous during the interim since only a single style set will be used.
• See if we need functions to save the current style variable values or load a set into the variables. Might be overkill.

4.1.2 Gathering the pieces

• Install JavaScript Development Tools for Eclipse
• Try Egit with github.
• Check out Pjs using Egit.
• Check out Processing code for reference.
• Learn enough Processing to set up examples.
• (Re)learn JavaScript
• Use Processing to ensure the visual results are the same.
• Firefox, Internet Explorer (with Explorer Canvas), Opera, Safari, etc., on as wide a range of operating systems as possible, for testing

4.2 Version 0.2 (November 16)

4.2.1 What it to be done

• Complete implementing multiple style set storage and conversion of existing code.
• Implement pushStyle() and popStyle().

4.2.2 Gathering the pieces

• Reference Processing code to ensure similar behaviour.
• Set up a web page using canvas and Pjs for testing purposes.
• Use Processing to ensure the visual results are the same.
• Firefox, Internet Explorer (with Explorer Canvas), Opera, Safari, etc., on as wide a range of operating systems as possible, for testing

4.3 Version 0.3 (December 7)

4.3.1 What it to be done

• Complete implementing pushStyle() and popStyle().
• Firefox, Internet Explorer (with Explorer Canvas), Opera, Safari, etc., on as wide a range of operating systems as possible, for testing

4.3.2 Gathering the pieces

• Reference Processing code to ensure similar behaviour.
• Use Processing to ensure the visual results are the same.
• Firefox, Internet Explorer (with Explorer Canvas), Opera, Safari, etc., on as wide a range of operating systems as possible, for testing

5 From here on in it's who you know

I briefly "spoke" to Al MacDonald (F1LT3R) on IRC (#processing.js on moznet). He had no objections and suggested pushStyle() and popStyle() might be placed after pushMatrix() and popMatrix() in the library, and that I should not hesitate to ask if I needed help.

6 There's no party like the...

I anticipate that others may assist in testing. I have learned from first hand experience that supposedly "identical" browsers on different operating systems may behave differently. (I recall sometime in the past that the "same" version of Firefox rendered a page differently on Windows than on Debian. In hindsight, it may have been something with the libraries Firefox depended on in Debian.) I do not have immediate access to the full range of combinations and it would be good to have a list of browser misbehaviour, even if making workarounds for some of them is impractical.

Then there is a matter of reviewing the code. There will no doubt be my unwanted idiosyncrasies and stealthy errors in the code, and these will be easier for others to pick out.

When my familiarization with the Pjs library improves I hope to have time to take cracks at some of the smaller functions that are still outstanding.

7 What could possibly go wrong?

There is no one element if the project, or combination thereof, that strikes me as requiring more than the usual caution. There are sufficient examples and documentation to make learning Processing and JavaScript, at worst, a trial-and-error proposition. Setting up new tools, like the Eclipse plugins, may involve some work, but if it goes badly they may be discarded without crippling the project; strictly speaking they are not essential and a normal text editor will do. Within the project I fear mainly the usual obscure bugs that resist solution, but these are not things that are generally "prevented" so much as "solved".

The greatest concern is when the project is considered in conjunction with other exterior projects. Already other courses are handing out assignments that are far more involved than my portion of Pjs. The question is not whether there is enough time to complete them all, but rather how many mornings I may resemble a shuffling zombie. I suppose it's a good thing I take public transit to school!

8 Once started, there is no going back

So this is it, open source software project number one! From this point shall I achieve fame, fortune, world domination...! Or I could just concentrate on getting through the semester and hoping my code passes muster. Yes, that sounds like a much better idea.

Let the good times roll.