Transformasjoner

Hva

Når vi skal tegne er det ofte en fordel å kunne flytte origo. Det er dessuten ofte greitt å kunne endre akseretninger og å skalere aksene.

Begreper som du finner i dokumentasjonen til Processing Reference

translate(), scale(), rotate()

Ofte er det dessuten slik at vi gjerne vi oppheve slike transformasjoner når vi er ferdige med å tegne en detalj. Dette kan vi kontrollere med:

pushMatrix(), popMatrix())

Navnene kan virke litt sære, men de har sin rot i måten disse transformasjonene realiseres i koden (matriseberegninger).

Relevante Skisser

flagg

Gangen i arbeidt blr ofte slik:

// husk status
pushMarix();
<gjør noen transformasjoner som scale, translate, rotate >
<tegn noe>
// glem transformasjonene og gå tilbake til status før siste pushMatrix
popMatrix();

Vi ser på et eksempel. Vi vil tegne det italienske flagget i ltt forskjellig størrelse og posisjon

Programkoden består av to filer:

/*
 Tegner italienske flagget flere ganger
*/
void setup(){
  size(300,200);
}
void draw(){
  background(255,255,255);
  // husk origo og akseretninger
  pushMatrix();
    translate(10,10);
    italia();
    translate(150,50);
    scale(0.5,0.5);
    rotate(PI/4); // 45 grader
    italia();
    // glem de siste transformasjonene
  popMatrix();
  // bytt retning på y-aksen
  scale(1,-1);
  translate(10,-150);
  italia();
  noLoop();
}

og selve flagg uttegningen:

/*
 Tegner det italienske flagget
 Høyden er 2/3 av bredden
*/
void  italia(){
  float bredde=100;
  float hoyde=bredde/3*2;
  float kolonneBredde=bredde/3;
  // ikke noen strek, bare farger
  noStroke();
  // grønn kolonne
  fill(0,255,0);
  rect(0,0,kolonneBredde,hoyde);  
  // hvit
  fill(255,255,255);
  rect(kolonneBredde,0,kolonneBredde,hoyde);  
  // rød
  fill(255,0,0); 
  rect(2*kolonneBredde,0,kolonneBredde,hoyde);
  // svart strek rundt hele flagget
  stroke(0,0,0);
  noFill();
  rect(0,0,bredde,hoyde);
}

Ekserimenter med dette eksempelet. Kopier de to kodebitene, legg dem som hver sin fil (italia.pde og flagg.pde) i en mappe som heter flagg, og åpne flagg i Processing-editoren.