Steg 1: Oppsett

Først må vi sette opp programmet vårt med en draw og en setup-metode.

void setup(){

}

void draw(){

}

Nå kan vi lagre programmet vårt slik at vi kan finne det igjen senere. Trykk ctrl + S på tastaturet og gi det et navn som du husker, for eksempel rulling. Processing lagrer filer i .pde format.

Nå kan du også høyreklikke på dette bildet av en bakke, og lagre det i samme mappe som spillet ditt ble lagret i.

Så kan vi sette opp størrelsen på vinduet og en bakgrunnsfarge i vinduet.

Steg 2: Hente inn bilde

I Processing kan et bilde bli lagret i en variabel av typen PImage, og hentes inn ved å bruke metoden loadImage();. Denne metoden tar navnet på bildet som et argument, og brukes gjerne inne i setup.

PImage bilde1;

void setup(){
  size(800, 800);
  bilde1 = loadImage("bakke.png");
}

void draw(){
  background(100, 100, 200);
  image(bilde1, 150, 150, 240, 120);
}

Steg 3: Flere bilder

Nå vil vi legge til enda et bilde, og få begge bildene til å bevege seg.

Først så gjør vi alt vi nettopp gjorde i steg 2, men vi kaller variabelen vår for bilde2. Vi plasserer bildet til høyre for det første slik at de ligger helt inntil hverandre.

PImage bilde1;
PImage bilde2;

void setup(){
  size(800, 800);
  bilde1 = loadImage("bakke.png");
  bilde2 = loadImage("bakke.png");
}

void draw(){
  background(100, 100, 200);

  image(bilde1, 150, 150, 240, 120);
  image(bilde2, 390, 150, 240, 120);
}

For å få bildene til å bevege på seg må vi få tallet i x plassen i image-metoden til å endre seg, for å få til dette må vi bruke to variabler, for eksempel x1 og x2. disse oppretter vi av typen int, og setter utenfor metodene våre.

I setup gir vi de verdier, feks 150 og 390 da begynner den første 150 pixler til høyre for venstresiden av vinduet. Den neste begynner 240 pixler til høyre for der igjen, som da blir helt tett intill det første bildet. (Bildet er 240 pixler bredt)

Nå bytter vi ut variablene med x plassen i image-metoden.

PImage bilde1;
PImage bilde2;
int x1;
int x2;

void setup(){
  size(800, 800);
  bilde1 = loadImage("bakke.png");
  bilde2 = loadImage("bakke.png");
  x1 = 150;
  x2 = 390;
}

void draw(){
  background(100, 100, 200);
  image(bilde1, x1, 150, 240, 120)
  image(bilde2, x2, 150, 240, 120)
}

Fortsatt beveger de seg ikke når vi kjører koden, hva tror du det kan skyldes? For å gjøre det kan vi ta x1 -= 2; som betyr "ta verdien av x1, trekk ifra 2 og putt den nye verdien inn i x1". Putt denne koden nederst i draw-metoden.

image(bilde2, x2, 150, 240, 120);

x1 -= 2;
x2 -= 2;

Steg 4: Putt bildet tilbake

Når bildet forsvinner ut av skjermen vil vi at det skal bli puttet til høyre for det andre bildet slik at vi hele tiden har mer bakke.

For å få til det trenger vi en if-test for hver x variabel, det vil si at vi teste om høyresiden av bildet er ute av vinduet. Det kan vi skrive først med ord og så mer og mer til kode:

Hvis høyresiden av bildet er ute av vinduet,
    så flytt bildet tilbake dit det starta

Hvis x1 pluss bildebredden er mindre enn 0,
    pluss 480 på x1

Hvis(x1 + 240 < 0) {
    x1 += 480
}

if(x1 + 240 < 0) {
    x1 += 480;
}

Dette må vi gjøre for begge x variablene. Legg merke til at vi kan skrive alt på en linje om vi vil, men det er lettere å lese om vi bruker flere linjer.

x1 -= 2;
x2 -= 2;

if(x1 + 240 < 0){ x1 += 480; }
if(x2 + 240 < 0){ x2 += 480; }

PImage bilde1;
PImage bilde2;
int x1;
int x2;

void setup(){
  size(240, 800);
  bilde1 = loadImage("bakke.png");
  bilde2 = loadImage("bakke.png");
  x1 = 150;
  x2 = 390;
}

void draw(){
  background(100, 100, 200);
  image(bilde1, x1, 150, 240, 120)
}

void y(){
  image(bilde2, x2, 150, 240, 120)

  x1 -= 2;
  x2 -= 2;

  if(x1 + 240 < 0){ x1 += 480; }
  if(x2 + 240 < 0){ x2 += 480; }
}