Tips och facit till laborationer

Här finns facit resp. lösningsförslag till laborationer som finns i de olika kapitlen på denn sajt.

Installation

lab 1

size(bredd, höjd) bestämma storleken av körningsfönstret.
background(gray-value) ange färgen för bakgrunden. Om det är bara ett tal så brukar det vara grå. 0 är helt svart 255 är helt vit. Större än 255 blir det färg men vi kommer snart lära oss bestämma färg på ett annat sätt
Dessa instruktioner rita en rectangle, ellipse och linje. Vad de enstaka parameter borde framgår när man följer länkarna. Målet med dennalaborationen är att lära sig hantera den engelska online handboken för språket.
Exempel för Trafikljus:

    size(300, 500);
    background(102);

    rect(90,80,120,400,0);
    ellipse(150,150,100,100);
    ellipse(150,270,100,100);
    ellipse(150,390,100,100);

Hårkors

void setup() {
 size(400, 400);
}

void draw() {

  ellipse(200,200,150,150);
  ellipse(200,200,100,100);
  ellipse(200,200,50,50);

  // width och height är inbyggda värden.
  line(width / 2, 100, width/2 , 300); 
  line(100, height / 2,300, height /2 );

}

Grunderna i Processings grafik

lab 1

Exempel på ett trafikljus.

//Variabler

void setup(){
size(300, 500);
background(102);
}

void draw(){

//huset
fill(0,50,0);

//vit kant kring alla element
stroke(255,255,255);
rect(90,80,120,400,0);

//röd 
fill(255,0,0);
ellipse(150,150,100,100);

//gul
fill(255,255,0);
ellipse(150,270,100,100);

//grön
fill(0,225,0);
ellipse(150,390,100,100);
}

Variabler

Laboration 1

Det är bara ett test om tillägget wnd.pde fungerar som det ska.

Laboration 2

Observera att kvoten är allt ett heltal. Om det ska bli matematisk rätt så ändra alla int till double


    void setup(){
        int  tal1 = QuestionInt("Första tal?");
        int  tal2 = QuestionInt("Andra tal?");

        int res = tal1 + tal2;
        println("Summan är " + res);

        res = tal1 * tal2;
        println("Produkten är " + res);

        res = tal1 / tal2;
        println("kvoten är " + res); 

    }

Även om man går över gränsen så blir det inte fel, programmet avbryts inte. Tänk mer att en variabel fungerar som en klocka. om man går över gränsen så börja man om med på starten av talområdet dvs negativ.

void setup(){
    int  tal1 = QuestionInt("Stort tal?");

    int res = tal1 * 2;
    println("Det dubbla är " + res);

}

Laboration 3

Heltalsdivision

Även om res är av typen double så är resultatet ändå 3 för att det bildas kvoten av två heltal.

//Exempel heltalsdivision

    void setup(){
        int a = 15, b = 4;

        double resultat;

        resultat = a / b; // resultat innehåller ändå 3 !!!

        println("15 delat på 4 är " + resultat );
    }

Äggkartong

Det här ett lösningsförslag till den utökade uppgiften. Ta bort rad 4, och ersätt kartongstorlek med 12 för att få en lösning för första delen i uppgiften.


    void setup(){
    size(500,200);
    int antalEgg = QuestionInt("Hej bonde, hur många ägg var det i morse?");
    int kartongStorlek = QuestionInt("Hur många ägg per kartong");

    int antal = antalEgg / kartongStorlek + 1; 

    textSize(32);
    text("Du behöver " + antal + " kartonger.", 10,80);
    }

Lösningsförslag för rektangel i rörelse

Utan background(100): Det ritas fler och fler rektangler. background ser till att allt raderas. i-nstruktionen har samma funktion som en rektangel lika stor som fönstret, typ rect(0,0,width,height)
Snabbare: Ändra x++ till x+= 2 eller dylikt
Långsamare: Antingen sänka framrate med tex en framrate(20) i setup-blocket. men det påverkar hela programmet. Bättre att ändra x med mindre än 1. Men det kräver att x är av typen float
Se nedan för alla ändringar:

        //Variabler
    float x = 100;
    float y = 200;

    void setup(){
      size(480,360);
    }

    void draw(){
      background(100);
      rect(x,200,50,50);
      x+= 0.3;

      ellipse(200,y,40,40);
      y -= 1.5; 
    }

