Kommunikasjon med Processing skisse

Hva

I denne modulen utvider vi Hello World eksempelet med animasjon og enkel interaksjon med omgivelsene.

Vi lager en processing fil som er slik:

PImage a;  
String helloT="Hello World";
float v=0.0;
void setup() {
  size(200, 200);
  fill(0);
  textFont(createFont("SansSerif",18));
  a = loadImage("bs1.png");  
  frameRate(30);
}
void draw() {
  background(255, 255, 180);
  text(helloT, 50, 150);
  translate(80,60);
  rotate(radians(v+=2));
  image(a, -a.width/2, -a.height/2, a.width, a.height);
}
void setText(String T){
  helloT= T; 
}

Denne kopler vi til et canvas-element slik:

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

Javascriptet som kommuniserer med processing-koden ser slik ut:

function changeText(canvasid,textid){
    var pjs = Processing.getInstanceById(canvasid);
    var t=document.getElementById(textid).value;
    pjs.setText(t);
}

Referanser

Processing.js Processing.js JavaScript interpretator for Processing processingjs.org/ 01-04-2014