En enkel p5js skisse

Hva

I denne modulen skriver vi om en skisse fra Processing til p5js.

Vi tar utgangspunkt i 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);
}

Vi oversetter den til JavaScript. Merk spesielt funksjonen preload() som garanterer at det som lastes her er på plass før vi kjører setup(). Vi trenger ikke gjøre dette slik her siden vi leser en lokal fil. Dette er imidlertid nyttig når vi henter data fra nettet. Dette foregår med asynkron nedlasting (AJAX) og vi kan kontrollere at ting er på plass før vi begynner å bruke dem. Mer om dette senere.

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);
}

Referanser

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