Selektion

laboration 1

Rektangel börja om

När x överstiga 300 så sätts x tillbaka till 100.

    //variabler
    int x = 250;
    void setup(){
      size(480,360);
      fill(0,0,250);
    }


    void draw(){
      background(100);
      rect(x,200,50,50);
      x++;

      //x sätt tillbaka till 100 när den når 300
      if(x == 300) {
        x= 100;
    }
}

Rektangel byta färg

Byt färgen vid rätt tillfälle. I exempel byts färgen en gång för att x == 300 är bara true vid ETT tillfälle. Byt
int x = 250 till int x = 251
och
x++ till x = x + 2*
Då är x aldrig lika med 300 och färgen byts inte!.

    //variabler
    int x = 250;
    void setup(){
      size(480,360);
      fill(0,0,250);
    }


    void draw(){
      background(100);
      rect(x,200,50,50);
      x++;

      //Färgen byts EN gång när x är lika med 300
      if(x == 300) {
        fill(250,0,0);
    }
}

Användaren ange gränsen

Viktigt att limit deklareras längst upp. Då är variabeln global dvs kan användas i hela programmet. Om man deklarerar en variabel i tex setup-blocket så finn den bara där!

    //Variabler
    int x = 250;
    int limit = 0;

    void setup(){
      limit = QuestionInt("Ange gränsen för färgbyte");
      size(480,360);
      fill(0,0,250);
    }

    void draw(){
      background(100);
      rect(x,200,50,50);
      x++;

      //Färgen byts EN gång när x är lika med limit
      if(x == limit) {
        fill(250,0,0);
    }
}

Studsande rektangel

Om x överstiga 400 byts steg till -1 så att vid nästs x = x + steg aderas -1 dvs minska x med 1. Tvärtom när x understiger 100. Utmaning: Hur ska gränserna sättas så att den studsar vid fönsterramen. En utmaning till? Se till att rektangeln rör sig i x- och y-led och studsar på fönsterramen.

//Variabler
    int x = 250;
    int steg = 1; 

    void setup(){
     size(480,360);
     fill(0,0,250);
    }

    void draw(){
      background(100);
      rect(x,200,50,50);
      x = x + steg;

      //Steg byta värde vid 400 och 100 
      if(x > 400) {
        steg = -1;
      }

      if(x < 100) {
        steg = 1;
      }
    }

Äggkartong för alla tänkbara fall

Programmet beräkna om det fins restägg. om ja ( rest > 0 utvärderas till true) läggs en kartong till.

//Variabler

void setup(){
  size(500,200);
int antalEgg = QuestionInt("Hej bonde, hur många ägg var det i morse?");
int kartongStorlek = QuestionInt("Hur många ägg per kartong");

//beräkna heltalskvot och rest
int antal = antalEgg / kartongStorlek; 
int rest = antalEgg % kartongStorlek;

//lägg till en kartong om det finns restägg
if(rest > 0) {antal++;} 


textSize(32);
text("Du behöver " + antal + " kartonger.", 10,80);
} // draw blocket behövs inte här.

Busbiljett

//Variabler
PImage img;
int age = -1;

void setup(){
 // age = QuestionInt("Hur gammal är Du?");
  size(520, 370); // anpassad till bilden + 10px ram
  background(50);
img = loadImage("guioche.jpg"); //ladda bilden in i programmet
image(img,10,10); //visa bilden. 10:10 är övre vänstre hörn

textSize(42);
fill(0,0,0,50);
rect(64,100,386,67);
fill(0,60,0);
text("Bussbiljett Zone A",71,148);

if(age < 18) { 
  textSize(60);
  text("Barn - 16kr",90,250);
  } else 
    if(18 <= age && age <= 26) { 
    textSize(50);
    text("Student - 20kr",80,250);
    }else 
      if(27 <= age && age <= 64) { 
      textSize(50);
      text("Vuxen - 20kr",90,250);
      } else 
        if(65 <= age) { 
        textSize(45);
        text("Pensionär - 20kr",70,250);
        }     
}

