Last ned og pakk ut (f.eks. til skrivebordet):

https://processing.org/download/?processing

Hipp som happ om dere vil bruke Windows, Linux eller Mac

Velg versjon 3.0.1 (den som står på toppen)

Hva er Processing?

Java, med sukker på...

Et program (IDE), med play-knapp

Og når vi trykker på "Play"-knappen kompileres og kjøres programmet:

class EtEllerAnnet extends PApplet {

  public static void main(String[] args) {
    // magi som starter opp Processing
    setup();
    while (true) {
      draw();
      // litt delay avhengig av framerate
    }
  }

  // din kode blir satt inn her

}

Du har tilgang på alt av Java

I alle fall alt av Java 7, med Java 6-syntaks...

Hva skjer når vi trykker play?

Tegning

rect(float x, float y, float width, float height);
ellipse(float x, float y, float width, float height);
line(float x1, float y1, float x2, float y2);

I tillegg finnes triangle, point, quad, bezier, curve, arc og mer komplekse løsninger som PShape.

Koordinater i Processing

Tegn en H med tre firkanter

void setup() {}
void draw() {}
rect(int x, int y, int width, int height);
size(int width, int height);

Mus-input

mouseX, mouseY // hvor musa er
pmouseX, pmouseY // hvor musa var
mousePressed // om det trykkes på en knapp
mouseButton // hvilken knapp det trykkes på

Lag et veldig enkelt tegneprogram

ellipse(int x, int y, int width, int height);
mouseX, mouseY
mousePressed
noStroke();

Ikke strengt nødvendig, men for syns skyld:

Farger

fill(color c);
background(color c);
stroke(color c);

Farger kan spesifiseres som:

fill(128); // gråtone 0 - 255
stroke(255, 255, 0); // rød grønn blå 0 - 255
background(#ffaacc); // web colors / hexcode

Gjennomsiktighet er evt et ekstra argument, alpha 0-255

Tegn en sirkel som:

Endrer farge etter hvor musa er, og flytter seg når du klikker

ellipse(int x, int y, int width, int height);
mouseX, mouseY
mousePressed
fill(int r, int g, int b);
background(int r, int g, int b);

Ofte må vi ha tilstand som oppdaterer seg over tid.

 

Da er det bare å sette variabler som klassevariabler. Utenfor funksjonene.

Tegn noe som beveger seg

 

Klarer du å lage en ball som spretter i sidene?

 

Eller en sirkel som følger etter musepekeren?

Tastatur-input

void keyPressed() {
  if (key == CODED) {
    if (keyCode = UP) {
      // skifte retning kanskje?
    }
  }
  if (key == 'w') {
    // eller kanskje gjør noe tilfeldig?
  }
}

Vi kan definere metoden keyPressed som blir kalt hver gang en tast blir trykket

Et veldig primitivt "skriveprogram".

 

Hvordan kunne vi forbedret det?

 

(Test backspace og shift for eksempel).

Ikke glem at dette er snakk om helt vanlig Java, bare med litt ekstra.

 

Så vi kan lage klasser og funksjoner som vi vil og importere fra Java-biblioteket.

Lek og lag noe kult!

Kode fra presentasjonen m.m.:

https://github.com/evestera/inf1010v16

Processing

By Erik Vesteraas

Processing

Slides fra intro til Processing for INF1010-studenter

  • 2,048