processing-js editor on your website – a how to

Some time ago I blogged about implementing the code behind sketch.processing.org 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 sketch.processing.org. 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;
 break;
..}}

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