qr code

Kom igång med Processing

Kom igång med Processing

För en fullständig referens av den kod som används i Processing (versionen med p5.js) kan du se på sidan p5js: Reference.

Som nybörjare kan det vara bra att använda Lathund för p5.js vilken lämpligen skrivs ut.

Ett Processing-program har två huvudfunktioner setup och draw. Den kod som ska utföras för vardera funktionen är placerad mellan måsvingar. Måsvingar användas för att kapsla in kod.

Den kod som ligger i setup-funktionen utförs en gång når programmet startar.

Den kod som ligger i draw-funktionen utförs om och om igen, ungefär som en för-alltid-loop i Scratch.

jämförelse 1
Jämförelse mellan Scratch och Processing. Funktionen draw() är som en för-alltid-loop.

I bilden ovan är den kod som ligger efter // så kallade kommentarer. En kommentar är till för den som läser koden och exekveras inte när programmet körs. Som programmerare kan man lägga in kommentarer för att beskriva vad programmet gör. Man kan också använda kommentarer för testkörning av program, man "kommenterar bort" viss kod under testkörningen istället för att helt ta bort koden.

I Processing kan du skriva kommentarer på två sätt. Du kan kommentera bort en rad genom att skriva // i början av raden. Du kommenterar bort flera rader genom att innesluta koden mellan /* och */.

function setup() {
  // En rad som kommentar.
}

function draw() {
  /*
  Flera rader
  som kommentar.
  */
}

Startkoden i OpenProcessing

När du gör en ny sketch i OpenProcessing startar du alltid med lite kod som automatgenererats.

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);

}

function draw() {
	ellipse(mouseX, mouseY, 20, 20);
}

Du kan köra koden genom att klicka på pilen i den översta raden.

startkod
Kör och editera kod.

Du sparar din kod genom att klicka på Save i det översta högra hörnet. Du kan sedan döpa programmet, skriva en beskrivning, skriva hur programmet ska köras, välja vilken bild som ska visas ovanför programmets titel, samt välja licens. Om du väljer att spara programmet som Draft, kommer programmet inte att visas i de flöden dina följare kan se. När du är klar klickar du på Submit i det översta högra hörnet.

spara

Vi ska börja med att se vad som händer när man ändrar i startkoden.

Ritområdet (canvas)

Eftersom OpenProcessing körs på webben, utgår programmet ifrån hur en hemsida är uppbyggd. En hemsida kan innehålla interaktiva ritområden som representeras av html-objekt kallade canvas. Funktionen createCanvas(<bredd>, <höjd>) gör ett nytt sådant ritområde på hemsidan. Du kan känna igen en funktion i Processing genom att den alltid har ett par parenteser efter funktionsnamnet. Funktionen har två parametrar som anger ritområdets bredd och höjd. När du använder en funktion, anger du vilka värden de olika parametrarna ska ha. Det värde en parameter ska ha, kallas för argument. Argumenten till en funktion skrivs efter funktionsnamnet mellan parenteserna. Flera argument separeras av kommatecken.

Exempel 1

Utgå ifrån startkoden.

Testa att ändra argumenten till funktionen createCanvas, ändra exempelvis bredden till 600 och höjden till 400. Testkör sedan programmet.

Om du vill ha ett maximalt fönster igen, får du ändra tillbaka till windowWidth och windowHeight.

Fördefinierade funktioner och variabler

Funktionerna createCanvas, background och ellipse är fördefinierade funktioner i Processing. Vi ska senare se hur man själv kan definiera funktioner och använda dem i sin kod. Att använda en funktion kallas för att göra ett funktionsanrop eller att anropa funktionen.

Funktionen background ritar över hela ritområdet.

Exempel 2

Utgå ifrån startkoden.

Testa att flytta funktionsanropet

background();

från setup-funktionen till överst i draw-funktionen. Testkör programmet.

Kan du förklara vad som händer?

Variablerna windowWidth, windowHeight, mouseX och mouseY är fördefinierade variabler som håller reda på fönstrets storlek och muspekarens position.

Processing skiljer på bokstäver skrivna som versaler och gemener. Om du exempelvis byter koden till

function draw() {
	ellipse(mousex, mousey, 20, 20);
}

och sedan försöker köra koden, kommer du att få ett felmeddelande.

I Processing används konventionen att variabelnamn som består av flera ord skrivs så att första ordet börjar med liten bokstav, de efterföljande orden inleds med stor bokstav. Detta sätt att skriva variabelnamn kallas för Camel case.

Funktionen ellipse(<x>, <y>, <bredd>, <höjd>) gör en ellips med mittpunkt given av koordinaterna <x> och <y>, med bredden <bredd> och höjden <höjd>.

Observera att

i alla kodexempel används ord inneslutna mellan < och > som platshållare för tal, text, variabelnamn eller uttryck.

<platshållare>

När du skriver din kod ska alla platshållare bytas ut mot tal, text, variabelnamn eller uttryck.

Ellipsfunktionens parametervärdena kan skrivas in som tal eller variabler, exempelvis variablerna mouseX och mouseY.

Exempel 3

Utgå ifrån startkoden.

Testa att ändra bredden och höjden på den ellips som ritas ut.

Satser och semikolon

En sats inom programmering är ett fristående stycke kod som programmet kan utföra. En enkel sats skrivs på en rad och kan exempelvis vara ett funktionsanrop:

ellipse(mousex, mousey, 20, 20);

En sammansatt sats kan innehålla flera enkla satser:

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

I Processing avslutas en sammansatt sats oftast med en högermåsvinge. En enkel sats avslutas helst med ett semikolon.

I den version av Processing som bygger på Java måste enkla satser avslutas med semikolon. I den version av Processing som bygger på Javascript är det inte nödvändigt att använda semikolon men det rekommenderas. Det program som läser och kör din Javascript-kod kallas för Javascript-interpretatorn. Javascript-interpretatorn kan själv avgöra att när en rad avslutas ska det förmodligen vara ett semikolon. Det blir dock problem om du skriver flera satser på en rad, utan att använda semikolon för att avsluta satserna.

