Seneca at

On Nov 30, 2010 Seneca was invited to showcase their IT work at The Technicity event’s goals were to acknowledge the talent we have in Toronto and bring forth a plan of action to foster this talent. David Crow talked about how people tend to go to California or Boston to look for talent even though Toronto has some of the best schools.  Seneca was fortunate enough to get invited to the event. I along with Scott Downe and Andor Salga got a change to showcase our work including processing-js, popcorn-js, pointstream, and c3dl. I must say that the crowd was amazing. We got a lot of positive feedback including “this is a jewl… don’t give it away, sell it” — about popcorn. Usually we are faced with people that do not have a good understanding of technology and it’s capabilities. However at technicity we were faced with people that did not understand why or maybe how people can make money doing open-source development.


View all of my blogs

Processing-js 1.0v Release

It has been a while since I have written anything about processing-js. This is not to say that nothing has been happening. In fact the processing team and I have been working hard for the past couple of months to land the 1.0 version release. In this release we focused not only on adding functionality but also documentation. We were getting a lot of comments about the lack of documentation so we wanted to ensure that this stops.  After all everyone expects a 1.0 release to be stable and usable by everyone and not only experts. We have also spiced up the website! It now showcases a sketch on the homepage, a couple more exhibition examples, a fully updated reference page, and a better learning page.  If you are curious about the features we added read the change-log.

You have your own processing sketches?

As I mentioned we are featuring a processing-js sketch on the home page. If you have a sketch that you want people to see, or if you have a project that should be on the exhibition page please let us know. How? You can always file a ticket on lighthouse, comment on this post, or tweet about it adding @annasob to get my attention.

Need help with processing-js?

If you don’t feel like you have a grasp of processing-js or your sketches are simply not working feel free to join irc (just enter a nick and press go) or the processing-js Google discussion group.

Feel free to read our Quick Start guides for JavaScript developers or Processing developers they should help you out a lot.

Mike “Pomax” Kamermans has also written a tone to get people started, check out his guide.

We’re not done yet!

Just because the 1.0 is done does not mean that the project is complete. Our large community is always finding ways to optimize the code. For a look at whats coming in 1.1 release see the lighthouse milestone.



View all of my blogs on Processing.js
View all of my blogs

processing-js editor on your website – a how to

Some time ago I blogged about implementing the code behind using bespin, pjs-box, and of course processing-js. (View the aforementioned blog) Lately I have been getting some comments from people who want to get a local version of this application running either on their own machines or websites. I am writing this blog as a little how to guide to help with this process. Feel free to leave comments if something is unclear.

Getting the Files

You can get the files you need on GitHub via the ‘Download Source’ button, or the right click save link as method. If you are downloading the whole source you will get the whole processing-js package most of which is unnecessary but can always be deleted. Otherwise, you want to first download the processing.js file located in the root and then navigate git to ide folder and download the content via save link as.  Note that I am linking you to my most recent up-to-date version of processing-js as of 09/2010, if you are reading this months after this date you may want to use the master repo. At the end of this step you will have 2 files (processing.js, pjs-ide.html) and 2 folders (css, and js). The js folders may contain 2 sets of files “.js” and “.min.js” you will only need one version. The “.min.js” files are minified versions of the “.js” files. Why have them? The short answer is that they make the program run faster.

Making it Work

Once you got all of the files you are ready to get started. Now the pjs-ide.html is the main page that you see on If you want this page to be a part of another page simply copy and paste the code into the appropriate places of that html file. Once you got the location of the pjs-ide.html settled you will need to change links to script files. Search for the lines below:

<javascript src="js/bespin.min.js">
<javascript src="../../processing.js">
<javascript src="js/loader.min.js">

Change the src=”” to the appropriate path and name, so if you want to use bespin.js instead of bespin.min.js you can.

Custom highlighting/syntax

Currently we have js highlighting and we also added some highlighting for processing functions. You can change syntax in the pjs-ide.html page by searching for:

<div id="editor" class="besp in" data-bespinoptions='{ "settings": { "tabstop": 2 }, "syntax": "js", "stealFocus": true }'>

Read more about this here. However, if you have just a couple of things to add you can follow the syntax and add them to the bespin.js file. The best way to do this is to search all of the instances of pjsconstants and mimic the code.

Thanks all folks. Hope this helps.