trafikljus, 1 sek per fas

  //Variabler
  int tid = 0;

  void setup(){
      size(300, 500);

  }

  void draw(){
  background(102);
    //låda
  fill(0,50,0);
  //vit kant kring alla element
  stroke(255,255,255);
  rect(90,80,120,400,0);

  //fas 1 - endast röd
  if(0 <= tid && tid < 60) {
  //röd 
  fill(255,0,0);
  ellipse(150,150,100,100);
  }


  //fas 2 - röd och gul
  if(61 <= tid && tid < 120) {
    fill(255,0,0);
    ellipse(150,150,100,100);
    fill(255,255,0);
    ellipse(150,270,100,100);
  }
  //fas 3 - endast grön
  if(121 <= tid && tid < 180) {
  fill(0,225,0);
  ellipse(150,390,100,100);
  }

 //fas 4 - endast gul
  if(181 <= tid && tid < 240) {
    fill(255,255,0);
    ellipse(150,270,100,100);
  }

  //öka tid
  tid++;

  // sätt tid till noll för att börja om 
  // efter fas 4
  if(tid == 241) { tid = 0;}

}

Interaktion

Laboration 1

manuellt trafiskljus

Variabeln mode ändras med hjlp av knappar i keyPressed()-blocket. I draw()-blocket är det flera if satser som utvärderar värdet och rita bara vissa cirklar.

  //Variabler
  int mode = 1;

  void setup(){
      size(300, 500);
    ((java.awt.Canvas) surface.getNative()).requestFocus();  
  }

  void draw(){
  background(102);

  fill(0,50,0); //färg låda mörk grön
  stroke(255,255,255); //vit kant kring alla element
  rect(90,80,120,400,0);

  //fas 1 - endast röd
  if(1 == mode) {

  fill(255,0,0); //röd 
  ellipse(150,150,100,100);
  }


  //fas 2 - röd och gul
  if(2 == mode) {
    fill(255,0,0);
    ellipse(150,150,100,100);
    fill(255,255,0);
    ellipse(150,270,100,100);
  }
  //fas 3 - endast grön
  if(3 == mode) {
  fill(0,225,0);
  ellipse(150,390,100,100);
  }

 //fas 4 - endast gul
  if(mode == 4) {
    fill(255,255,0);
    ellipse(150,270,100,100);
  }


  // sätt mode till noll för att börja om 
  // efter fas 4

  if(mode > 5) { mode = 1;}

}

void keyPressed(){

  if(key == '+') {mode++;}
  if(key == '-') {mode--;}

  // när mode går över gränserna
  if( mode > 4 ) { mode = 1;}
  if(mode < 1 ) { mode = 4;}
}

Rektangel som styrs av piltangenter

Piltangenter påverka två variabler. en för rörelse i x-led, en för y-led.

  //Variabler
  int x_pos = 200;
  int y_pos = 100;

  void setup(){
      size(400, 300);
    ((java.awt.Canvas) surface.getNative()).requestFocus();  
  }

  void draw(){
  background(102);

  rect(x_pos,y_pos,10,10);
}

void keyPressed(){

  if(keyCode == RIGHT) {x_pos++;}
  if(keyCode == LEFT) {x_pos--;}
  if(keyCode == UP) {y_pos--;}
  if(keyCode == DOWN) {y_pos++;}


}

Rektangel rör sig alltid, piltangenter styr endast riktning

