Monday, March 21, 2011

Visual Programming On The iPad

Processing is so appealing because it enables you to rapidly sketch out and play with visual programming ideas without all the overhead of a traditional graphic programming language, which is why Processing projects are often referred to as sketches. Until now this was done on your PC and required a download of the native Processing application.

Programming on my iPad, directly in the web-based IDE, then testing out the sketch by running right in the web page, no plug-in needed, thanks to HTML5's canvas element and processing.js

You can now code Processing sketches right in your browser, even on your iPad. As the Processing.js website explains:
Processing.js turned your once Java-based code into JavaScript, and your graphics into HTML5's 'canvas'. As a result, anything you read on the web about dynamic web programming, AJAX, other JavaScript libraries or APIs, all of it applies to your sketch now. You aren't running code in a box, cut-off from the rest of the web. Your code is a first-class member of the web, even though you didn't write it that way.
I love it!

Try it out for yourself (on your iPad!) with the code below (via Processing.org). Copy and paste into the code area here and press the run button. Use the internet Wayback machine to go back in time to the Web IDE that worked on the iPad (why'd they change it?!) here, and then copy code into the text area and press the run button.

int number;
int rectWidth;
int offset;
void setup(){
  size(245,245);
  background(255);
  fill(0);
  noStroke();
  number = 1515175624; //magic constant!
  offset = 5; //ofset from the edge of the window.. sort of
  rectWidth = height/8-offset; // width of the boxes
}
void draw(){
  background(255);
  int temp = number;
  for(int y = 0; y < 8;y++){
    for(int x = 0; x < 4;x++){
      if(temp%2 == 0){
        fill(255);
      }else{
        fill(0);
      }
      rect(offset*4+(width-height)/2+x*rectWidth,offset*4+y*rectWidth,rectWidth,rectWidth);
      rect(-(width-height)/2-offset*4+width-(x+1)*rectWidth,offset*4+y*rectWidth,rectWidth,rectWidth);
      temp = temp >>1;
    }
  }
 //number = int(random(-(MAX_INT)))+int(random((128))); //uncomment this - spit brix
}
void mousePressed(){
  number = int(random(-(MAX_INT)))+int(random((128)));