Kom i gang med Processing

Fritt etter: «Getting Started» av Casey Reas og Ben Fry: ​​​https://processing.org/tutorials/gettingstarted/

1. Velkommen til Processing! 
​
Start med å besøke disse to nettsidene:
http://hello.processing.org/
http://vestera.as/processing/
Begge er interaktive nettsider der du kan prøve selv uten nedlasting.

Deretter kan du besøke http://processing.org/download der du velger Mac-, Windows- eller Linuxversjonen, avhengig av hvilken type datamaskin du har. Les mer her…

​Du kan også bruke en online-editor. Her får du imidlertid ingen feilmeldinger til hjelp hvis programmet ikke fungerer.

2. Ditt første program

Nedenfor vises Processing Development Environment ( PDE)

PDE består av:

  • Menylinja (Menu)
  • Verktøylinja (Toolbar) med bl.a. kjør- og stoppknapp
  • Tekstditoren (Text Editor) . Her skriver du programmet, ofte kalt en skisse (sktech).
  • Meldingsfeltet (Message Area). Dette brukes til korte beskjeder og feilmeldinger.
  • Konsoll (Console) som bl.a. brukes til å skrive tekst under programkjøringen.

Når du kjører et program vises resultatet i et eget vindu, også kalt lerret (canvas):

  • Visningsvindu/lerret (Dispay Window)

Ditt førset program. ​Skriv dette i editoren:

ellipse(50, 50, 80, 80);

Dette betyr: «Tegn en ellipse med sentrum 50 punkter fra venstre kant og 50 punkter fra toppen. Bredden og høyden skal være 80 punkter.»

Klikk «kjør»-knappen (trekantknappen på verktøylinja).

Picture

Hvis du har skrevet alt riktig vil du se en sirkel oppe i venstre hjørne på lerretet.

Hvis du ikke skrev alt riktig, vil meldingsfeltet bli rødt, og det vil stå en tekst som beskriver hva som kan være feil. Da må du sjekke at du kopierte teksten nøyaktig:

  • Tallene skal stå i parentes  (shift + 8 og shift + 9).
  • Tallene skal være adskilt med komma.
  • Linja skal avsluttes med et semikolon (shift + komma).

Noe av det vanskeligste når du begynner med programmering, er at du må være pinlig nøyakig med rettskrivningen. Processing er ikke alltid smart nok til å forstå hva du mener. Med litt øvelse lærer du deg snart å skrive riktig.

Vi hopper videre til en skisse som er litt mer spennende. Slett teksten fra siste eksempel, og prøv dette:

  • ​void setup() {
    • size(480, 120);
  • }
  • void draw() {
    • if (mousePressed) {
      • fill(0);
    •  }
      •  else {
      • fill(255);
    • }
    • ellipse(mouseX, mouseY, 80, 80);
  • ​}
Picture

​Dette programmet lager et lerret som er 480 punkter bredt og 120 punkter høyt. Deretter tegnes det hvite sirkler i posisjonen til musepekeren. Når museknappen trykkes tegnes istedet svarte sirkler.

Vi vil forklare detaljene i dette programmet seinere. Nå nøyer vi oss med å kjøre programmet, flytte musepekeren, og klikke for å se hva som skjer.

Mens programmet kjører vil «kjør»-knappen endre seg til et kvadratisk «stopp»-ikon. Det kan du klikke for å stoppe skissen.

3. Vise fram
​
​Hvis du ikke vil bruke knappene kan du alltids bruke menyene eller tastatursnarveier stedet.

Hvis du velger «Sketch» på menylinja, ser du at du enten kan klikke «Run» eller bruke tastatursnarveien Ctrl+R (Cmd+R på Mac). begge valgene er det samme som å bruke «kjør»-knappen.

Valget «Present» maksimerer lerretet når programmet kjøres, slik at skissen presenteres alene på skjermen. Lerretet vises i den størrelsen du har bestemt. Du kan oppnå det samme ved å holde Shift-tasten nede når du klikker «kjør»-knappen på verktøylinja.

Picture

4. Lagre og opprette ny skisse

​Den neste viktige kommandoen er «Save»Du finner den i «File»-menyen. Som standard blir programmene dine lagret i mappa som heter «Sketchbook» (skissebok). Dette er en mappe der alle dine programmer lagres, slik at det er lett å finne dem. Velg «Sketchbook» i «File»-menyen for å få opp en liste over alle skissene i din skissebok.

Det er alltid lurt å lagre ofte. Når du prøver ut forskjellige løsninger, bør du lagre skissene med ulike navn. Da er det lett å hente opp igjen eldre versjoner. Dette er spesielt nyttig hvis – rettere sagt, når – noe krasjer.  

​Du kan se hvor skissen er lagret hvis du velger «Show Sketch Folder» i «Sketch»-menyen

Du kan lage en ny skisse ved å velge kommandoen «New» fra «File»-menyen. Dette vil opprette en nye skisse i sitt eget vindu. 

5. Dele

​Processing-skisser er laget for å deles. Valget «Export Application» i «File»-menyen pakker koden din inn i en enkelt mappe. Export Application lager en app for Mac, Windows og /eller Linux etter ditt ønske.

Dette er en enkel måte å lage selvstendige, klikkbare versjoner av dine prosjekter som kan kjøres i fullskjerm eller i et vindu.

6. Programeksempler og referanseliste

Eksempler
​https://processing.org/examples/
Det å lære programmering innebærer å utforske massevis av kode: kjøre, endre, krasje, og forbedre inntil du har omformet koden til noe nytt. Processing-programvaren inneholder derfor veldig mange innebygde eksempler.

For å åpne et innegygd eksempel velger du «Examples» fra «File»-menyen. Dobbeltklikk for å åpne et eksempel. Eksemplene er gruppert i kategorier basert på funksjon, for eksempel: form, bevegelse, bilde. Finn et interessant emne i listen, kopier koden inn i editoren og kjør.

​​Mange av eksemplene er også tilgjengelige på nett: 
https://processing.org/examples/

Referanselista
https://processing.org/reference/
​Se nøye på koden du har skrevet. Funksjoner som ellipse() og fill() har en annen farge enn resten av teksten.

Hvis du ser en ukjent funksjon, kan du markere teksten, og klikke «Find in Referece» fra «Help»-menyen.

Du kan også høyreklikke (Ctrl+klikk på Mac) og velge «Find in Reference» fra menyen som dukker opp. Dette vil åpne en nettleser, og vise en beskrivelse av funksjonen.

Du får tilgang til hele i referanselista ved å velge «Reference» fra «Help»-menyen.

i referanselista forklares alle kommandoene i Processing. I forklaringen inngår både beskrivelse og eksempler. Eksemplene i referanselista er mye kortere og lettere å følge enn de du finner i mappa med eksempler (nett: https://processing.org/examples/)

Du bør ha lett tilgang til referanselista både når du leser kode, og når du programmerer. I referanselista kan du  lete deg fram etter emne eller etter alfabetet.

Ofte er det raskest å gjøre tekstsøk med Ctrl+F (Cmd+F) i nettleseren.

skolekoding.no
Stein Olav Kivle