September 2012 NEWS I joined Christophe and Johannes as partner at precious design studio. You'll find my latest activity on http://precious-forever.com.

Below are projects I created between 2009 and 2012.

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:

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

Related Reading

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>