HowTo: Processing.js in iOS

February 5th, 2011 § 3 comments § permalink

Processing.js is a great Javascript-port of the processing language that has reached the version 1.0 milestone a few months ago and allows the easy creation of visually-appealing interfaces. Plus, being based on Javascript and HTML5 it promises the mythical ‘Write once, run anywhere’, even on mobile devices that don’t support Java.

For a recent multi-platform visualization project I wanted to use processing.js so I wouldn’t have to write everything twice. Unfortunately, however, getting processing.js to run on the iDevices doesn’t seem to be that easy. Projects like iProcessing run processing code on the iPhone, but only there (the regular desktop webbrowser version needs additional work). There also exist dedicated rewrites of processing.js that bring with them the disadvantage of every fork: For every update of processing.js, the wrapper also needs one.

Fortunately, it is pretty easy to use any version of processing.js on iOS simply by using a suitable HTML skeleton. Necessary steps are:

  1. Transform touch events to mouse events
  2. Keep MobileSafari from scrolling/zooming

First, we have to let the processing-canvas catch all touch events, so we can call the corresponding processing-functions. We do that simply by adding the corresponding event handlers to it:

<canvas
ontouchstart="touchStart(event);"
ontouchmove="touchMove(event);"
ontouchend="touchEnd(event);"
ontouchcancel="touchCancel(event);"
id="sketch" data-processing-sources="sketch/sketch.pde" width="320" height="480" autofocus></canvas>

Then, we have to write some javascript that converts the touch coordinates to processing’s internal mouse coordinates. We also want to call here the corresponding mouse-function (mousePressed for touchStart and so on). Finally, we also have to keep MobileSafari from using the touch events for scrolling, which is done by calling event.preventDefault() for each event:

<script type="text/javascript">

var processingInstance;

function setProcessingMouse(event){
if (!processingInstance) {
processingInstance = Processing.getInstanceById('sketch');
}

var x = event.touches[0].pageX;
var y = event.touches[0].pageY;

processingInstance.mouseX = x;
processingInstance.mouseY = y;
};

function touchStart(event) {
event.preventDefault();
setProcessingMouse(event);
processingInstance.mousePressed();
};

function touchMove(event) {
event.preventDefault();
setProcessingMouse(event);
processingInstance.mouseDragged();
};

function touchEnd(event) {
event.preventDefault();
setProcessingMouse(event);
processingInstance.mouseReleased();
};

function touchCancel(event) {
event.preventDefault();
setProcessingMouse(event);
processingInstance.mouseReleased();
};

</script>

Here is the complete HTML-skeleton. Make sure that you have processing-1.0.0.min.js in the same directory (you can download it from processingjs.org) and a processing-sketch in ‘sketch/sketch.pde’.

Some caveats: Multi-touch is not supported (all touches beyond the first are ignored) and advanced processing features such as video or 3D probably don’t work. But you can use this barebone-HTML to get your processing-sketches on the web – on all devices.

SubversiveBox: Your own Dropbox for Subversion

January 19th, 2011 § 0 comments § permalink

Dropbox is a great service for using a file repository without the usual hassle of committing and updating (and actually knowing far too much about computers) and they even give you 2GB for free. But understandably, more space costs (the smallest upgrade is currently 10$ for 50GB).

I’m not in the mood for paying when my university gives me a (practically) unlimited SVN-repository for free. As manually committing changes is inconvenient, I decided to write a script that would do that for me.
Some similar approaches that I found while looking for something like it:RubyDrop is a Dropbox-Clone based on Ruby and git (so no SVN), and here’s a similar project for Linux (just syncing, no repository).

The result is SubversiveBox, a small console application that keeps track of your working copy and immediately submits changes. You can download a compiled version here. It needs the SVN command-line tools to work.

It’s very basic, but also very simple to use: Just launch it with

SubversiveBox path username [password]

and it will do the rest. Path is the path to your working copy, username and password are the credentials for your repository. Be careful though, it doesn’t support folder renaming and is still in a very early stage: it might easily get confused and scared and stop working (doing backups of your important files would probably be a good idea – as it always is). Also: It’s open-source, so you can easily fix bugs yourself (yay)!

Have fun!

Where Am I?

You are currently browsing entries tagged with hack at Augenmusik.

  • noise

    Error: Twitter did not respond. Please wait a few minutes and refresh this page.