obj_streamgraph-generator: iOS Streamgraph Library

February 7th, 2012 § 0 comments § permalink

Recently, I’ve been playing around with Streamgraphs aka stacked graphs aka stacked area charts. One of the first examples for this type of chart with a bigger traction was the New York Times’ The Ebb and Flow of Movies that showed box office receipts in a very organic and fluid form (which of course makes it also hard to read – but it’s enough to get a rough idea of what’s going on).

In the scientific realm, Lee Byron and Martin Wattenberg discussed Streamgraphs in detail in their excellent 2008 paper Stacked Graphs – Geometry & Aesthetics. Lee Byron also provided an open-source version of the Streamgraph code that he had used for the paper.

Based on that code I’ve created an Objective-C version of the Streamgraph code, geared towards iOS (i.e., iPad, iPhone). You can find it in this github repository. The main work went into changing the Processing/Java-code to Obj-C (not having typed arrays is a pain), and I also produced a demo app that displays Streamgraphs on iPads (uncomment lines in the viewDidLoad-method of the ViewController for other layouts/colors). Here are some examples:
Streamgraph Layout
Stacked Layout
Themeriver Layout

Now, take that code and build something beautiful with it. And let me know if you find bugs :)

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.

Where Am I?

You are currently browsing entries tagged with ipad at Augenmusik.

  • noise

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