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
![En Processing sesjon proc1](proc1.png)
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:
![Processing sier hallo proc2](proc2.png)
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.
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):
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å.