Push og Pop

Hva

I p5 finner vi to funksjoner som er svært nyttige når vi skal lage en skisse, se Reference

push(), pop()

Disse er nyttige i to sammenhenger: Når vi flytter origo og endrer akseretninger, og når vi spesifiserer en rekke stilegenskaper.

Transformasjoner

Når vi skal tegne er det ofte en fordel å kunne flytte origo. Det er dessuten ofte greitt å kunne endre akseretninger og å skalere aksene. Vi har noen verktøy for dette, se 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 push() og pop().

Push oppretter en status med gjeldende verdier, og pop resetter til status før siste push. Disse to, push og pop, må altså matche hverandre.

Gangen i dette blir ofte slik:

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

Styling

Vi har samme strategi når vi setter en rekke stilegenskaper. De som er angitt i Reference er:

fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), 
imageMode(), rectMode(), ellipseMode(), colorMode(), 
textAlign(), textFont(), textMode(), textSize(), textLeading()

Også her blir det slik at vi lager en strategi som følger:

push(); // husk status
  <set opp stil som fill(), stroke() >
  <tegn noe>
pop(); // glem settingene og gå tilbake til status før siste push

Eksempel

Websiden er minimalistisk:

<!DOCTYPE html>
<html>
  <head>
    <title>trans1</title>
    <meta charset="UTF-8"/>
    <script src="https://borres.hiof.no/resources/p5js/p5.min.js"> 
    </script>
    <script src="sketch.js"> </script>
  </head>
  <body>
  <div id="canvasHer"></div>
  </body>
</html>

og scriptet er slik:

var sideKant;
var svart;
function setup(){
    var canvas = createCanvas(200, 200);
    canvas.parent("canvasHer");
    sideKant=30;
    svart=color(0,0,0);
}
function draw(){
    background(255);
    fill(svart);
    translate(20,20);
    push();
        push();
            translate(100,100);
            tegnBoks(color(255,0,0));
        pop();
        tegnBoks(color(0,255,0))
        strokeWeight(3);
        push();
            translate(0,100);
            scale(0.5,0.5);
            tegnBoks(color(255,255,255));
        pop();
        translate(100,10);
        rotate(QUARTER_PI); //45 grader
        tegnBoks(color(0,255,255));
    pop();
}
function tegnBoks(farge){
  push();
    fill(farge);
    rect(0,0,sideKant,sideKant);
  pop();
  //markerer origo
  ellipse(0,0,10,10);
}

Som du ser har jeg brukt innrykk i koden for å holde styr på posh - pop par. Dette er ikke nødvendig, men det hjelper når vi skal lese, og eventuelt korrigere, koden.

Du kan også løsningen på en egen side:
test.html https://borres.hiof.no/pisk/P5js/p5jsskisser/pushpop/test.html

Det kan være en god ide og kopier dette eksempelet, eller lag noe lignende, og eksperimentere litt med transformajoner og stiler.