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, der hver sirkel er beskrevet som et objekt.

Resultatet ser i all sin enkelhet slik ut

HTML-siden

<!DOCTYPE html>
<html>
    <head>
        <title>testkuler</title>
        <meta charset="UTF-8"/>
        <script src="https://borres.hiof.no/resources/p5js/p5.min.js"> 
        </script>
        <style>canvas{border:solid blue thin}</style>
        <script src="sirkel.js"> </script>
        <script src="sketch.js"> </script>
    </head>
    <body>
        <div id="canvasHere">
      </div>
    </body>
</html>

Skissen

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

Vi ser at vi plasserer tre sirkler med parametrere (senterangivelse, radius og farge) i en array. I draw ser vi at vi ber disse sirklene om å tegne seg selv.

En sirkel

/*
En klasse for å representere et sirkelobjekt
Et kall på funksjonen sirkel() tjener som konstruktør,
setter opp objektet og returnerer en peker
til dette nye objektet
*/
function sirkel(xpos,ypos,radius,farge){
  this.xPos=xpos;
  this.yPos=ypos;
  this.radius=radius;
  this.farge=farge;
  // så kommer egenskapene til objektet
  // 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 koden på en egen sider:

Tekst: test.html https://borres.hiof.no/pisk/P5js/p5jsskisser/objekter/test.html