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

8 thoughts on “

  1. Hi, I have been using sketch.processing weekly for maths in a Primary School in NZ with 9 to 13 year olds. It’s been great and they really like it. Especially the mouseX and mouseY.

    But I would like to be able to simplify it just a little bit more. I know I could create #define code blocks but is there a simple way I could host the #define block like an external stylesheet?
    And what would be the easiest way to create embeds of their project in a website? (Preferably a tumblr or google site).

  2. Hello Anna,
    This is very cool. I am launching an arts and culture website and one of the features is a regular processing article. Your technology really simplifies the endeavor and will allow us to reach more of the less-than-tech-savvy people we would hope to.

    I am trying to see how to get this processing editor to appear on our website, along with the article on processing, and with the article’s code ready and waiting inside it. Any suggestions for how to deploy this to a page? I am very nearly one of those less-than-savvy people I mentioned.

    Excellent stuff, thank you!
    mike wohlwend

  3. Pingback: processing-js editor on your website – a how to « Anna on Computing

  4. Pingback: John Keston Classes » Blog Archive » Week 7

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s