View all of my blogs on Processing.js
View all of my blogs

Adding SVG support to processing-js

For the processing-js 0.9.6 release I decided to add SVG support. For those of you unfamiliar with SVG it stands for Scalable Vector Graphics, read the wiki for more info. Basically, it is a xml file format that stores information about a shape and can be generated via Adobe Illustrator.  The best thing about this is the fact that now, instead of drawing a bunch of primitives in processing-js, you can simply make a shape in Illustrator and import it. Check out some of my examples.

In order for me to get this going, I needed to implement shape() loadShape() PShape and PShapeSVG. The “behind the scenes” process is as follows:

  • The svg file is retrieved via XMLHttpRequest().
  • The xml is then parsed using the processing XMLElement.
  • PShapeSVG parseChildren() is then used to go through the XMLElement and parse it’s attributes.
  • Depending on the attributes, the shapes are then rendered using processing vertex(), bezierVertex(), or curveVertex() functions.

Due to the fact that processing-js main goal is to implement functionality that is available in its Java processing counterpart, I tried to mimic its behaviour. That being said I totally overlooked SVG standards outlined in this 3WC online documentation. Mostly, the problem with my code lies in the parsePath() and parsePoly()  functionality. Firstly my code assumes that the coordinates provided by the xml file will contain commas. Secondly,I am using a loop to go through the coordinates while manually increasing the iterator.

Take this code for example:

