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.
Pingback: processing-js editor on your website – a how to « Anna on Computing – js - dowiedz się więcej!
Great howto Anna. I just wish there was a way to disable hitting CMD+R. Its a reflex reaction from using the native app. Frustrating to lose your work with an accidental key combo.
Great, thanks Anna!
This is very cool, I got it working fairly well but with two problems that I am now searching for options for solving: a “less than” symbol “<" is used in the code I am trying to display on my website. If I replace, in the html of the page, the Hello World code from your example with my code containing the <, that < is replaced with "<" by the browser, and it won't run until the < is manually replaced with <. Is there an alternative to < that will work for processing.js and not confound html?
My second issue seems to be frame rate. Can I increase the frame rate to modify the appearance of an processing animation on a browser? The code runs smoothly on my Processing application, but jerkily, updating the image maybe two times a second.
Thanks again, I really appreciated this tutorial, it got me where I needed to head!
mw
Hey Mike, the processing script shouldn’t interfere withe the html, it should be in a tag. You can set the frame rate of the processing script via . Link me to your page if you are still having trouble.
Thanks Anna,
I had to set this attempt aside for a while, my site is now WordPress based, so I will have to try to get back to where I had gotten via Dreamweaver and see if I am still having those same issues. I am excited to get this working!
Processing.js is now in Android..Check it out: http://code.google.com/p/my-processing/
There is a FREE Ad-supported version in the market as well.