Sjekkliste

• Start Processing og skriv dette:

  void setup() {
    size(640, 480);
  }
  
  void draw() {
    background(0);
  }
  

• Kjør programmet ved å trykke på pilen .

• Lagre programmet som Ball ved å velge File --> Save i menyen.

Sjekkliste

• Endre draw til følgende uten å endre setup:

  void draw() {
    background(0);
    ellipse(320, 240, 100, 100);
  }
  

• Lagre med Ctrl+S og kjør programmet med Ctrl+R. Du skal nå se en hvit sirkel midt i vinduet som i bildet under.

• Legg til en sirkel til og kjør programmet igjen:

  void draw() {
    background(0);
    ellipse(320, 240, 100, 100);
    ellipse(0, 0, 200, 200);
  }
  

• La oss legge til en siste sirkel og kjøre programmet enda en gang:

  void draw() {
    background(0);
    ellipse(320, 240, 100, 100);
    ellipse(0, 0, 200, 200);
    ellipse(640, 480, 50, 50);
  }
  

Sjekkliste

• La oss begynne med å endre størrelsen på vinduet i setup:

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

  Legg merke til at to av sirkelene har "flyttet" på seg. De er ikke i midten og høyre bunn av vinduet.

  

• Vi skal nå ta i bruk to variabler som heter width og height, altså bredde og høyde. Disse variablene får verdien til størrelsen på vinduet når size kalles. Endre draw til å bruke width og height:

  void draw() {
    background(0);
    ellipse(width / 2, height / 2, 100, 100);
    ellipse(0, 0, 200, 200);
    ellipse(width, height, 50, 50);
  }
  

  Her har vi brukt regnestykkene width / 2 og height / 2 for å tegne opp den første sirkelen. Skråstreken / betyr delt på, altså gir width / 2 halvparten av bredden. Hva gir height / 2?

  Tips: Vi kunne også brukt width * 0.5 for å oppnå det samme, bredden ganget med en halv. Noen ganger er det enklere med deling og andre ganger ganging.

• Lagre og kjør programmet, om du ikke har gjort det allerede.

• La oss lage våre egne variabler, slik at vi kan få formene til å bevege på seg:

  float x;
  float y;
  
  void setup() {
    size(800, 600);
    x = width / 2;
    y = height / 2;
  }
  

  float x; og float y; lager to variabler med navn x og y. Typen av variablene er float, altså desimal eller flyttall. Inne i setup gir vi variablene verdier, som er de samme regnestykkene som vi brukte tidligere.

• Det er ikke nok å bare ha variabler, vi må bruke dem også. Endre draw til å bruke x og y:

  void draw() {
    x = x + 1;
  
    background(0);
    ellipse(x, y, 100, 100);
    ellipse(0, 0, 200, 200);
    ellipse(width, height, 50, 50);
  }
  

  Den første sirkelen bruker nå x og y som posisjon. I tillegg la vi til linjen x = x + 1; som sier at x skal øke med 1 for hver gang draw kjøres. Hva vil skje med den ene sirkelen når programmes kjøres?

• Lagre og kjør programmet, om du ikke har gjort det allerede.

Sjekkliste

• Vi trenger et par nye variabler for å styre retningen til sirkelen. Legg til variablene xFart og yFart før setup:

  float xFart = 1.5;
  float yFart = 2;
  

  Variablene har type float, altså flyttall eller desimaltall. Eksempelvis 1.1, 3.14, -2.01, osv. Variablene skal styre farten og retningen til sirkelen. I Processing, og i de fleste programmeringsspråk, bruker vi punktum istedenfor komma på desimaltall. Dette er fordi punktum er det som brukes i engelsk.

  Notis: La du merke til at variablene ble gitt verdier med en gang, mens vi tidligere ga dem verdier inni setup? Grunnen til dette er at width og height kan ikke brukes før size er kjørt, så vi kunne ikke gi x og y verdier med en gang.

• Legg til koden under i draw for å få ballen til å snu. Merk at vi endrer setningen hvor vi øker x og fjerner to av sirklene.

  void draw() {
    x = x + xFart;
    y = y + yFart;
  
    if (x < 50) {
      xFart = -xFart;
    }
  
    if (x > width - 50) {
      xFart = -xFart;
    }
  
    if (y < 50) {
      yFart = -yFart;
    }
  
    if (y > height - 50) {
      yFart = -yFart;
    }
  
    background(0);
    ellipse(x, y, 100, 100);
  }
  

• Lagre og kjør programmet.