Processing for iBooks and/or JavaScript


I was thinking about how I might be able to create my own interactive elements. So I did a bit of research. If I knew html5 and Java Script I'd be all set. Unfortunately I don't. However, I do know some Processing. I use Processing in my electronics class sometimes (it's very similar to Arduino) and the programming club at my school uses Processing. It turns out there is this great project called Processing.js that will run Processing programs as Java Script. A little more researching on the net and I now have the ability to create my own interactive elements for iBooks 2.0.

First off I like to give credit where it is due. I learned how to do this over at the Tulmult Inc blog. My example file is a modified version of their example file.

  1. Download my example file and unzip
  2. Copy your Processing sketch into the folder (i.e. your sketch.pde file). You can either rename your program to sketch.pde or you can edit the html file and put in the name of your sketch instead.
  3. If you have stuff in a "data" folder take it out and include the files in the root directory and then
     head over to the Quick Start for Projcessing.jsto learn how to pre-load images.
  4. Create an image that matches your sketch size. Not bigger than 1024x640. According to Tulmult this is the limit. However, when I use this size my sketch goes off the bottom of the screen. Note: If your sketch is bigger than your defa
    ult image it will be cropped. I set my image to be 900x640 and then use size(900,630); in my sketch and I have no problems.
  5. Edit info.plist just open in a text editor or Xcode. You can replace the FLOSScience with your name and set the size to be your Default.png size
  6. At some point you might want to update the procession.js to the latest version. If you do you'll also have to update the pointer in the html file.
  7. Double click on the index.html file and make sure it runs in a web browser
  8. Once you've done that rename the folder to be "Name.wdgt"
  9. Insert into iBook with the <html> widget.
  10. If you want to update your widget at a later date you can right click on the wdgt file and select "Show Package Contents"


Subpages (1): Create Your Widget
Comments