Denna kod med semikolon fungerar:

function setup() {
	createCanvas(windowWidth, windowHeight); background(100);
}

Denna kod utan semikolon fungerar inte:

function setup() {
	createCanvas(windowWidth, windowHeight) background(100)
}

Nu kan man undra varför man skulle vilja skriva två satser på samma rad ‐ det gör koden mycket mer svårläst. Inom Javascript är det dock bra om all kod kan skrivas på en enda rad och anledningen till detta är att Javscript-program ofta minifieras så att de tar så liten plats som möjligt. Du kan själv testa att minifiera OpenProcessings startkod på sidan JSCompress. Eftersom Javascript används på webben, måste den webbläsare som ska köra ett Javscript-program hämta koden från en server. Att överföra filer över internet tar tid och därför brukar man se till att alla filer är så små som möjligt. Genom att minifiera Javascript-koden blir de filer som ska överföras från server till webbläsare så små som möjligt.

En nybörjare i programmering behöver egentligen inte bry sig om tekniska detaljer som minifierad kod, men det kan vara bra att redan från början bygga upp ett muskelminne i händerna som går att använda även om man övergår till att programmera Java eller till att göra längre Javascript-program som ska minifieras.

Färger

Det finns olika system för att använda färger i Processing. Vi kommer bara att ta upp det så kallade RGB-systemet.

I Processing kan du antingen använda en gråskala eller RGB-färger.

Om du använder ett argument till funktionen background(<grå>) används en gråskala. Värdet på argumentet <grå> är minst 0 och högst 255.

Om du använder tre argument används RGB-färger: background(<röd>, <grön>, <blå>), där varje parameter anger hur mycket rött, grönt och blått som ska användas. Varje färg ska vara ett tal som är minst 0 och högst 255.

Exempel 4

Utgå ifrån startkoden och testa att rita ut bakgrunden med olika gråskala. Vilken färg ritas om argumentet 0 används? Vilken färg ritas om argumentet 255 används?

Testa att använda tre argument och se vilka färger olika kombinationer ger.

Fyllnadsfärg och kantfärg

När en ellips ritas upp används två färger, fyllnadsfärgen som ritar upp ellipsens innandöme och en kantfärg. Man kan specificera fyllnadsfärgen och kantfärgen innan ellipsen ritas upp med hjälp av funktionerna fill respektive stroke.

Genom att använda ett argument ritas en färg ur gråskalan, med tre argument ritas en RGB-färg.

fill(<grå>);
stroke(<grå>);
fill(<röd>, <grön>, <blå>);
stroke(<röd>, <grön>, <blå>);

Du kan göra ellipsen halvgenomskinlig genom att använda ett fjärde argument. Det fjärde argumentet anger graden av genomskinlighet och brukar kallas för färgens alpha-värde. Om du använder gråskala, anger du genomskinligheten med ett andra argument.

fill(<röd>, <grön>, <blå>, <alpha>);
stroke(<röd>, <grön>, <blå>, <alpha>);
fill(<grå>, <alpha>);
stroke(<grå>, <alpha>);

Du kan välja att göra kanten tjockare genom att använda funktionen

strokeWeight(<tjocklek>);

där <tjocklek> anger hur många pixlar som ska användas för kantens bredd.

Du kan ange att kanten inte ska ritas ut alls, eller att ellipsen inte ska fyllas i alls, med hjälp av kommandona:

noStroke();
noFill();

För att återigen rita kant eller fyllnad, använder du funktionen stroke eller fill med argument som anger den färg som ska användas.

Exempel 5

Utgå ifrån startkoden och testa att rita ut ellipsen med olika färger.

Testa att rita halvgenomskinliga ellipser.

Testa att ändra kantens tjocklek och att inte rita ut kanten alls.

Koordinatsystem

I Processing används det koordinatsystem som är vanligast när man programmerar, y-axeln ökar i riktning neråt och origo ligger i det övre vänstra hörnet.

koordinatsystem
Koordinatsystem i Processing.

Om man tänker sig hur text och bilder är positionerade på exempelvis en hemsida, så är deras position relativt det övre vänstra hörnet alltid densamma, oavsett hur man förstorar eller förminskar fönstret. Att ha origo i det övre vänstra hörnet är därför naturligt i en programmeringsmiljö.

Exempel 6

Utgå ifrån startkoden och testa att rita ut ellipsen på olika positioner genom att skriva in olika fixa värden för de två första argumenten till kommandot ellipse.

Testa att behålla mouseY för y-positionen men låt x-koordinaten vara ett fixt värde som du skriver in i koden.

Testa att rita två ellipser, en där x-koordinaten ges av mouseX och y-koordinaten av mouseY, och en ellips där du byter plats på mouseX och mouseY.

Testa att rita ellipsen mitt i fönstret. Den bredd och höjd som din canvas har ligger lagrat i de fördefinierade variablerna width och height, dessa variabler kan användas när ellipsen ska ritas ut.

ellipse(width/2, height/2, 20, 20);

Text

I Processing innesluts textsträngar mellan citationstecken. Om du vill visa text någonstans på ritområdet kan du använda funktionen text som har tre parametrar, den textsträng som ska visas och textens koordinater.

	text("Hello World!", <x>, <y>);

Koordinaterna anger textens nedre vänstra hörn. Man kan se till att koordinaterna anger textens mittpunkt genom att använda kommandot:

	textAlign(CENTER);

Du kan också ändra storlek på texten med hjälp av kommandot:

	textSize(<storlek>);

Man kan förena flera textsträngar genom att använda tecknet +. Att förena text kallas för att konkatenera text. Om man konkatenerar en textsträng med ett variabelnamn, görs variabelns värde om till en textsträng.

text("x = " + mouseX, 100, 100);
text("y = " + mouseY, 100, 150);

Text i konsolen

Du kan skriva text i konsolen med kommandot print(<textsträng>). Text i konsolen är framförallt till för felsökning. Man skriver ut variabelvärden eller annat för att kontrollera att allt fungerar på rätt sätt.

