Fritt etter «Coordinate System and Shapes» av Daniel Shiffman: https://processing.org/tutorials/drawing/

---

1. Koordinatsystem

Før vi starter å programmere i Processing må vi grave fram noe av matermatikk-kunnskapen fra ungdomsskolen. Vi tar et ruteark, en linjal og en blyant, og setter en strek på papiret. Den korteste avstanden mellom to punkter er denne linjen, og det er her vi begynner, med to punkter på dette rutearket.

Figuren over viser en linje mellom punkt A (1, 0) og punkt B (4, 5) slik vi gjør det på et vanlig ruteark.

Hvis du vil instruere en venn av deg til å tegne den samme linja kan du si: «Kan du være så snill å tegne en linje fra punkt en-null til fire-fem for meg?».

OK,  for øyeblikket tenker vi oss at «vennen» din er en datamaskin med en skjerm. Hva gjør du da? Du gir den samme instruksjonen, bortsett fra at du kutter ut høflighetsfrasen. I tillegg må du være pinlig nøyaktig med rettskrivningen.

Slik vil instruksjonen se ut:

line(1, 0, 4, 5);

​Selv uten å ha studert skrivereglene for dataspråk er vel linja over nokså forståelig? Vi gir en kommando (en funksjon) som maskinen skal følge. Kommandoen er «line». I tillegg gir vi noen såkalte argumenter (1, 0, 4, 5),  som forteller maskinen hvor linja skal tegnes, nemlig fra punktet med koordinatene (1, 0) til punktet med koordinatene (4, 5).

Hvis du tenker på en linje med kode som en setning, så er funksjonen det smme som verbet og argumentene det samme som objekter. Setningen avsluttes ikke med punktum, men med semikolon (shift + komma).

Nøkkelen er å innse at skjermen ikke er noe annet en et litt fancy ruteark. Hvert punkt (pixel) på skjermen har en x- og en y-koordinat. x-aksen er vannrett. y-aksen er loddrett. Vår jobb er å spesifisere hva slags figurer og farger som skal vises ved disse koordinatene.

Men dessverre er det en snubletråd her…
Da du tegnet kooordinatsystem på ruteark på ungdomsskolen var punktet (0, 0), også kalt origo, enten midt på arket, eller nede i venstre hjørne. Positiv x-akse pekte til høyre, og positiv y-akse pekte oppover. Negativ x-akse til venstre, og negativ y-akse nedover.

På en dataskjerm er imidlertid y-aksen snudd opp ned! Positiv y-akse peker nedover!

Punktet (0, 0) er dermed oppe i venstre hjørne. Positiv x-akse er vannrett til høyre, slik du er vant til, men positiv y-akse er som sagt loddrett nedover.

---

2. Enkle figurer

Det aller fleste av de Processing-eksemlpene du vil se lager visuelle uttrykk. Kjernen i disse eksemplene er tegning av figurer og angivelse av koordinater. La oss starte med å se på fire enkle figurer: punkt, linje, rektangel og ellipse.

​For hver figur må vi spørre oss selv

• Hva slags informasjon er nødvendig for å angi plassering og størrelse (og seinere: farge) for denne figuren?
• Hvordan forventer Processing at vi gir den informasjonen?

For hvert av diagrammene nedenfor antar vi at lerretet har en bredde på 10 punker, og en høyde på 10 punkter. Dette er ikke særlig realistisk. Det blir ikke stort mer enn noen få millimeter på en skjerm, men for å demonstrere bruken av koordinater er det enklere å jobbe med små tall. Da er det lettere å relatere dette til et vanlig ruteark av papir.

point()
Et punkt er den enkleste av figurene og et bra sted å starte. For å tegne et punkt trenger vi bare én x- og én y-koordinat.

• point(4, 5);

​line()
​Enlinje er heller ikke så vanskelig. Den trenger ganske enkelt to punkter: (x1, y1) og (x2, y2)

• line(1, 2, 5, 2);

rect()
Når vi skal tegne et rektangel blir ting litt mer komplisert. I Processing spesifiseres et rektangel ved å angi koordinatene for øvre venstre hjørne.I tillegg angis bredden og høyden.

​rect(1, 2, 4, 3); // Øvre venstre hjørne (1, 2). Bredde 4, høyde 3.

​rectMode(CENTER)
En annen måte å tegne et rektangel på er å spesifisere sentrum sammen med bredden og høyden. Hvis vi foretrekker denne metoden må vi først angi at det er dette vi ønsker. Vi bruker funksjonen rectMode() med argumentet CENTER. Legg merke til bruken av store bokstaver. Den er avgjørende for at Processing skal forstå hva vi mener.

• rectMode(CENTER);
• rect(3, 2, 4, 2);

​rectMode(CORNERS)
Til slutt tar vi med at vi også kan tegne rektangler ved hjelp av to punkter (øvre venstre hjørne og nedre høyre hjørne). Da må vi bruke argumentet «CORNERS».

• rectMode(CORNERS);
• rect(1, 1, 5, 3);

​ellipse()
​Med en gang vi er fortrolige med å tegne rektangler blir det å tegne ellipser veldig enkelt. Det gjøres rett og slett  på samme måte. En ellipse tegnes innenfor den boksen et rektangel danner. Som standard tegnes en ellipse ut i fra sentrum. Standard innstilling er «CENTER» ikke «CORNER» som for rektangel.

ellipse(3, 3, 4, 6); _{// Vi trenger ikke skrive ellipseMode(CENTER);}

ellipseMode(CORNER)
Øvre venstre hjørne, bredde og høyde.

• ​ellipseMode(CORNER);
• ellipse(1, 1, 3, 5);

ellipseMode(CORNERS);
Øvre venstre hjørne og nedre høyre hjørne.

• ellipseMode(CORNERS);
• ellipse(1, 1, 4, 5);

Hvis programlinjene over skrives inn i en editor, kjøres og så forstørres opp slik at ellipsene blir så store som de vises her, vil ellipsene være veldig hakkete. Alle figurer tegnes med kvadratiske punkter. Processing har en innebygget metode for å velge hvilke punkter som skal brukes for å få en så jevn ellipse som mulig. Processing gir oss også muligheten til å utvikle egne algoritmer for å kunne farge enkelt-punkter (egentlig kan vi vel allerede nå forestille oss hvordan vi kan få til dette ved å bruke point() om og om igjen), men foreløpig synes vi det er greit å la ellipse() gjøre den tunge jobben. (For å lære mer om punkter kan du starte med referansesiden som omhandler punkter, men du er hermed advart, dette vil være mye mer avansert enn det denne veiledning viser.

Som avslutning kan vi se på noen kodelinjer for en litt mer avansert og realistisk figur, der også lerretsstørrelsen på 200 x 200 er mer realistisk.

• size(200, 200); /_{/ Størrelsen på lerretet}
• rectMode(CENTER);
• rect(100, 100, 20, 100); _{// Kroppen}
• ellipse(100, 70, 60, 60); 
• ellipse(81, 70, 16, 32); /_{/ Venstre øye}
• ellipse(119, 70, 16, 32);
• line(90, 150, 80, 160); _{// Venstre bein}
• ​line(110, 150, 120, 160);