Piltangenter påverka två variabler: x_steg och y_steg. en för tillväxt i x-led, en för y-led. i draw-blocket adderas de två värden till den aktuella positionen.

  //Variabler
  int x_pos = 200;
  int y_pos = 100;
  int x_steg = 1;
  int y_steg = 0; 

  void setup(){
      size(400, 300);
    ((java.awt.Canvas) surface.getNative()).requestFocus();  
  }

  void draw(){
  background(102);

  rect(x_pos,y_pos,10,10);

  x_pos = x_pos + x_steg;
  y_pos = y_pos + y_steg;
}

void keyPressed(){

  if(keyCode == RIGHT) {x_steg =  1; y_steg =  0;}
  if(keyCode == LEFT)  {x_steg = -1; y_steg =  0;}
  if(keyCode == UP)    {x_steg =  0; y_steg = -1;}
  if(keyCode == DOWN)  {x_steg =  0; y_steg =  1;}


}

Laboration 2

Rektangel vid musposition

//Variabler
int x = 0;
int y = 0;
boolean started = false; 
void setup(){
size(500,500);

}


void draw(){
  if(started) {
  rect(x,y,50,50);
}

}


void mouseClicked(){
  started = true; 
  x = mouseX;
  y = mouseY;
}

Drar linje med musen

//Variabler
int startX,startY, stopX,stopY;
boolean rita = false; 

void setup(){
size(500,500);
}


void draw(){
  if(rita) { line(startX,startY,stopX,stopY);}
}

void mousePressed(){
  startX = mouseX;
  startY = mouseY;
  rita = false;
}

void mouseReleased(){

  rita = true; 
  stopX = mouseX;
  stopY = mouseY;

}

Iteration

Rektanglar efter önskemål

//Rektanglar efter önskmål
//Variabler
int  antal;
int count = 0;

void setup(){
size(480,360);
background(100);
fill(255,128,0); //orange
strokeWeight(2); //ram tjocklek och linjentjocklek
textSize(20);

antal = QuestionInt("HUr många Rektanglar?");
}

void draw(){

  int x = 80; 

  while(count < antal) {
   rect(x,80,20,20 + x/2);

   count++;
   text(count, x+5,80 + x/2 +40); // 
   x += 30;
    }
}

Måltavla

//Måltavla
//Variabler

void setup(){
size(800,600);

int x = 700;


while(x >= 50){

  if(x % 100 == 0) { fill(255,0,0);}
    else {fill(0);}

    ellipse(400,300,x,x);
    x = x -50;

    }
}

schackbräda

//CHESS
//Variabler 

void setup(){
int kant = 100;
int x= 0,y = 0;
int count=0;  //räknare antal rutor
int vitsvart = 0; // för avgöra färg via mod 2 se rad 19

size(820,820);
background(0,200,0);
stroke(0,200,0);
strokeWeight(2);

while( count <= 64){
  count++;
   vitsvart++;  // färg: om delbar med 2 ==> svart, annars vit

   if(vitsvart % 2 == 0) {
    fill(0);
    } else {
      fill(255);
    }

    rect(x+10,y+10,kant,kant);
     x+= kant;  // x ökar med en kantlängd


    if(count % 8 == 0) { // raden är klar om delbar md 8. 
      y += kant; // y +kant för nästa rad
      x = 0;   // återställ x längst till vänster
      vitsvart++;  // 
    }


  }

}

teglevägg

//tegelvägg
//Variabler

int tegelbredd = 120; // mått för en tegelsten
int tegelhojd = 60;
int x= 1, y = -10;
int udda = 0; // 

void setup(){ 
  size(1200,800);
  background(100);
  noStroke();
  fill(98,18,18); // tegelfärg

  while(y < 800 ) {

    rect(x,y,tegelbredd,tegelhojd);
    x += tegelbredd +4;

    if(x > 1200) { 
      println(udda);
          if(udda % 2 == 0) {x = -(tegelbredd/2 +4);} // minskar till - tegel/2 , +4 för mellanrum
            else { x = 0; } 

          y += tegelhojd + 4;  // öka y-led, +4 för mellanrum
          udda++;

        } // end if
  } // end while


}

Keys	Action
`?`	Open this help
`n`	Next page
`p`	Previous page
`s`	Search