En enkel p5js skisse

Hva

I denne modulen skriver vi en enkel skisse som kommuniserer med et input-element

Skissen er slik;

var a;  
var helloT="Hello World";
var v=0.0;
function preload(){
    a = loadImage("bs1.png");  
}
function setup() {
    var canvas = createCanvas(200, 200);
    canvas.parent('canvasHere');
    fill(0);
    textFont("SansSerif",18);
    frameRate(30);
}
function 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);
}
function setText(T){
    helloT=T
}

Javascriptet som kommuniserer med processing-koden ser slik ut:

function changeText(textid){
    var t=document.getElementById(textid).value;
    setText(t);
}

Referanser

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