while (i < pathDataKeys.length) {
 c = p.trim(pathDataKeys[i].charAt(0 ));
 switch (c) {
  case 'M':  // M - move to (absolute)
  cx = parseFloat(pathDataKeys[i + 1]);
  cy = parseFloat(pathDataKeys[i + 2]);
  this.parsePathMoveto(cx, cy);
  i += 3;

Manually increasing i + 3 assumes that the next element will be a control command (M, L, C, etc) when in fact it can be another coordinate. In a couple of weeks I will be updating my code. I will be using Path Data Curve Command documentation and Path Data General information in order to perfect my parser.

Supported Features:

  • Path data instructions/control command including: “M” (move to absolute), “m” (move to relative), “L”  and “l” (line to), “H” and “h” (horizontal line to), “V” and “v” (vertical line to), “C” and “c” (curve to), “S” and “s” (shorthand/smooth curve to), “Q” and “q” (quadratic bezier curve to), “T” and “t” (shorthand/smooth quadratic bezier curve to), and “Z” and “z” (close path)
  • Basic Shapes/ Graphic Elements: line, circle, ellipse, rect, polygon, polyline, path.
  • XML attributes: opacity, stroke, stroke-width, stroke-linejoin, stroke-linecap, fill, and style.
  • Basic Colors: color format: #ffffff, rbg(255,255,255), blue.

NOT Yet Supported

  • Basic Shapes/ Graphic Elements: text, filters, masks, elliptical arc.
  • Color Gradients including Radial Gradient and Linear Gradient.

View all of my blogs on Processing.js
View all of my blogs

Audio Data API ~ Build from Scratch

Installing build tools

Before I can build Firefox i needed to install some build tools. To guide me through the process i used Mozilla’s Documentation. To get started you need Xcode and MacPorts, if you need help installing these visit my post on Installing Git on Mac OS.

To install the build tools run these two commands in your terminal:

  • sudo port sync
  • sudo port install mercurial libidl autoconf213

Building Firefox

Update with Audio Patch

Due to the fact that the audio data api is brand new it is always changing and therefore the version numbers and patch links I am providing may be outdated visit the audio api wiki to check for updates.

  • hg update -r 6d517fe3d7ae (use 683dfdc4adf0 if wiki has not been updated post May 14)
  • get a patch and save it on your computer: patch -p1 < pathToaudio11h.diff

Making Config file

Type the following commands in the terminal. Make sure all ‘ and ” are correct. For more information and if you are not running Mac OS 10.6 visit Build Prerequisites.

  • let’s build Firefox:  echo ‘. $topsrcdir/browser/config/mozconfig’ > mozconfig
  • …in this directory:  echo ‘mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/objdir-ff-release’ >> mozconfig
  • echo ‘mk_add_options MOZ_MAKE_FLAGS=”-s -j4″‘ >> mozconfig
  • echo ‘ac_add_options –with-macos-sdk=/Developer/SDKs/MacOSX10.6.sdk’ >> mozconfig


  • make -f

Make a Package

  • cd objdir-ff-release
  • make package

Run The Browser

You are now ready to run the browser. If you have other versions of Firefox installed you will need to make a new profile.

  • mozilla-central/objdir-ff-release/dist/ -no-remote -profilemanager

View all of my blogs on Audio
View all of my blogs

Installing Git on Max OS

If you have been following my blog you would know that I have been working with Git for a while but on my Vista machine. Getting started with Git can be challenging so in order to be able to easily reproduce my steps I have created 2 separate blogs about it. #1 Setting Up GitHub on Windows #2. Adding Code To GitHub Now that I will be working on an iMax i have decided to do the same. The challenge here is to learn how to install things on the Mac (this is my first week using the not configured Mac OS) and also to figure out how to link Git to my existing repo without braking my Windows configuration.

After some googling i found a helpful site courtesy  of  git: check it out here

Installing xCode

In order to run the make command you need to install xCode . xCode is a developer tool that will enable you to make iPhone and Mac OS applications. In order to download xCode you have to make an Apple Developer Account on their site. Once you are logged in go to the Downloads section and under Snow Leopard Downloads click on the xCode 3.2.2 and iPhone SDK link (note that by the time you do this the version may have changed).

Once the file is downloaded open the containing folder and double click on the .dmg file (i think the icon for all of these file types is a 3D box) Once you have double clicked on it you will get a pop-up window guiding you through the installation. Don’t fly through the process because one of the windows will ask you which features you want to install and not all of them are check-marked by default (i ensured all of them are). Here is a snap shot of the installation video:

When the installation finished you should see a big green check mark (the first time i run the installer it failed and i didn’t even notice). Also, if you click on the magnifying glass located in the top right corner of the desktop and type in xcode you should see it listed as an application.

Download and Install Git

In order to install Git download git-1.7.1.tar.bz2 (version might be different) from Git.

  • Open the terminal application and change to the Downloads directory (assuming that where git downloaded): cd ~/Downloads
  • Unzip the file: tar -xjf git-1.7.1.tar.bz2
  • Switch to the Git directory: cd git-1.7.1
  • Make git and put it in the /opt/git folder for easy removal: make prefix=/opt/git
  • Install the compiled binaries: sudo make install prefix=/opt/git

The next step is installing man pages but since i dont have MacPorts ill go over that first

Installing MacPorts

To install MacPorts visit their download site and under the Mac OS X Package (.pkg) Installer section download the.dmg for your OS (I chose the SnowLeopard one). Once the file downloaded double click on it and an installation window will open similar to the xCode one i described above.

Setting up Man Pages

Git man pages are not yet installed so you should install them because they are very helpful

  • Get them (this takes a while, use -d after port if u get stuck): sudo port install asciidoc xmlto
  • make man prefix=/opt/git
  • sudo make install-man prefix=/opt/git

Public keys

Check out this tutorial on setting up public keys. Now if you already have Git set up on another machine use the tutorial to generate the keys/files and then edit the files manually.


You are now ready to run git commands. Use clone to get a local copy of your repository.

  • git clone git:// dirName

View all of my blogs on GitHub
View all of my blogs

A couple weeks ago members of the processing.js team including myself put together an online Processing-js editor. The editor is still in the early stages but it is the easiest way for developers and the general public to try processing-js. With a few lines of code and a button press, you can now execute your processing-js code without having to download or configure anything.

Wondering how we did it?

We used 2 preexisting technologies. The first one is bespin. Bespin is a web-based code editor that uses HTML5, its easily extensible with JavaScript and it gives you the ability to add themes so that appropriate keywords are highlighted. The second thing we used was Robert O’Rourke’s pjs-box which allows you to execute processing-js code and have the sketch pop up in a separate box.

The Beauty

With the ability to execute processing-js code via the browser, anyone can easily make a sketch without having to set up their environment. Also, if you see a awesome sketch online and are wondering how it works you can simply ‘view source’ and copy and paste the code into the online sketch and play around.

The Future

In the future, we are hoping to add export/save functionality so that people can easily share their sketches with the world. For now, we encourage people to use pastebin and share links to their sketch code via twitter and other social media.

Need Help?

If you have any problems using or just questions or comments about processing-js feel free to join us on irc

View all of my blogs on Processing.js
View all of my blogs