Since i moved to the sea, but kept my work in Antwerp, i am forced to travel 3 hours by train everyday. Thats a lot of time i normally used to spend at home behind my laptop fiddling on stuff. Because the battery-life of my laptop is limited to 20 minutes, i have to leave it at home. Instead i take my iPad with me.

Unfortunatly the number of programs you can write code with on the ipad are rather limited. I like ftp-on-the-go-pro, though. But you have to upload everything to a webserver to test it, which can take like forever when you are on a highspeed train. So i have build a very simple IDE with html5 with which i can run processingjs code. Processing is a very to-the-point programming language for visualizations. And very easy to learn. Recently it has been ported so it can be mixed in with javascript (thank you, John Resig, your my hero). To learn more checkout processingjs.org.

The code-editor i made is dead simple(no design or css, i let the buttons and stuff depend on your browser). You can add it to your homescreen and it can even work offline. Everything is cached on your machine.

The editor screen looks somewhat like this.

On the top right you have a select box which will let you select the sketch you want to work on. When you first hit the webpage it will automaticly prompt for the name of the first sketch. The big P button on the left saves the sketch and takes you to the player screen. See next image.

When you have no bugs in your program it will play your animation. If you are not satisfied with the result. You can push the big C button and it will take you back to the code editor.

If you are satisfied you can hit the export button on the right. For the export function you will have to be online, because it will save it to my server, where it will be cached so you can share it. The export function will give back a full url, a shortened url and also a small embed script.

That's it. Notify me if you have build something with it and i will put it below this article.

Here is some stuff that i made:

  • 3d scribble a simple way to work with 3d points
  • buildings faking rectangles in 3d (although i assume 3d is not really supported in the javascript version of processing, you can fake it with some math)
  • green nodes some Verlet sticks that can be dragged around
  • multi touch rubber band touch it with multiple fingers and lines get drawn between all fingers (tested it only on iPad)



flash games
flash stuff
_blank sites