Flytt objekter

Hva

I dette eksempelet skal vi definere et kule-ojekt og vi skal lage en ganske generell situasjon der vi flytter kuler med musa.

Begreper som du finner i dokumentasjonen til Processing Reference

Object, class, new, this
mousePressed(), mouseDragged(), mouseReleased()
dist(), min(), max()

De tre siste funksjonene (dist, max og min) er veldig praktiske for å finne ut avstanden mellom to punkter, og for å finne henholdsvis max- og min- verdi. I dette eksempelet brukes de i kule-objektet for å se om vi har truffet med musa og for å sike oss at vi ikke drar kulene ut av skissen.

Relevante Skisser

dragKule

Resultatet ser slik ut:

Selve kuleobjektet er definert slik:

class kule{
   color farge;
   color fokusFarge;
   float radius;
   float xPos,yPos;
   int nr;
   boolean harFokus;
   // kontruktør, setter opp en ny kule
    kule(float xPos,float yPos, int nr){
      this.xPos=xPos;
      this.yPos=yPos;
      this.nr=nr;
      farge=color(0,255,255);
      fokusFarge=color(255,0,0);
      harFokus=false;
      radius=15;
    }
  // har vi truffet denne kula med musa
  boolean erTruffet(){
    //Sjekker distansen til kulesenter
    return dist(mouseX,mouseY,xPos,yPos) < radius;
  }
  // flytt kula til museposisjon
  // men begrens det til skissen (width,height)
  void flytt(){
    xPos=max(radius,min(mouseX,width-radius));
    yPos=max(radius,min(mouseY,height-radius));
  }
  // denne kula får eller miste fokus
  void settFokus(boolean on){
    harFokus=on;
  }
  // tegn kula
  void tegn(){
    if(harFokus)
      fill(fokusFarge);
    else
      fill(farge);
    ellipse(xPos,yPos,2*radius,2*radius);
    fill(0);
    text(""+nr,xPos-5,yPos+5);
  }
}

og den brukes slik

/*
Vi vil lage en scene med noen kuler
som skal kunne flyttes
Hver kule er et objekt, en forekomst av klasse kule
*/
// kulene, en Arraylist av kuleobjekter
ArrayList<kule> kuleListe;
// kula som flyttes
kule dragged;
void setup(){
  size(200,200);
  kuleListe= new ArrayList<kule>();  
  // plasseer noen kuleobjekter i kulelista
  // i tilfeldige posisjoner
  for(int ix=0;ix < 10;ix++){
    kuleListe.add(new kule(int(random(10,width-10)),
                           int (random(10,height-10)), ix));
  }
  dragged=null;
}
void draw(){
  background(255,255,255);
  // be kulene om å tegne seg
  // den siste i lista kommer på toppen
  for(int ix=0;ix < kuleListe.size(); ix++){
    kuleListe.get(ix).tegn();
  }
}
void mousePressed(){
  // har vi truffet noen kule
  for(int ix=kuleListe.size()-1;ix >=0; ix--){
    if(kuleListe.get(ix).erTruffet()){
      // denne kula får fokus
      kuleListe.get(ix).settFokus(true);
      // husk den
      dragged=kuleListe.get(ix);
      // flytt den bakerst i lista
      kuleListe.remove(ix);
      kuleListe.add(dragged);
      return;
    }
  }
}
 
void mouseDragged(){
  if(dragged!=null)
    dragged.flytt();
}
 
void mouseReleased(){
  if (dragged!=null){
    dragged.settFokus(false);
    dragged=null;
  }
}

Du kan jo kopiere de to filene inn i en katalog som heter dragKule og endre dem slik at du kan flytte rektangler, eller kanskje bilder. Merk at det er en svakhet ved flyttingen: Når jeg presser musa ned i ytterkanten av en kule så flytter kula seg automatisk slik at den får sentrum der spissen på musepekeren er. Dette må du kanskje rette opp hvis du skal flytte større objekter ?