Processing

Nedenfor lager vi Hello World, først i Processing for desktop. Så ser vi litt på mulighetene for å lage en applet. Og til sist ser vi hvordan vi kan sette opp en Processing-skisse i et Canvas-element. Det er det siste som er hovedfokus for i dette materialet, i de følgende modulene.

Hello Processing

Når vi laster ned Processing etableres det en katalog med en rekke subkataloger med biblioteker og verktøy. Selve applikasjonen er en (på mitt Windows system) en exe-fil, processing.exe. Et bilde av en sesjon med verktøyet kan se slik ut:

Koden du ser i vinduet er altså Processing-kode. Koden lagres med extension .pde.

Hvis vi kjører dette programmet får vi opp følgende vindu:

Vi holder oss altså her på desktopen, vi lager et Processing-program og vi starter det fra verktøyet. Vi kan fra utviklingsverktøyet få generert frittstående .exe-fil av skissen vår.

Applet

MERK: F.o.m. versjon 2 kan ikke Processing eksportere applets direkte. Årsaken er vel rett og slette at vi i all hovedsak kan oppnå det samme (og mer) ved å kjøre Processing.js. Men det er fortsatt mulig å lage applets. Dersom vi exsporterer skissen vår i (File/Export Application) får vi ut en .java fil som er kildekoden til en Processing Applet. Hvis vi gjør dette med vårt enkle eksempel over så får vi ut følgende Javakode.

import processing.core.*; 
import processing.data.*; 
import processing.event.*; 
import processing.opengl.*; 
import java.util.HashMap; 
import java.util.ArrayList; 
import java.io.File; 
import java.io.BufferedReader; 
import java.io.PrintWriter; 
import java.io.InputStream; 
import java.io.OutputStream; 
import java.io.IOException; 
public class helloWorldSimple extends PApplet {
PImage a;  
public void setup() {
  size(200, 200);
  fill(0);
  textFont(createFont("SansSerif",18));
  a = loadImage("data/bs1.png");
  frameRate(30);
}
public void draw() {
  background(255, 255, 180);
  text("Hello World", 50, 150);
  image(a, 40, 40, a.width, a.height);
}
  static public void main(String[] passedArgs) {
    String[] appletArgs = new String[] { "helloWorldSimple" };
    if (passedArgs != null) {
      PApplet.main(concat(appletArgs, passedArgs));
    } else {
      PApplet.main(appletArgs);
    }
  }
}

Denne koden kan vi kompilere, sammen med de nødvendige biliotekene, core.jar, og få en funksjonell Java Applet. Du kan sjekke ut følgende prosjekt i NetBeans for å se nærmere på dette: https://svn.hiof.no/svn/psource/oopcode/ProcessingApplet

Denne kan vi da selvsagt fortsette å arbeide med hvis vi vil, og vi kan kompilere til jar. Denne kan vi så bruke som et object på vår HTML-side, f.eks slik:

<object type="application/x-java-applet"  
  height="200" width="200"> 
    <param name="archive" value="dist/ProcessingApplet.jar"/>
    <param name="code" value="appletpack.helloWorldApplet.class"/>
</object>

Du kan teste og inspisere kildekoden på denne siden:
TestApplet http://www.it.hiof.no/~borres/dw/processing/test.html

Nå er dette et svært enkelt eksempel uten interaktivitet, og uten annet forhold til omgivelsene enn at det laster et bilde. Vi har selvsagt mye mer å spille på, men forfølger ikke det her.

Hello Processing.js

Når vi skal bruke Processing.js må vi inkludere et ganske omfattende Javascript bibliotek på websiden. Dette kan lastes ned fra Processing.js [3] .

Vi skriver følgende pde-kode og lagrer den som egen fil: hello.pde (merk preload direktivet for å laste bilde):

// preload of images
/* @pjs preload="bs1.png"; */
PImage a;  
void setup() {
  size(200, 200);
  fill(0);
  textFont(createFont("SansSerif",18));
  a = loadImage("bs1.png");
  frameRate(30);
}
void draw() {
  background(255, 255, 180);
  text("Hello World", 50, 150);
  image(a, 40, 40, a.width, a.height);
}

Så lager vi et canvas som benytter seg av pde-fila, og det er det.

<canvas data-processing-sources="hello.pde"></canvas>

Utseendemessig er dette nøyaktig det samme som det vi laget ovenfor, men det er i hvert fall to viktige forskjeller:

• Det er veldig mye lettere å utvikle. Vi slipper å gå veien om applet produksjon.
• Vi har nå enkel tilgang til programmet fra Javascriptkode på websiden.

Vi skal i den neste modulene blandt annet se på noen måter å utnytte det siste på.