Embedding a Processing Sketch

Embedding a Processing sketch

  • First you need to export your Processing Sketch to a web page
  • Then you need to upload it to your web area
  • Finally you need to embed some html in your site

Exporting a processing sketch

  • Open up your sketch in Processing
  • File : export
  • Will create a new directory with an html file and a jar file
  • Copy this directory to somewhere in your public_html
  • you can now open it in a browser
    • http://doc.gold.ac.uk/~[username]/applet
    • or replace “applet” whatever directory you put it in

Exporting a processing sketch

  • What this does is turn the sketch into a java applet that can be viewed on the web
  • the jar file sketchName.jar is the applet itself
  • the html file is a web page that includes the applet
  • To get the sketch onto your site we need to copy some of the html code into wordpress

Embedding a Processing sketch

  • The html page in the sketch directory uses a local path to find the applet
  • This means it looks for it in the same directory as the html file
  • The applet won’t be in the same directory as wordpress
  • This means you need to give it a full url for the applet
  • Put your applet directory somewhere web accessible (e.g. in public_html)
    • Make a note of the full web url to the sketchname.jar file
    • Go to the index.html file in your applet directory
    • change any references to the sketchname.jar to the full web url
  • If you have a sketch that uses external libraries (e.g. OpenGL) you may need to do this for all jar files listed in the html

Embedding a Processing sketch

  • First we need to install a new WordPress plugin
  • This is because WordPress, by default, doesn’t allow you to include arbitrary html in a post
  • The plugin is called “Simple Code Embed”
  • To install a plugin do the following:
    • In the wordpress admin page go to the Plugins menu
    • Choose Add New
    • Search for “Simple Code Embed” by name
    • Click the install link for the plugin when it comes up
    • Then click install now
    • fill in your login details: the hostname is igor.gold.ac.uk
    • the username and password are your normal Goldsmiths ones
    • the connection type is ftp
    • Once it has installed, click activate

Embedding a Processing sketch

  • Start a new Post in WordPress
  • You add the code in a “Custom Field”
    • below the text editing widget there is a section for adding custom fields
    • Each has a name and a value
    • The name should be CODE1 (you can embed more items in CODE2, CODE3 etc.)
    • The value is the html code you want to add

Embedding a Processing sketch

  • Go to the index.html file in your applet directory
    • It should have a div in it called [sketchName]_container
    • Copy this and its content
    • Paste it into the value box of your custom field
  • You can now put the sketch anywhere you want in your post
    • Just put the text %CODE1% where you want it.
PDF Printer    Send article as PDF to