Processing.js Mini-IDE for iPad, iPhone, Android, Chrome

Ever since I got my hands on a handheld device (my first might have been a PocketPC or a Palm), I wanted to be able to write code in a little editor on the device and run it right there. It seems like a strange urge, except that I grew up in the years that programming tools (Pascal, BASIC, Assembler, LOGO) were sold in stores alongside video games.

See also: The iPad needs its HyperCard

I developed a proof of concept solution for this that runs on the iPad, iPhone, Android devices, and the Chrome browser. It doesn’t store any data in the cloud, so it only needs network access the first time you run it. Everything is downloaded to the device when you bookmark it (Nexus One) or add it to your home screen (iPad/iPhone). All of the programs you write in it are stored on the device: http://code.google.com/p/pjs4ipad/

This doesn’t circumvent any of Apple’s rules: it is all done within the browser using JavaScript, HTML, and CSS. There is no separate app, no need to go through the app store. It’s really just the beginning. My hope is to take the core concepts (using HTML5 technology to locally store a program that’s executed within JavaScript), to support all kinds of programming environments, including visual environments.

This entry was posted in iphone, mobility. Bookmark the permalink.

27 Responses to Processing.js Mini-IDE for iPad, iPhone, Android, Chrome

  1. Pingback: Processing.js Mini-IDE for iPad, iPhone, Android, Chrome

  2. racy_rick says:

    They had a hypercard, it was called Scratch. It was done by MIT. Apple pulled it days ago.

  3. Brian Jepson says:

    @racy_rick, wasn’t that the Scratch player? You couldn’t author Scratch content on the device with it, could you? For that, we’d need something like Modkit, which is an in-browser graphical development environment that uses Scratch-like blocks. I am talking with the Modkit team about the possibilities here.

  4. Dan Higgins says:

    Brian,
    Nicely done! I was just thinking about trying to put together some sort of jsprocessing app for my new iPad and happened to search Google to see if someone else had done it.

  5. Van says:

    brilliant…

  6. oren says:

    what am i doing wrong??
    when i i follow the instructions, and then go offline, i still get “Processing could not be opened because it is not connected to the internet” …
    Help please!

  7. Brian Jepson says:

    Hi oren,

    Try running the app a couple of times, and leave it running (especially if you have a slow connection) for a minute or two just to make sure it caches all of the content, before you go offline.

    - Brian

  8. Oren says:

    Thanks!! works!!

  9. Magee says:

    Thanks so much for this!

    I’m pulling my old work out of boxes and hard drives following an extended hiatus and wanted to refactor a lot of it to run on the iPad. Since the death of my Mac has me back on the PC platform, that was going to prove to be an expensive proposition.

    Nice to know I can take my legacy processing code and test your online editor as a possible solution.

  10. Pingback: Multimedia Magazine van Differentieel en JeeeM

  11. I released an app in Android market to render processing scripts over WebView. Its a single app to manage all your processign scripts. It uses processing.js in the backend. Feel free to download an post comments.

    Here’s the project site: http://code.google.com/p/my-processing/

  12. Len says:

    Awesome, mate – well done!

  13. Neel says:

    Hi Brian,

    I’m really interested in your Processing for iPad method, as I think it may be just what I need to develop a tablet-based data collection tool written in Processing.

    What are the limits of this method, specifically with file IO? Is IO still possible with Processing running only in a browser, or is there any way to get around this problem?

    Thanks a lot,

    Neel

  14. Brian Jepson says:

    Thanks, Neel. I don’t believe file I/O would be possible, but you would have access to HTML5′s Web Storage (http://dev.w3.org/html5/webstorage/) or Web Database (http://www.w3.org/TR/webdatabase/) features.

  15. Neel says:

    Hey Brian,

    Thanks for the reply! I really haven’t had that much experience with HTML storage, so could you point me in the direction of a tutorial dealing with HTML storage integration with Processing?

    Thanks a ton!

  16. Brian Jepson says:

    Hi Neel, we’re actually talking about JavaScript here, so you probably won’t find anything that explains HTML Storage + Processing (although, check out http://processingjs.org/ because you never know).

    When working with Processing.js, keep in mind that it’s running on top of JavaScript. So in theory, this resource should be helpful: http://ofps.oreilly.com/titles/9780596805784/ch05.html

  17. Hi Brain,

    really awesome! Hope everything is ok with you and that you aren’t got kidknapped by Apple to stop the development! Are you still working on it?

    Thanks for the great work,
    Sebastian

  18. Brian Jepson says:

    Unfortunately, I haven’t had the time to work on this. But if anyone’s interested in helping, let me know.

  19. Jackson says:

    Hey Brian, I’ve used this to produce numerous apps, but I’d like to know if it accepts anything other than processing. Thanks!

  20. Brian Jepson says:

    Hi Jackson,

    This only works with Processing, but you probably could get away with plain old JavaScript since that’s what Processing.js is built on.

  21. Lucas says:

    I’ve tried this out on an android phone and one thing that goes wrong is that I’ll tap to edit the text and the text edit screen scrolls down automatically to where I can’t see the cursor and what I’m trying to edit. Another thing is that it crashes frequently upon hitting save and run. That’s in the standard browser, in Opera the save and run button doesn’t do anything.

  22. PhoeniXaC says:

    Hi,
    thank you again and again for your work. I actually created an Android app with appsgeyser of your processing version:

    http://www.appsgeyser.com/getwidget/Processing

    Please write me a mail, whether it is ok for you and whether I can share that app.

  23. Brian Jepson says:

    That’s great, thanks for the link. Please do feel free to share the app.

  24. kirk israel says:

    Playing with the recently released “Codify” which is a very slick editor/IDE that uses Lua made me look into this kind of thing for my favorite lang Processing…

    I wonder what it would take to get a version that supported multitouch and the accelerometer?

  25. Tad Ermitano says:

    Hi, I was wondering if this will allow you to access the touchscreen, so that you can trigger operations by drawing on it?

  26. Lan Rebr says:

    This is nice! I am enjoying it very much.
    I am trying to access content form other web sites using loadStrings and I realized that the sketches created are running from the stone.net domain, so I gees there is no hope trying to access data from other domains. Any suggestions?
    Thanks,
    Lan

  27. Harrison says:

    Just a little plug – I put together an interactive textbook that uses processing for most of its lessons. It has a full IDE built into it that let’s you export your programs as web applications that you can save to the homescreen of your iPad. It’s called Programming – Interactive Textbook, IDE, and Exporter here is a direct link for anyone interested.

    App Link

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>