Fritt etter «Processing Overview» av Casey Reas and Ben Fry: ​​​https://processing.org/tutorials/overview/

---

1. Å skisse med Processing

Et Processing-program kalles en skisse (sketch). Idéen er å gjøre Java-liknende programmering mer lik skript-programmering for raskt å kunne skrive fungerende kode med få linjer.

Som standard lagres skissene i mappa «Sketchbook». Denne mappa finner du lettest ved å velge «File» > «Scetchbook». Vil du åpne skisser som er lagret andre steder kan du velge «File» > «Open».

2. Hello world

I følge tradisjonen starter all opplæring i programmering med å lage et program som skriver «Hello world» på skjermen. I Processing vil dette tilsvare å lage et program som tegner en linje:

line(15, 25, 70, 90); 

Last ned Processing eller bruk en online-editor, les mer….
Skriv linja over i editoren og klikk «Kjør»-knappen.

Resultatet vil være et vindu med grå bakgrunn og en svart linje. Linja går fra koordinatene (15, 25) til (70, 90). Origo (0, 0) er oppe i venstre hjørne. Positiv y-akse er loddrett nedover.

Vi kan bygge videre på dette programmet ved å endre størrelsen på lerretet og bestemme bakgrunnsfargen:

• size(400, 400);
• background(192, 64, 0);
• stroke(255);
• line(15, 25, 70, 90);

Nå settes lerretsstørrelsen til 400 x 400 punkter, bakgrunnsfargen blir en slags orange-rød, og linja får fargen hvit.

Som standard angis farge med tall fra 0 til 255. (0 betyr ingen farge, 255 betyr full farge). Her er andre muligheter:

• stroke(255); // hvit farge
• stroke(255, 255, 255); // identisk til linjen over (rød, grønn, blå)
• stroke(255, 128, 0); // skarp oransje (rgb)
• stoke(#FF8000); // skarp oransje i (hexadesimal nettsidekode)
• stroke(255, 128, 0, 128); // skarp oransje 50% gjennomsiktig

De to skråstrekene (shift + 7) forteller Processing at teksten som følger er en forklarende kommentar som ikke er en del av programmet.

De samme alternativene fungerer for fill()-funksjonen, som setter fyllfargen for figurer, og for background()–funksjonen som blanker ut lerretet ved å male over det som er der fra før.

Som alle Processing-funksjoner som har med tegning å gjøre vil fill() og stroke() påvirke alle figurer som tegnes etterpå. Når en ny fill() og/eller stroke() skrives vil fyllfarge og strekfarge endres for alle nedenforliggende figurer.

---

For å lese mer om disse emnene:
– exporting and distributing your work
– ceating images of your work
– examples and reference
– more about size()
– loading and displaying data
– libraries add new features
– scetching and scripting
– don’t start by trying to build a cathedral
Gå til orginalteksten: https://processing.org/tutorials/overview/

---

3. Hello mouse

Statisk skisse
​Et program som består av en liste av kommandoer kalles en statiskskisse. I en statisk skisse brukes en serie av funksjoner for lage ett enkelt bilde uten noe form for animasjon eller interaktivitet.

size(400, 400);
background(192, 64, 0);
stroke(255);
line(15, 25, 70, 90);

Interaktiv skisse
Interaktive programmer lages ved å bruke en serie bilderammer (lerret) som avløser hverandre. Dette kan du oppnå ved å bruke funksjoner som setup() og draw() slik som vist nedenfor.

void setup() {
    size(400, 400); // NB! Alltid først i setup()
    stroke(255);
    background(193, 64, 0);
}

void draw() {
    line(150, 25, mouseX, mouseY);
}

setup()-blokken (innenfor klammeparentesene) kjører bare en gang.

setup() kan brukes for alle oppstarts-innstillinger. I eksempelet over settes lerretsstørrelsen, strekfargen og bakgrunnsfargen. Funksjonen size() må alltid stå først inne i setup().

​draw() – blokken gjentas kontinuerlig, om og om

draw()-blokken brukes for å håndtere animasjon. I eksempelet over er den ene enden av streken alltid på musepekeren. Det tegnes en linje fra koordinatene (150, 25) til musepekerens koordinater. Deretter tegnes linja på nytt. Hvis musepekeren har flyttet seg ser vi en ny linje, hvis ikke tegnes linja oppå den forrige.

Å rydde lerretet for figurer
Fordi background() står inne i setup(), og derfor brukes bare en gang, vill lerretet fylles av streker etterhvert som vi beveger musepekeren rundt.

For å tegne bare én linje som følger musepekeren, flytter vi background() fra setup() til draw(). Da vil bakgrunnen tegnes på nytt for hver runde i draw(). Den forrige streken vil bli borte.

• void setup() {
  • size(400, 400);
  • stroke(255);
• }
• void draw() {
  • background(192, 64, 0);
  • line(150, 25, mouseX, mouseY);
• }

Statiske programmer brukes vanligvis for svært enkle eksempler, eller for skript som kjører lineært og så avslutter. For eksempel for å gjøre om en side til en PDF og så avslutte.

De fleste programmer bruker setup() og draw().

Styring med musetast
Nedenfor er et annet eksempel på musestyring av program. Ved å bruke funksjonen mousePressed() kan vi styre programflyten med venstre musetast. I eksempelet fjernes alle figurer fra lerretet ved å bruke background() hver gang venstre musetast trykkes.

• void setup() {
  • size(400, 400);
  • stroke(255);
• }
• void draw() {
  • line(150, 25, mouseX, mouseY);
• }
• void mousePressed() {
  • background(192, 64, 0);
• }