Exempel 7

Utgå ifrån denna kod för draw-funktionen.

function draw() {
	background(100);
	print("x =" + mouseX + " y =" + mouseY);
	text("x =" + mouseX + " y =" + mouseY, mouseX, mouseY);
}

Testa att göra texten större i setup-funktionen och att centrera texten kring muspekaren.

Ändra i koden så att koordinaterna istället skrivs ut med hjälp av parenteser, så att exempelvis texten

x = 123 y = 200

istället skrivs som

(123, 200)

Geometriska figurer

Förutom att rita ellipser kan man rita en mängd andra geometriska objekt i Processing.

Ellips

Processing använder sig av olika metoder för att rita ut ellipser. Den förvalda metod som användas är

ellipse(<x>, <y>, <bredd>, <höjd>);
ellips

Om du bara anger tre argument, används samma värde för både bredden och höjden, det blir en cirkel.

ellipse(<x>, <y>, <bredd>);

Med kommandot ellipseMode(RADIUS) byter du metod så att parametrarna för bredd och höjd istället anger halva bredden och halva höjden. Om bredden är lika med höjden är det cirkelns radie som anges.

Om du genomgående vill använda radien istället för diametern kan du använda

ellipseMode(RADIUS);

i setup-funktionen. För att återgå till den förvalda metoden använder du kommandot:

ellipseMode(CENTER);

Rektangel

Kommandot för att rita en rektangel liknar kommandot för en ellips, argumenten skiljer sig dock åt på så vis att den position som anges är det övre vänstra hörnet.

rect(<x>, <y>, <bredd>, <höjd>);
rektangel

Med en femte parameter kan du ange en radie som används för att ge rektangeln rundade hörn.

rect(<x>, <y>, <bredd>, <höjd>, <r>);
rektangel med rundade hörn

Om du vill ange positionen för rektangelns mittpunkt istället för det övre vänstra hörnet, byter du utritningsmetod med kommandot:

rectMode(CENTER);

För att återgå till den förvalda metoden använder du kommandot:

rectMode(CORNER);

Sträcka och punkt

Du kan rita en punkt som är en pixel stor med kommandot:

point(<x>, <y>);

För att rita en sträcka anger du fyra argument för sträckans två ändpunkterna.

line(<x1>, <y1>, <x2>, <y2>);
sträcka

Triangel och fyrhörning

Du kan rita en triangel genom att ange sex argument för triangelns hörn och en fyrhörning genom att ange åtta argument.

triangle(<x1>, <y1>, <x2>, <y2>, <x3>, <y3>);
quad(<x1>, <y1>, <x2>, <y2>, <x3>, <y3>,  <x4>, <y4>);
triangel

Båge och sektor

Om du vill rita upp en ellipsbåge eller en ellipssektor måste du ange en vinkel för den del av ellipsen som ska användas. Det vinkelmått som används i Processing är radianer. För att kunna använda grader istället för radianer, skriver du

angleMode(DEGREES);

i setup-funktionen.

Vinklar mäts i medurs riktning från den positiva x-axeln. Konventionen inom matematik är annars att positiva vinklar mäts i moturs riktning från positiva x-axeln. Att riktningen är tvärtom inom programmering beror på att y-axeln ökar i riktning nedåt.

Dra i den blå punkten!

Kommandot arc har sex argument. De fyra första argumenten motsvarar argumenten för kommandot ellips. De två nästföljande argumenten anger vinklarna för ändpunkterna.

arc(<x>, <y>, <bredd>, <höjd>, <vinkel1>, <vinkel2>);

Kommandot ritar en sektor och en båge där sektorn har den fyllnadsfärg du angett med fill och bågen den kantfärg du angett med stroke.

Med ett sjunde argument kan du ange tre olika metoder: OPEN, CHORD och PIE.

Exempel 8

Utgå ifrån denna kod:

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	angleMode(DEGREES);
}

function draw() {
	strokeWeight(5);
	arc(0.25*width, 0.25*height, 200, 100, 45, 270);
	arc(0.75*width, 0.25*height, 200, 100, 45, 270, OPEN);
	arc(0.25*width, 0.75*height, 200, 100, 45, 270, CHORD);
	arc(0.75*width, 0.75*height, 200, 100, 45, 270, PIE);
}

Testa att ändra vinklarna som används.

Testa att ändra fyllnadsfärg och kantfärg samt att lägga in noFill() och noStroke() på olika ställen i koden.

Slumptal

Du kan generera ett slumptal genom att ange en övre gräns för det slumptal som genereras med kommandot random(<b>). Då genereras ett tal som är större än eller lika med noll och mindre än b, dvs 0 ≤ slumptal < b. Talet är ett flyttal (dvs ett decimaltal).

Om du använder två argument används dessa som nedre och övre gränser. Kommandot random(<a>, <b>) genererar ett slumptal som är större än eller lika med a och strängt mindre än b, dvs a ≤ slumptal < b.

Om du använder funktionen utan några argument, dvs om du skriver random(), genereras ett slumptal som är större än eller lika med 0 och strängt mindre än 1, dvs 0 ≤ slumptal < 1.

Ett slumptal kan användas överallt där ett tal används som parameter. Det är viktigt att både parenteserna till kommandot random är med.

Observera att

en sats innehåller alltid lika många vänsterparenteser som högerparentes. En vänsterparentes måste alltid paras ihop med en högerparentes.

På samma sätt måste en vänstermåsvinge alltid paras ihop med en högermåsvinge

()

{}

Exempel 9

Med RGB-färger ska varje färg (röd, grön och blå) anges som ett heltal som är större än eller lika med noll och mindre än eller lika med 255. För att slumptalsgenerera ett sådant tal används därför random(256).

Lägg in följande kod i draw-funktionen för att slumptalsgenerera en röd färg.

fill(random(256), 0, 0);
ellipse(mouseX, mouseY, 20);

Lägg in slumptalsgenerade tal för grön och blå så att färgen helt slumpas fram!

