Processing.js
Processing
Børre Stenseth
p5js >Objekter

Objekter

Hva

Vi kommer ikke så langt i produksjon av ikke-trivelleI løsninger uten å kunne bruke et objektbegrep. I denne modulen ser vi på en minimalistisk løsning med en array av sirkler (kalt kuler).


Sketchen ser slik:

_sketch.js
//En skisse med noen kuler
 
// kulene, en array av kuleobjekter
var kuleListe;
function setup(){
  var canvas = createCanvas(200, 150);
  canvas.parent('canvasHere');
  // plasser nye kuleobjekter i kulelista
  kuleListe=new Array();
  kuleListe[0]= new kule(50,50,20,color(0,255,0));
  kuleListe[1]= new kule(50,100,20,color(0,0,255));
  kuleListe[2]= new kule(100,100,20,color(255,255,0));
}
function draw(){
  background(255,255,255);
  // be kulene om å tegne seg
  for(var ix=0;ix < kuleListe.length; ix++){
    kuleListe[ix].tegn();
  }
}

Kuleobjektet er beskrevet slik:

_kule.js
/*
En klasse for å representere et kuleobjekt
Et kall på funksjonen kule() tjener som konstruktør,
setter opp objektet og returnerer en peker
til dette nye objektet*/
function kule(xpos,ypos,radius,farge){
  this.xPos=xpos;
  this.yPos=ypos;
  this.radius=radius;
  this.farge=farge;
  // tegn-egenskapen er implementert 
  // som en funksjonen
  this.tegn=function(){
        push();
        fill(this.farge);
        ellipse(this.xPos,this.yPos,
                2*this.radius,2*this.radius);
        pop();
    }
}

Du kan inspisere denne strukturen på denne siden:
test.html https://borres.hiof.no/wep/proc/p5js/objekter/test.html

[1]
Referanser
  1. Processing.js Processing.js JavaScript interpretator for Processing processingjs.org/ 01-04-2014
p5js >Objekter