Bilder

Hva

Litt om bilder

Begreper som du finner i dokumentasjonen til Processing Reference

PImage, loadImage(),resize()

Relevante Skisser

bilder/bildeVis, bilder/bildeSkaler, bilder/bildeRoter, bilder/veibilde

Processing har mange muligheter for å handtre bilder og bildepunkter. Her skal vi se på det mest grunnleggende. Nedenfor finner du tre skisser som viser bilder på litt forskjellig måte.

/*
 vis bilder
 bildene ligger i data-katalogen
*/
// en array med bilder
PImage[] bilder;
void setup(){
  bilder=new PImage[4];
  size(500,400);
  bilder[0]=loadImage("flower1.jpg");
  bilder[1]=loadImage("flower2.jpg");
  bilder[2]=loadImage("flower3.jpg");
  bilder[3]=loadImage("flower4.jpg");
}
void draw(){
  image(bilder[0], 0, 0);
  image(bilder[1], bilder[0].width, 0);
  image(bilder[2], 0, bilder[0].height);
  image(bilder[3], bilder[0].width, bilder[0].height);
}

/*
 vis bilde
*/
PImage bilde;
int originalBredde;
int originalHoyde;
void setup(){
  size(500,220);
  bilde=loadImage("flower1.jpg");
  originalBredde=bilde.width;
  originalHoyde=bilde.height;
  noLoop();
}
void draw(){
  image(bilde, 0, 0);
  for(int ix=0;ix<5;ix++){
    translate(bilde.width,0);
    bilde.resize(bilde.width/2,bilde.height/2);
    image(bilde,0,0);
  }
}

/*
 Et roterende bilde
*/
// bilde variabel
PImage bilde;  
// rotasjonsvinkel i grader
float v=0.0;
 
void setup() {
  size(200, 100);
  fill(0);
  // last opp bildet
  bilde = loadImage("bs.png");  
  // tegn 30 ganger i sekundet
  frameRate(30);
}
 
void draw() {
  // gul bakgrunn
  background(255, 255, 180);
  // flytt origo
  translate(100,60);
  // øk rotasjons vinkelen med 2 grader
  v=v+2;
  // roter (gradene gjøres om til radianer)
  rotate(radians(v));
  // tegn bildet med senter i origo
  image(bilde, -bilde.width/2, -bilde.height/2, 
               bilde.width, bilde.height);
}

Bilde på bilde

Noen bilder er helt eller delvis transparente, dvs. noen bildepunkter er definert som mer eller mindre gjennomsiktige. Hvert punkt er definerte med bidrag fra fargene Rødt, Grønt og Blått, men i tillegg er det en alfa-verdi som beskriver gjennomsiktigheten. ( For ordens skyld : Det finnes en alternativ fargmodell til RGB). Vi forfølger ikke manipulasjon av bildepunkter her, men Processing lar oss gjøre en masse med bildepunkter, pixler.

Bildene som legges oppå et annet bilde nedenfor er png-bilder med en definert gjennomsiktig bakgrunnfarge som er brukt utenfor konturene av figurene. Slik gjennomsiktighet kan vi spesifisere i de fleste tegneprogrammer.

Det vi lager her blir seende slik ut (forminsket)

/*
 Vi tegne noen bilder oppå et bakgrunnsbilde
 Bakgrunnen er det første bildet i lista
*/
ArrayList<PImage>bilder;
void setup(){
  size(700,700);
  bilder=new ArrayList<PImage>();
  bilder.add(loadImage("data/road.jpg"));
  bilder.add(loadImage("data/jente.png"));
  bilder.add(loadImage("data/leser.png"));
  bilder.add(loadImage("data/man.png"));
  
  // endrer størrelse (prøver og feiler)
  bilder.get(0).resize(width,height-50);
  bilder.get(1).resize(width/4,height/3);
  bilder.get(2).resize(width/4,height/3);
  bilder.get(3).resize(width/9,height/4);
  
}
void draw(){
  // tegner bilder (prøver og feiler)
  image(bilder.get(0),0,0);  
  image(bilder.get(3),width/3,(height-50)-height/2);
  image(bilder.get(1),width/4,(height-50)-height/3); 
  image(bilder.get(2),width/2,(height-50)-height/2);  
  // tekst nederst
  textAlign(CENTER);
  textSize(height/22);
  fill(0);  
  text("Høst, på vei opp til festningen",width/2,height-20);
}