Se till att positionen slumpas fram istället för att följa muspekaren. De fördefinierade variablerna width och height håller reda på ritområdets bredd och höjd.

ellipse(random(width), random(height), 20);

Variabler

Om vill göra egna variabler i Processing bör du först deklarera dessa genom att skriva var följt av de variabelnamn du vill använda separerade av kommatecken.

Ett variabelnamn kan bestå av bokstäver, siffror, understreck (_) och dollartecken ($). Notera att ett variabelnamn inte får innehålla en blank. Namnet måste inledas med antingen en bokstav eller understreck. Att inleda ett variabelnamn med understreck brukar enligt konvention bara göras i speciella sammanhang som vi inte går igenom här.

Du kan döpa dina variabler till vad som helst men koden blir lättare att läsa om variabelnamnen är beskrivande.

Variabler som är deklarerade inuti en funktion sägs vara lokalt deklarerade. Med följande kod

function draw() {
	var x, y, höjd, bredd;
	x = random(width);
	y = random(height);
	höjd = random(50);
	bredd = random(50);
	ellipse(x, y, bredd, höjd);
}

kan variablerna x, y, höjd, bredd bara användas i draw-funktionen, inte i setup-funktionen.

Om du vill kunna använda en variabel överallt i programmet måste du deklarera denna överst i programmet. En sådan variabel sägs vara globalt deklarerad.

Med följande kod slumpas höjden och bredden varje gång programmet startar.

var höjd, bredd;

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	höjd = random(50);
	bredd = random(50);
}

function draw() {
	ellipse(mouseX, mouseY, bredd, höjd);
}

För variabler som har numeriska värden kan du använda aritmetiska operatorer för att skriva aritmetiska uttryck.

Aritmetiska operatorer.
operator operation
+ addition
- subtraktion
* multiplikation
/ division

När du anger argument till en funktion kan du göra detta som ett aritmetiskt uttryck. Det går exempelvis att skriva:

ellipse(mouseX * 0.7, mouseY + 10, 20);

Blanka tecken används bara för att göra koden mer lättläst. Blanka tecken ignoreras när programmet körs. Det är ingen skillnad i funktionalitet på koden

ellipse(mouseX * 0.7, mouseY + 10, 20);

och koden

ellipse(mouseX*0.7,mouseY+10,20);

Tilldelningar

Att ge en variabel ett värde kallas för att tilldela variabeln ett värde. En tilldelning görs med ett likhetstecken.

Det går att tilldela en variabel ett värde samtidigt som man deklarerar den.

var höjd = 70, bredd = 100;

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
	ellipse(mouseX, mouseY, bredd, höjd);
}

Likhetstecknet som används vid en tilldelning är inte en logisk likhet. Om du vill öka en variabels värde med 5 kan du exempelvis skriva:

x = x + 5;

Det som står på raden ovan hade inte varit sant om det varit en logisk likhet. Tänk dig att det som står på höger sida om likhetstecknet först beräknas. Om x från början har värdet 20 ger beräkningen värdet 25. Därefter tilldelas x värdet 25.

Exempel 10

Testa följande kod:

var x, y;

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	x = width/2;
	y = 0;
}

function draw() {
	y = y + 5;
	ellipse(x, y, 20);
}

Ändra i koden så att ellipsen istället rör sig nerifrån och upp!

Ändra i koden så att ellipsen rör sig både i x-led och y-led!

Villkorssatser

En villkorssats används om programmet ska utföra olika saker beroende på om något villkor är sant eller falskt. En villkorssats kan också kallas för en selektion eller ett alternativ. Det är också mycket vanligt att man kallar villkorssatser för if-satser eller if-else-satser.

Villkorssatser i Processing har samma struktur som om-block och om-annars-block i Scratch.

jämförelse 2
Villkorssatser i Scratch och i Processing.

För att koden ska vara lättare att läsa, dras den kod som ligger inuti villkorssatsen in. Att dra in kod på detta vis kallas för att indentera koden.

I OpenProcessing används kortkommandot

ctrl + b

till att snygga till koden så att allting indenteras. Bokstaven b står för beautify code.

Måsvingarna används för att stänga in flera enkla satser. Om en villkorssats bara använder sig av en enda sats, går det bra att inte använda måsvingar. Med följande kod ska bara en sats utföras om poängen är noll:

if (poäng == 0) 
		text("Bu!", 100, 100);

Om du i efterhand kommer på att flera satser ska utföras om något villkor är sant, måste du i efterhand lägga till måsvingar.

Booleska variabler

En variabel som bara kan anta värdet sann eller falsk kallas för en boolesk variabel. I Processing används värdena true och false för booleska variabler. Booleska variabler kan användas som villkor i villkorssatser

Det finns två fördefinierade booleska variabler mouseIsPressed och keyIsPressed som håller reda på om musknappen är nedtryckt respektive om någon tangent är nedtryckt.

Exempel 11

Gör ett enkelt ritprogram med följande kod:

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
	if (mouseIsPressed) {
		ellipse(mouseX, mouseY, 20);
	}
}

Lägg till kommandot

print(mouseIsPressed);

i draw-funktionens if-sats. Testkör programmet för att se vilka värden som skrivs ut i konsolen. Om konsolen inte visas från början kan du visa den genom att klicka på ikonen i det nedre högra hörnet.

Jämförelseoperatorer

Eftersom likhetstecknet används för att tilldela variabler värden, används dubbla likhetstecken för logisk likhet. Det finns flera jämförelseoperatorer i OpenProcessing.

Jämförelseoperatorer i Processing.
operator jämförelse
== lika med
!= skilt från
< mindre än
> större än
<= mindre än eller lika med
>= större än eller lika med

En jämförelse är antingen sann eller falsk och fungerar därför som villkor till en villkorssats.

Logiska operatorer

Det finns tre logiska operatorer i Processing: och, eller, inte.

Logiska operatorer i Processing.
operator logisk operation
&& och
|| eller
! inte
Exempel 12

Gör en studsande boll genom att lägga in följande kod:

var x, y, ySteg;

