Processing Embedding

by Golan Levin @ 10:31 pm 9 January 2011

We’re using the ProcessingJS WordPress Plugin to embed the new Processing.JS applet format. To use it, you’ll notice a ‘processing’ button when you’re writing or editing a post in HTML mode. Clicking it will insert a very simple Processing sketch into your post. You can use it as a template or write your own from scratch. You’ll find examples (with code) of what can be done here: Processing JS Demos.
Here’s a Processing.JS example:

The code for this program is here. Note that the code is embedded into this blog post using the WP-Syntax Plugin for WordPress, with the embed tag setting lang=”java” .

//Info: http://processingjs.org/reference
void setup() {
	size(200, 200);
}
void draw() {
        smooth();
	background(#ffffff);
        rect(0,0, width-1,height-1);
	ellipse (100, 100, random(80), random(80));
	line (0,0, mouseX, mouseY);
}

To embed a Java-based Processing applet in a page: first check that ‘use multiple .jar files’ is selected in Processing’s small preferences control panel; then export the applet; then upload the ‘.jar’ file with the title of your script using the pointy “Add Media” button in the WordPress text editor. Add the processing shortcode to the post or page that the applet should appear in. The ‘width’, ‘height’, and ‘method’ parameters should also be set. And make sure your name appears in your applet’s .jar file, so that your .jar files aren’t fighting it out for the same filename in the WordPress uploads directory!

Here’s an example of a Processing applet embedded in this WordPress page, using the same code as above:
[processing width=”450″ height=”300″ file=”http://golancourses.net/2011spring/wp-content/uploads/golan-levin-assignment1.jar”]

Please note the following (courtesy Mauricio):

  • Using nameofproject.jar in the file attribute is not enough; you must include the full path, as in: http://path/to/jar/nameofproject.jar
  • It is important to make sure that you are not using smart (curved) quotes for attribute properties. Instead, use straight quotes for any attribute=”value” fields.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
(c) 2024 Interactive Art & Computational Design / Spring 2011 | powered by WordPress with Barecity