Form og farge

Hva

Begreper som du finner i dokumentasjonen til Processing Reference

color(), fill(), noFill(), stroke(), noStroke()
rect(), ellipse(), quad(), arc(),
translate()

Vi bruker translate til å flytte origo. Mer om slike transformasjoner på siden Transformasjon .

Relevante Skisser

geofarge, geofarge2

Farger er basert på at vi blander rødt, blått og grønt. Vi kan definere en farge slik:

color minFarge=color(255, 255, 0);

Jeg har da definert en variabel, minFarge, som en blanding av rødt og blått og ikke noe grønt. Hver komponent kan ha verdier i området 0..255. color(255,255,255) er hvitt og color(0,0,0) er svart.

Vi setter opp en liten skisse med noen former i ulik farge.

/*
Noen forskjellige geometriske figurer
*/
void setup(){
  size(400,100);
}
void draw(){
  // hvit bakgrunn
  background(255,255,255);
  // tegner et rødt rektangel med svart ramme
  stroke(0,0,0);
  fill(255,0,0);
  rect(10,10,50,40);
  
  // flytter origo til høyre
  translate(40,0);
  // og tegner en gul sirkel  
  fill(255,255,0);
  // høyde og bredde er like (40)
  ellipse(50,40,40,40);
  // flytter origo  til høyre
  translate(70,0);
  //  og tegner en gul ellipse  
  fill(255,255,0);
  // høyde og bredde er ulike (40,70)
  ellipse(40,40,60,40);
  
  // flytter origo  til høyre
  translate(70,0);
  // tegner en grønn firkant med rød ramme 
  stroke(255,0,0);
  fill(0,255,0);  
  quad(10, 0, 45, 25, 67, 60, 21, 45);
  
  // flytter origo  til høyre
  translate(70,0);
  // tegner en svart bue uten innhold
  stroke(0,0,0);
  noFill();
  //her er det mange muligheter
  arc(50, 40, 60, 60, 0, PI+QUARTER_PI, OPEN);
  
  // flytter origo  til høyre
  translate(70,0);
  // tegner en blå trekant med svart ramme  
  stroke(0,0,0);
  fill(0,255,255);
  triangle(10, 65, 50, 20, 60, 50);
  
  // ikke gjenta tegningen
  noLoop();
}

Det er noen alternative måter å angi farger på.

Vi kan operere med mange andre typer former enn de som er brukt her.

Vi lager en liten skisse til. Her bruker vi to veldig nyttige funksjoner:

pushMatrix(), popMatrix()

Disse lar oss ta vare på origoposisjoner, mer om slike transformasjoner på siden Transformasjon .

/*
Et ansikt(?)
*/
float ansiktsBredde=160;
float ansiktsHoyde=200;
void setup(){
  size(400,400);
}
void draw(){
  // hvit bakgrunn
  background(255,255,255);
  
  // tegner ansiktet
  stroke(0,0,0);
  fill(255,255,0);  
  // flytter origo til midten
  translate(width/2,height/2);
  ellipse(0,0,ansiktsBredde,ansiktsHoyde);
  
  // husk origo, midt i ansiktet
  pushMatrix();    
    // tegn munnen
    fill(255,0,0);
    translate(0,ansiktsHoyde/4);
    arc(0, 0, 60, 60,QUARTER_PI, PI-QUARTER_PI, OPEN);
  // sett tilbake origo, midt i ansiktet
  popMatrix();
  
  // husk origo, midt i ansiktet
  pushMatrix();    
    // tegner øynene
    fill(0,0,255);
    translate(ansiktsBredde/4,-ansiktsHoyde/8);
    ellipse(0,0,40,40);
    translate(-ansiktsBredde/2,0);
    ellipse(0,0,40,40);
  // sett tilbake origo, midt i ansiktet
  popMatrix();  
  
  // husk origo, midt i ansiktet
  pushMatrix();   
    //tegn en "hatt"
    translate(-ansiktsBredde*0.45,-ansiktsHoyde*0.55);
    fill(100,100,100);
    rect(0,0,ansiktsBredde*0.9,ansiktsBredde*0.4);
  // sett tilbake origo, midt i ansiktet
  popMatrix();  
  // ikke gjenta tegningen
  noLoop();
}