Processing

Fortbildning för lärare

Hello World

Ett program i Processing utgår från två funktioner setup och draw. En funktion i programmering är ett namngivet stycke kod som kan anropas. Ibland används ordet "metod" istället för "funktion".

En funktion kan beräkna och returnera ett värde, exempelvis ett tal eller en textsträng. Vilken sort värde som returneras skrivs före funktionsnamnet. För funktioner som inte returnerar ett värde, utan bara utför ett stycke kod, används ordet void, vilket står för "ingenting".

När man definierar en funktion skriver man ett par parenteser efter funktionsnamnet. Innanför dessa parenteser kan man ange vilka parametervärden funktion ska kunna ta emot. Funktionerna setup och draw tar inte emot några parametervärden, därför står det inget mellan parenteserna.

Den kod en funktion utför, placeras mellan ett par måsvingar.

Den kod som ligger i funktionen setup utförs en gång när programmet startar. All initieringskod ska ligga i setup.

Funktionen draw är en loop som upprepas. Den kod som ligger i draw upprepas varje gång datorn "tickar".

ide
Processings IDE (Integrated development environment)

Övning - Ett första program

Skriv av koden och kör programmet.

void setup() {
  size(600, 400);
}

void draw() {
  textSize(20);
  text("Hello World!", 100, 100);
  rect(50, 200, 120, 60);
  ellipse(400, 200, 50, 70);
}

Ändra i koden så att en kvadratisk bild med följande utseende skapas:

Hej världen
Ett första "Hello World"-program.

Övning - Färger

Processing använder så kallade RGB-färger (Red Green Blue). Hur mycket rött, grönt, blått, som ska användas, anges med ett heltal mellan 0 och 255. Ett objekt färgsätts med kommandona fill (fyllnadsfärg) och stroke. Bakgrunden får sin färg från kommandot background.

Om exempelvis kommandot fill skrivs någonstans i koden, så används den fyllnadsfärg man angett ända tills ett nytt fill dyker upp. Eftersom draw-metoden upprepas, kommer ett enda fill-kommando i slutet av draw-metoden att påverka all fyllnadsfärg därefter.

Grafiken ritas upp i slutet av draw-metoden. Prova att lägga till kommandot

background(50, 100, 100);

överst respektive nederst i draw-metoden och studera skillnaden mellan de två programmen.

Färglägg ditt "Hello World"-program på valfritt sätt.

Hej världen med färg
"Hello World" med färg.

Övning - Animera!

Det finns två inbyggda variabler mouseX och mouseY som håller reda på muspekarens position. De två variablerna kan användas överallt där en parameter är ett tal. Testa att byta ut koden som ritar rektangeln till:

rect(mouseX, mouseY, 200, 200);

Testa även att byta ut någon annan parameter till mouseX eller mouseY, exempelvis något tal som används för en färg.