Analog klokke

Hva

Vi introduserte transformasjoner på siden Transformasjon . Her skal vi se litt mer på en anvendelse av transformasjoner og hvordan vi kan "pushe" og "poppe" dem.

Begreper som du finner i dokumentasjonen til Processing Reference

translate(), scale(), rotate()
pushMatrix(), popMatrix(), pushStyle(), popStyle()

Merk at vi også bruker push og pop for å lagre og reetablere stilangivelser (farge, strektykkelse osv)

Vi handterer tiden med:

second(), minute(), hour()

PVector brukes til å holde et punkt, x- og y-verdi:

Pvector

Relevante Skisser

klokke

Resultatet blir slik:

I koden nedenfor vi du se at jeg er omhyggelig med å markere push- og pop par med innrykk i koden.

pushMarix(); // husk status
    <gjør noen transformasjoner som scale, translate, rotate >
    <tegn noe>
    pushMatrix();// husk status
       <transformer...>
       <tegn...>
    popMatrix(); // resett status 
popMatrix(); // resett status

Dette er ikke nødvendig, men erfaring tilsier at det er veldig fort gjort å introdusere feil ( med ganske merkelige resultater) dersom vi ikke holder styr på hvor vi har origo og vilken vei aksene peker.

Gevinsten med transformasjonsstrategien i dette eksempelet er at jeg trenger ikke bruke trigonometri ( sinus, cosinus) i beregning av viserposisjoner. Det ville selvsagt være fullt mulig, men den metoden vi har brukt er erfaringsmessig enklere, både å skrive og å rette feil i.

Programkoden består av en fil:

/* 
En analog kokke(kvadratisk tegneflate)
*/
// bruker PVector for å ta vare på punkt (x,y)
PVector senter;
float radius;
void setup(){
  size(400,400);
  senter=new PVector(width/2,height/2);
  radius=width/2-10;
  // "tikker" hvert sekund
  frameRate(1);
}
void draw(){
  background(#FEF6E4);
  pushStyle();
  pushMatrix();
    translate(senter.x,senter.y);
    tegnBakgrunnen();
    // tegn sekundviseren
    pushMatrix();
      int s=second();
      strokeWeight(1);
      rotate((1.0*s/60)*TWO_PI);
      line(0,0,0,-radius);
    popMatrix();
    // tegn minuttviseren
    pushMatrix();
      int m=minute();
      strokeWeight(3);
      rotate((1.0*m/60)*TWO_PI);
      line(0,0,0,-radius*0.8);
    popMatrix();
    // tegn timeviseren
    pushMatrix();
      int h=hour();
      strokeWeight(5);
      rotate((1.0*h/12)*TWO_PI);
      // pluss litt av en time
      rotate((TWO_PI/12)*(1.0*m/60));
      line(0,0,0,-radius*0.5);
    popMatrix();
   popMatrix();
   popStyle();
}
void tegnBakgrunnen(){
  pushStyle();
    strokeWeight(1);
    fill(255);
    ellipseMode(RADIUS);
    ellipse(0,0,radius,radius);
    fill(0);
    for(int ix=0; ix < 12; ix++){
      pushMatrix();
        rotate((1.0*ix/12)*TWO_PI);
        translate(0,radius);
        ellipse(0,0,3,3);
      popMatrix();
    }
  popStyle();
}