function setup() {
	createCanvas(windowWidth, windowHeight);
	x = width/2;
	y = height/2;
	ySteg =  5;
}

function draw() {
	background(100);
	if (y > height || y < 0) {
		ySteg = -ySteg;
	}
	y = y + ySteg;
	ellipse(x, y, 20);
}

Lägg till en variabel xSteg och se till att bollen studsar också studsar i x-led.

Prioritetsordningen är sådan att först beräknas aritmetiska operationer, sedan jämförelser och sist logiska operationer. På så vis fungerar följande kod:

if (y + 5 > height || y + 5 < 0) {
	//kod
}

Först beräknas y + 5, sedan utförs större än och mindre än, sist utförs logiskt eller.

Flera förgreningar

En villkorssats i sin enklaste form ser till att något utförs om ett villkor är sant.

if (<villkor>) {
	// Kod som utförs om villkor sant.
}

En villkorssats kan också förgrena sig till två alternativ.

if (<villkor>) {
	// Kod som utförs om villkor sant.
} else {
	// Kod som utförs om villkor falskt.
}

Om du vill ha flera förgreningar kan du använda else if konstruktioner.

if (<villkor1>) {
	// Kod som utförs om villkor1 sant.
} else if (<villkor2>) {
	// Kod som utförs om villkor1 falskt och villkor2 sant.
} else if (<villkor3>) {
	// Kod som utförs om villkor1 och villkor2 är falska
	// men villkor3 sant.
} else {
	// Kod som utförs om alla villkor är falska.
}

En villkorssats kan innehålla ett godtyckligt antal else if men högst ett else.

Exempel 13

Testa att rita tre olika färger med följande kod:

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	noStroke();
}

function draw() {
	if (mouseX < width/3) {
		fill(255, 0, 0);
	} else if (mouseX < 2*width/3) {
		fill(0, 255, 0);
	} else {
		fill(0, 0, 255);
	}
	ellipse(mouseX, mouseY, 20, 20);
}

Bilder

Om du vill använda bilder i OpenProcessing måste du först ladda upp dem till OpenProcessings server.

Spara ditt program. Om du inte har en meny till höger om kodfönstret börjar du med att klicka på de tre vertikala punkterna till höger.

tre prickar

Klicka på tabben Files och sedan på Upload Files. Välj någon bildfil du har lagrad på din dator.

upload

Varje bild lagras i variabler som kan deklareras överst i programmet.

var imgHappy, imgSad;

När programmet startar måste du ladda bildfilerna så att de sparas i de variabler du gjort. Detta gör du i setup-funktionen.

imgHappy = loadImage('happy.svg');
imgSad = loadImage('sad.svg');

Du ritar ut en bild på någon position i ritområdet med kommandot:

image(<bildvariabel>, <x>, <y>);

Positionen är i bildens övre vänstra hörn. Du kan se till att positionen är centrerad med kommandot:

imageMode(CENTER);

Du kan ange bildens bredd och höjd genom att lägga till två argument till:

image(<bildvariabel>, <x>, <y>, <bredd>, <höjd>);

 

Exempel 14

Använd två bildfiler som du har lagrade på din dator.

Om du inte har några bilder kan du högerklicka på dessa två och ladda ner dem till din dator.

happy sad

Ladda upp filerna till OpenProcessing och testa sedan denna kod:

var imgHappy, imgSad;

function setup() {
	createCanvas(windowWidth, windowHeight);
	imgHappy = loadImage('happy.svg');
	imgSad = loadImage('sad.svg');
	imageMode(CENTER);
}

function draw() {
	background(100);
	image(imgHappy, mouseX - 100, mouseY);
	image(imgSad, mouseX + 100, mouseY);
}

Om du använder egna bilder kan du välja andra beskrivande variabelnamn.

Ändra på bildernas bredd och höjd. De är kvadratiska från början men det är lätt att deformera dem.

Kollisionsdetektering

I Scratch finns det flera block som används för att kolla om en sprajt rör en färg, annan sprajt eller kant. I Processing måste programmeraren själv programmera alla kollisioner. För att kontrollera om en position är vid kanten kan man använda att alla x-koordinater i ritområdet är begränsade av 0 och width, y-koordinaterna begränsas av 0 och height.

Kommandot dist(<x1>, <y1>, <x2>, <y2>) beräknar avståndet mellan punkterna (x1, y1) och (x2, y2). Avståndet mellan punkter kan användas för att kolla om muspekaren befinner sig på en cirkel.

Exempel 15

Följande kod upptäcker om muspekaren befinner sig på en cirkel:

var x, y, radie;

function setup() {
	createCanvas(windowWidth, windowHeight);
	x = width/2;
	y = height/2;
	radie =  100;
}

function draw() {
	background(100);
	ellipse(x, y, 2*radie, 2*radie);
	if (dist(mouseX, mouseY, x, y) < radie) {
		text("Innanför", 100, 100);
	} else {
		text("Utanför", 100, 100);
	}
}

Testa koden!

Lägg till kommandot

ellipseMode(RADIUS);

i setup-funktionen och ändra i koden för ellipsen så att programmet fortfarande fungerar.

Att upptäcka kollision mellan muspekare och rektangel är något besvärligare.

Exempel 16

Utgå ifrån följande kod för att upptäcka kollision med rektangel:

var x, y, bredd, höjd;

function setup() {
	createCanvas(windowWidth, windowHeight);
	x = width/2;
	y = height/2;
	bredd =  200;
	höjd = 100;
}

function draw() {
	background(100);
	rect(x, y, bredd, höjd);
	if (mouseX > x && mouseX < width) {
		text("Innanför", 100, 100);
	} else {
		text("Utanför", 100, 100);
	}
}

Lägg till kod i if-satsens villkor så att texten "Innanför" bara visas då muspekaren befinner sig innanför rektangeln.

Händelser

En händelse i Processing är exempelvis när användaren klickar på en tangent eller musen. En del händelsehantering kan hanteras inuti draw-funktionen med hjälp av variablerna mouseIsPressed och keyIsPressed. Det finns också funktioner för händelsehantering som ligger utanför draw-funktionen.

