Interaktive Objekter

Hva

I dette eksempelet skal vi kunne flytte sirkel objekter ved å dragge med musa.

De viktigste begrepene vi bruker, se Reference

mousePressed(), mouseDragged(), mouseReleased()
max(), min(), dist()

Dette eksempelet bygger på de som ble laget på siden Objekter . Det som er nytt er at vi skal kunne flytte sirkelobjekter med musa. Dette innebærer by funksjonalitet i sirkelobjektene og litt ordning av sirkellista for å holde fokus på den vi flytter. og plassering av kuler i en Array.

Resultatet ser i all sin enkelhet slik ut (dra sirkler med musa)

HTML-siden

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

Skissen

/*
Vi vil lage en scene med noen sirkler
vi kan flytte på, dragge
*/
// sirklene, en array av sirkelobjekter
var sirkelListe=new Array();
// drar vi på en kule
var dragged=false;
 
function setup(){
  createCanvas(200,200);
  // plasser nye sirkelobjekter i kulelista
  // i tilfeldige posisjoner
  for(var ix=0;ix < 10; ix++){
    sirkelListe[ix] = 
        new sirkel(int(random(10,width-10)),
               int (random(10,height-10)),
                    10, color(0,255,255));
  }
}
 
function draw(){
  background(255,255,255);
  // be sirklene om å tegne seg
  for(var ix=0;ix < sirkelListe.length; ix++){
    sirkelListe[ix].tegn();
  }
}
function mousePressed(){
  // har vi truffet noen sirkel ?
  for(var ix=sirkelListe.length-1;ix >=0; ix--){
    if(sirkelListe[ix].erTruffet()){
      // denne sirkelen er truffet og får fokus
      sirkelListe[ix].settFokus(true);
      // flytt den bakerst i lista så den blir tegnet sist
        var tmp=sirkelListe[ix];
        sirkelListe[ix]=sirkelListe[sirkelListe.length-1];
        sirkelListe[sirkelListe.length-1]=tmp;
      // husk at vi dragger
        dragged=true;
      return;
    }
  }
}
  
function mouseDragged(){
  if(dragged)
    sirkelListe[sirkelListe.length-1].flytt()
}
  
function mouseReleased(){
 if (dragged){
    sirkelListe[sirkelListe.length-1].settFokus(false);
    dragged=false;
  }
}

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 en konstrukør
 og setter opp objektet
*/
function sirkel(xpos,ypos,radius,col){
  // egenskaper, attributter
  this.xPos=xpos;
  this.yPos=ypos;
  this.radius=radius;
  this.col=col;
  //--------------
  // funksjoner
  this.tegn=
    function(){
        if(this.harFokus)
            fill(255,0,0);
        else
            fill(this.col);
        ellipse(this.xPos,this.yPos,
                2*this.radius,2*this.radius);
    }
    
  this.flytt=
    function(){
        // holder oss inne i skissen
        this.xPos=max(0,min(width,mouseX));
        this.yPos=max(0,min(height,mouseY));
    }
    
  this.erTruffet=
    function(){
        return dist(mouseX,mouseY,this.xPos,this.yPos) < this.radius;
    }
    
  this.settFokus=
    function(on){
        this.harFokus=on
    }
}

Du kan inspisere koden på en egen sider:

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