Start Processing og skriv dette:

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

void draw() {
  background(0);
}

Køyr programmet ved å trykkje på pila .

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

Endre draw til det følgjande utan å endre setup:

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

Lagre med ctrl + S og køyr programmet med ctrl + R. No skal du sjå ein kvit disk midt i vindauget, som i biletet under.

Legg til ein disk til og køyr programmet att:

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

La oss leggje til endå ein disk og køyre programmet endå ein gong:

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

La oss starte med å endre storleiken på vindauget i setup:

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

Legg merke til at to av diskane har "flytta" på seg. Dei er ikkje i midten og i høgre botn av vindauget lengre.

No skal me ta i bruk to variablar som heiter width og height, altså breidde og høgde. Desse variablane får verdien til storleiken på vindauget når size blir kalla. 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 brukar me reknestykka width / 2 og height / 2 for å teikne opp den fyrste disken. Skråstreken, /, tyder "delt på", altså gir width / 2 halvparten av breidda. Kva gir height / 2?

Tips: Me kunne ha brukt width * 0.5 for å få det same, breidda ganga med ein halv. Nokre gonger er det enklare med deling, andre gonger med ganging.

Lagre og køyr programmet, viss du ikkje har gjort det allereie.

La oss lage våre eigne variablar, slik at me 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; lagar to variablar med namna x og y. Typen av variablane er float, altså desimal- eller flyttal. Inne i setup gir me variablane verdiar, som er dei same reknestykka me brukte tidlegare.

Det er ikkje nok å berre ha variablar, me må bruke dei òg. 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);
}

No brukar den fyrste disken x og y som posisjon. I tillegg la me til linja x = x + 1; som seier at x skal auke med 1 for kvar gong draw blir køyrt. Kva vil skje med den eine disken når programmet blir køyrt?

Lagre og køyr programmet, viss du ikkje har gjort det allereie.

Me treng eit par nye variablar for å styre retninga til disken. Legg til variablane xFart og yFart før setup:

float xFart = 1.5;
float yFart = 2;

Variablane har type float, altså flyttal eller desimaltal. Det kan til dømes vere 1.1, 3.14 eller -2.01. Variablane skal styre farta og retninga til disken. I Processing, og i dei fleste programmeringssoråk, brukar me punktum i staden for komma som desimalteikn. Det er fordi punktum er det som brukast på engelsk.

Notis: La du merke til at variablane fekk verdiar med ein gong, medan me tidlegare ga dei verdiar inni setup? Grunnen til det er at me ikkje kan bruke width og height før size er køyrt, så me kunne ikkje gi x og y verdiar med ein gong.

Legg til koden under i draw for å få ballen til å snu. Merk at me endrar setninga det me aukar x og fjernar to av diskane.

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 køyr programmet.