Mushändelser

Det finns fyra funktioner för att hantera mushändelser: mouseMoved(), mouseDragged(), mouseReleased() och mouseClicked()

Exempel 17

Testa följande kod:

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
	ellipse(mouseX, mouseY, 20, 20);
}

function mouseReleased() {
	print("Du släppte upp musen.");
}

Lägg på liknande sätt till två funktioner mouseMoved() och mouseDragged() som skriver ut lämpliga meddelanden i konsolen. Testa ditt program för att se vad skillnaden är mellan dessa två händelser.

Tangenthändelser

Alfanumeriska tangenter är sådana tangenter som skriver ut någon symbol om man exempelvis använder en ordbehandlare. Andra tangenter skriver inte ut något utan har speciella funktioner, exempelvis kontrolltangenten, piltangenter, tab, m.fl.

För att upptäcka händelsen att en alfanumerisk tangent trycks ner, kan du använda funktionen keyTyped() som utlöses exakt en gång när en alfanumerisk tangent trycks ner. Den tangent som tryckts ner lagras i variabeln key.

Exempel 18

Testa följande kod:

var meddelande;

function setup() {
	createCanvas(windowWidth, windowHeight);
	meddelande = "";
	textAlign(CENTER);
}

function draw() {
	background(100);
	text("meddelande = " + meddelande, width/2, height/2);
}

function keyTyped() {
	meddelande = meddelande + key;
}

Testkör koden och se vad som händer om du klickar på alfanumeriska tangenter. Vad händer om du klickar på enter, tab, och piltangenter?

För att kontrollera vilken alfanumerisk tangent som tryckts ner kan du jämföra key med valfritt tecken innesluten av citationstecken eller apostrof.

För att upptäcka alla sorters tangenttryckningar kan funktionen keyPressed() användas, vilken utlöses precis en gång när någon tangent trycks ner.

För icke-alfanumeriska tangenter används variabeln keyCode. För att ta reda på vilken icke-alfanumerisk tangent som tryckts ner, kan du jämföra keyCode med något av följande:

BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW

Exempel 19

Testa följande kod:

function setup() {
	createCanvas(windowWidth, windowHeight);
}

function keyTyped() {
	if (key == "a") {
		print("Du skrev a");
	}
}

function keyPressed() {
	if (keyCode == ENTER) {
		print("Du klickade på enter.");
	}
}

Testkör koden och se vad som händer om du klickar på lilla a respektive stora A.

Om du vill upptäcka att en bokstav tryckts ner men inte bryr dig om huruvida det är en stor eller liten bokstav, kan du jämföra key med en stor bokstav i funktionen keyPressed(). Lägg till följande kod i keyPressed():

if (key == "B") {
	print("Du skrev b");
}

Testa sedan att klicka på b och på B.

Om du vill kunna styra ett objekt genom att hålla två tangenter nere samtidigt, kan du använda funktionen keyIsDown(<tangentkod>)> inuti draw-funktionen.

Exempel 20

Testa följande kod:

var x, y;

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	x = width/2;
	y = height/2;
}

function draw() {
	ellipse(x, y, 20, 20);
	if (keyIsDown(LEFT_ARROW)) {
		x = x - 5;
	}
	if (keyIsDown(RIGHT_ARROW)) {
		x = x + 5;
	}
	if (keyIsDown(UP_ARROW)) {
		y = y - 5;
	}
	if (keyIsDown(DOWN_ARROW)) {
		y = y + 5;
	}
}

Testkör koden och prova att styra med två tangenter samtidigt.

Tid

Den fördefinierade variabeln frameCount håller reda på hur många gånger draw-funktionen genomlöpts. Det går att stänga av draw-metoden när den genomlöpts ett visst antal gånger med kommandot noLoop(). Koden

if (frameCount == 60) {
	noLoop();
}

stänger av draw-funktionen efter 60 tickningar.

Funktionen draw genomlöps ungefär 60 gånger per sekund, andelen frames per second (fps) är 60. Du kan göra så att draw-funktionen tickar långsammare genom att använda funktionen frameRate(<fps>). Exakt hur ofta draw-funktionen tickar beror på hur snabb datorn är.

Om du vill mäta tid exakt, kan du använda funktionen millis() vilken mäter hur många millisekunder det gått sedan programmet startade.

Exempel 21

Följande kod visar hur en enkel timer kan göras:

var start, stopp;

function setup() {
	createCanvas(windowWidth, windowHeight);
	start = -1;
	stop = -1;
	textSize(32);
}

function draw() {
	background(100);
	if (start == -1) {
		text("Klicka på mellanslag två gånger!", 100, 100);
	} 
	if (stop != -1) {
		text("Det tog "+stop +" millisekunder.", 100, 200);
	}
}

function keyTyped() {
	if (key == " ") {
		if (start == -1) {
			start = millis();
		} else {
			stop = millis()-start;
			start = -1;
		}
	}
}

Testkör koden. Om du inte vill visa en massa decimaler kan du avrunda med hjälp av funktionen round(<tal>)

Funktionen millis() mäter tid med hjälp av datorns klocka. Det finns flera funktioner som med hjälp av datorns klocka kan ta reda på vilket år det är eller vilken månad, dag, timme, minut, sekund det är. Funktionerna är:

year(), month(), day(), hour(), minute(), second()

Programmeringsuppgifter

Uppgift 1

Slumptalskonst

Utgå ifrån Exempel 9 och gör ett program som slumpar fram rektanglar eller ellipser i olika storlekar och färger. Testa att använda halvgenomskinliga färger. Välj själv vilka variabler du vill använda.

slumpkonst

Uppgift 2

Vertikal och horisontell slumptalskonst

Deklarera två variabler x och y överst i programmet.

Börja med att göra ett program som slumpar fram ellipser längs ett vertikalt band som i det vänstra ritområdet nedan. Varje gång programmet startar ska bandet med ellipser slumpas till en ny position i x-led. Se till att varje ellips har en slumpmässig färg, en slumpmässig bredd och en slumpmässig höjd. Testkör ditt program flera gånger för att kontrollera att det vertikala bandet hamnar på olika ställen.

