Michael Schieben // rockitbaby.de

Please Note!

There is an ongoing discussion about prcessing.js and the iPhone over at the Processing.js google group.
Update Febuary 2010 May be of interest: iProcessing by Luckybite

Experiment: Processing.js on iPhone

8th Dec. 2009. I am fascinated how fast John Resigs processing.js runs in Safari on the iPhone. I adopted examples from Johns site and made some small modifications, for fullscreen experience and touch events:

Added viewport metatag (see ADC) to fit iPhones width and height and stop the default scaling on pinch
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
Added apple-mobile-web-app-capable metatag (see ADC) to hide the Safari UI Components, when saved on Home-Screen
<meta name="apple-mobile-web-app-capable" content="yes" />
set css body margin to zero
set size of examples in setup() to 320px*460px to fill the whole screen in portrait orientation, without UI Components
size(320, 460);
read through Handling Events chapter at ADC and changed some events in processing.js
- replaced mousemove with touchmove, cause movemove only applies when element is clickable and "finger down, finger up"
- removed mousedown and mouseup events, to avoid canvas element being highlighted by safari

I am really looking forward to implement more iPhone specific events and gestures in processing.js. Then it is easy to build prototype of iPhone apps without using the iPhone SDK.

The Examples

to view on iPhone, add to Home-Screen to see examples fullscreen without UI Components
watch a video on vimeo

Technic

build with processing.js by John Resig
uses examples by Casey Reas and Ben Fry

Source Code

1. changes in processing.js

attach( curElement, "touchmove", function(e) {
      var scrollX = window.scrollX != null ? window.scrollX : window.pageXOffset;
      var scrollY = window.scrollY != null ? window.scrollY : window.pageYOffset;
      p.pmouseX = p.mouseX;
      p.pmouseY = p.mouseY;
      p.mouseX = e.targetTouches[0].pageX - curElement.offsetLeft + scrollX;
      p.mouseY = e.targetTouches[0].pageY - curElement.offsetTop + scrollY;
      e.preventDefault();
      
      if ( p.mouseMoved ) {
        p.mouseMoved();
      }

      if ( mousePressed && p.mouseDragged ) {
        p.mouseDragged();
      }
	});

2. HTML, processing code

<!DOCTYPE html>
<html>
<head>
<title>Distance2D - Processing.js on iPhone</title>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="iprocessing.js"></script>
<script src="init.js"></script>
</head>
<style type="text/css">
body {
	margin: 0;
}
</style>
<body>
<div>
<script type="application/processing">
float max_distance;

void setup() {
  size(320, 460); 
  smooth();
  noStroke();
  max_distance = dist(0, 0, width, height);
}

void draw() 
{
  background(51);

  for(int i = 0; i <= width; i += 20) {
    for(int j = 0; j <= width; j += 20) {
      float size = dist(mouseX, mouseY, i, j);
      size = size/max_distance * 66;
      ellipse(i, j, size, size);
    }
  }
}</script><canvas width="200" height="200"></canvas></div>
<div style="height:0px;width:0px;overflow:hidden;"></div>
<p>
based on <a href="http://ejohn.org/apps/processing.js/">Processing.js</a> by <a href="http://ejohn.org/">John Resig</a><br />
Example written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
</p>
</body>

Please Note!

Experiment: Processing.js on iPhone

The Examples

Related Reading

Technic

Source Code