Klicka i ett ritområde för att "starta programmet".

Ändra i programmet så att ellipserna istället slumpas fram längs ett horisontellt band, som i det högra ritområdet ovan.

Uppgift 3

Statisk bild med absoluta koordinater

Se till att ritområdet har bredden 600 och höjden 400. Se till att bakgrunden är vit.

Se till att någon svart text med storleken 32 visas mitt i bilden.

Rita först en blå ellips och sedan en grön rektangel så att ellipsen och rektangeln överlappar men inte ritas över texten.

absolut

Ändra nu i koden så att den blå ellipsen ritas överst, ovanpå rektangeln.

Uppgift 4

Statisk bild med relativa koordinater.

Se till att ritområdet täcker hela skärmen och att bakgrunden är svart.

Rita en vit rektangel vars bredd är 80% av ritområdets bredd och vars höjd är 80% av ritområdets höjd. Se till att rektangeln placeras så att den är mitt i bilden. Använd variablerna width och height för ritområdets bredd respektive höjd. Rektangelns bredd kan skrivas som 0.8*width. Hur skrivs rektangelns höjd? Hur beskriver du positionen (x, y) för rektangelns övre vänstra hörn med hjälp av width och height?

Rita fyra cirklar vars radie är 5% av ritområdets bredd. Varje cirkel ska vara placerad så att dess mittpunkt är på avståndet 25% av höjden från den kant som är närmast ovanför eller under cirkeln, avståndet till den kant som är närmast till höger eller vänster ska vara 25% av bredden.

relative

Testkör ditt program. Ändra storlek på webbläsaren och testkör sedan ditt program igen.

Uppgift 5

Visa tre cirklar

Gör ett program som visar tre cirklar ovanför varandra. En svart cirkel ska visas där muspekaren är. En röd cirkel ska visas ovanför den svarta cirkeln. En blå cirkel ska visas nedanför den svarta cirkeln. Cirklarna ska inte ha någon kant. Cirklarna ska tangera varandra.

Dra med musen!

Uppgift 6

Rita ellipser eller rektanglar

Gör ett program som ritar en rektangel om man trycker ner någon tangent och annars ritar en ellips. Använd en if-else-sats och den fördefinierade variabeln keyIsPressed.

Dra med musen och håll tangent nedtryckt!"

Uppgift 7

Färglägg Tysklands flagga

Tysklands flagga har dimensionerna 3:5, dvs om höjden är 3 längdenheter så är bredden 5 längdenheter. Flaggan är indelat i tre lika stora horisontella band. Det översta bandet är svart. Det mellersta bandet är rött med RGB-färgen (221,0,0). Det nedersta bandet är gult med RGB-färgen (255,206,0).

Se till att ritområdet har rätt dimensioner. Lägg in kod som ritar en ellips i rätt färg beroende på var muspekaren befinner sig så att flaggan ritas ut när man drar med musen över ritområdet. Använd en villkorssats med en else if konstruktion.

Dra med musen!

Uppgift 8

Färglägg Sveriges flagga

Sveriges flagga har dimensionerna 10:16, dvs om höjden är 10 längdenheter så är bredden 16 längdenheter.

Den blå färgen är RGB-färgen (0, 106, 167) och den gula RGB-färgen (254, 204, 0).

De horisontella fälten är i förhållandet 5:2:9, dvs 5 längdenheter blått, 2 längdenheter gult, 9 längdenheter blått (från vänster till höger).

De vertikala fälten är i förhållandet 4:2:4, dvs 4 längdenheter blått, 2 längdenheter gult, 4 längdenheter blått.

Se till att ge ritområdet har rätt dimensioner. Börja sedan med att lägga in kod som ritar de horisontella fälten med korrekta färger. Använd samma struktur som i koden nedan fast fyll i kod för villkoret och för färgsättningen. För att skriva det villkor för muspekarens x-koordinat som ger gul färg kan du använda lämpliga jämförelser och en och-operator (och-operatorn skrivs &&). Testkör din kod!

if (<villkor för x-koordinat som ger gult>) {
	// gul färg
} else {
	// blå färg
}

Det mellersta horisontella fältet ska alltid vara gult oavsett vilken y-koordinat musen har. De blå horisontella fälten ska däremot antingen vara gula eller blå beroende på y-koordinaten. Lägg nu in en if-sats inuti din ursprungliga if-sats. En if-sats inuti en if-sats kallas för en nästlad if-sats. Det går att använda samma princip med en logisk och-operator för y-koordinaten (vilken ger gul färg) men prova istället att använda en logisk eller-operator (eller skrivs ||) vilken ger villkoret för blå färg.

if (<villkor för x-koordinat som ger gult>) {
	// gul färg
} else {
	if (<villkor för y-koordinat som ger blått>) {
		// blå färg
	} else {
		// gul färg
	}
}

Testkör ditt program och se till att flaggan ritas ut med korrekt färgsättning.

Dra med musen!

Uppgift 9

Enkelt ritprogram

Utgå ifrån Exempel 11 och lägg till funktionalitet så att användaren kan välja färg och ändra på cirkelns storlek.

Gör en variabel som används för cirkelns storlek och se till att denna kan ändras av användaren genom att exempelvis klicka på pil upp eller ned.

Låt användaren välja mellan några färger exempelvis genom att klicka på 'r' för röd osv.

Du kan exempelvis utgå ifrån denna struktur som placeras längst ned i programmet.

function keyTyped() {
	if (key == "r") {
		// kod för färgen röd.
	}
}

function keyPressed() {
	if (keyCode == UP_ARROW) {
		// kod för större storlek
	}
}

Uppgift 10

Studsande boll

Utgå ifrån Exempel 12. Gör en variabel för cirkelns radie så att denna lätt kan ändras. Ändra i olikheterna som får bollen att studsa så att bollen studsar när bollens kant rör ritområdets kant. Testkör ditt program med en stor radie så att det tydligt syns att studsarna är korrekta.

Uppgift 11

Studsande sprajt

Utgå från kod för en studsande boll men ändra på koden så att en bild används istället för en uppritad cirkel. Se Exempel 14 för hur man lägger in en bild.

En bild är rektangelformad. Hur ska jämförelserna göras så att bilden studsar när bildens kant rör ritområdets kant?

Uppgift 12

En klocka

Använd de inbyggda funktionerna för tidmätning till att visa dagens datum och en klocka. Du konkatenerar text du själv skriver med funktionsvärden genom att använda tecknet +, exempelvis som i koden:

text("Det är just nu år " + year() + ".", width*0.5, height*0.25);

Se till att texten är horisontellt centrerad genom att skriva

textAlign(CENTER);

i setup-funktionen.

Koden för att visa texterna ska ligga i draw-funktionen så att de hela tiden uppdateras.

Uppgift 13

Pricka studsande boll

Utgå ifrån kod för en studsande boll. Gör om denna kod till ett spel som ger spelaren poäng varje gång spelaren klickar på bollen. Spelet ska fungera så här:

  • I början av spelet ska det visas en textinstruktion, exempelvis "Klicka på bollen". Denna text ska bara visas en kort tid. Använd variabeln frameCount och en villkorssats för att visa instruktionen. Bestäm själv hur länge instruktionen ska visas. Denna kod ska ligga i draw-funktionen.
  • Dela ut poäng varje gång spelaren klickar på bollen med muspekaren. Gör en variabel för poängen. Se till att poängen är noll när programmet startar. Använd mushändelsen mouseClicked genom att nederst i programmet lägga till följande kod:
    function mouseClicked() {
    	// kod som utförs vid musklickning
    }
    Gör en villkorssats inuti mouseClicked som kontrollerar om muspekaren befinner sig på bollen och öka i sådana fall poängen. Kod för att upptäcka kollisionsdetektering visas i Exempel15.
  • Efter en viss tid ska spelet avslutas. Använd återigen en villkorssats och frameCount. Bestäm själv efter hur lång tid spelet ska avslutas. När detta händer ska något sorts resultat visas, exempelvis "Du fick 3 poäng". Du stänger av draw-funktionen med kommandot noLoop();. Välj själv om poängen ska visas under spelets gång eller bara på slutet.
Klicka på knappen för att starta spelet.

Uppgift 14

På tio sekunder

För att mäta tid kan du använda funktionen millis() vilken mäter hur många millisekunder det gått sedan programmet startade.

Gör ett program som låter användaren klicka på en cirkel. Vid varje träff ska cirkeln få en ny slumpmässig position och användaren ska få en poäng. Användaren har tio sekunder på sig att samla poäng. Använd variabler för cirkelns position och radie. Du behöver även en variabel för att räkna poäng. Använd funktionen millis() för att mäta hur många millisekunder det gått sedan programmet startat.

I och med att cirkeln byter position varje gång användaren klickar på den, går det bra att räkna poäng i draw-funktionen genom att använda variabeln mouseIsPressed. Utgå exempelvis från följande kod:

var x, y, r, poäng;

function setup() {
	createCanvas(windowWidth, windowHeight);
	x = random(width);
	y = random(height);
	r = 50;
	poäng = 0;
	textAlign(CENTER);
}

function draw() {
	background(100);
	ellipse(x, y, 2 * r);
	text("Poäng = " + poäng, width * 0.2, height * 0.2);
	if (mouseIsPressed) {
		// Kod för träff.
		// Vid träff ska användaren få poäng och cirkeln en ny position.
	}
	// Kod för att kontrollera om det gått tio sekunder.
	// Efter tio sekunder ska resultat visas och draw-funktionen stängas av.
}
Klicka på knappen för att börja mäta.

Uppgift 15

Modellera gravitation

Låt en boll falla till marken. Använd två variabler för bollens position och en variabel för bollens hastighet i y-led. Se till att bollen startar någonstans i den övre delen av ritområdet och att hastigheten i y-led är noll från början.

Så länge bollen befinner sig ovanför den nedre kanten ska den accelereras neråt, annars ska y-koordinaten sättas så att bollen placeras precis vid nedre kanten och hastigheten i y-led sättas till noll. Använd en if-else-sats med en lämplig olikhet för att avgöra när bollen är vid den nedre kanten eller inte.

Se till att bollen börjar om med hastigheten noll vid muspekarens koordinater när användaren klickar med musen i ritområdet.

Klicka i ritområdet för att släppa bollen.

Uppgift 16

Dämpad studsning

Utgå ifrån kod som låter en boll falla vid marken. Ändra i koden så att hastigheten inte sätts till noll när bollen rör vid marken utan byter tecken så att bollen rör sig uppåt. För att programmet ska fungera måste du efter att du ändrat tecken på hastigheten se till att y-koordinaten ändras så att den får en första knuff upp ifrån nedre kanten, annars kommer den att fastna vid den nedre kanten.

För att se till att studsen dämpas kan du istället för att byta tecken multiplicera hastigheten i y-led med -0.9 eller liknande negativt tal. Testa olika dämpningsfaktorer.

Klicka i ritområdet för att släppa bollen.

Observera att med denna kod kommer bollen troligen inte att sluta studsa.

Uppgift 17

Modellera hopp

Utgå från kod för en boll som faller till marken. Byt kod för musclickning så att användaren kan hoppa genom att klicka i ritområdet. Vid ett hopp ska bollen få en hastighet i riktning uppåt, sedan ska positionen ändras direkt så att bollen kommer ovanför nedre kanten.

Lägg till en variabel för hastigheten i x-led och se till att denna har värdet noll från början. Lägg till en funktion keyPressed längst ner i programmet och lägg in kod som ger bollen en hastighet åt höger eller vänster när användaren klickar på höger respektive vänster piltangent. Se slutligen till att bollen studsar i sidorna genom att lägga till lämplig kod i draw-funktionen.

Hoppa genom att klicka i ritområdet. Gå åt vänster/höger med piltangenterna.