Lär dig Processing

 

1

Lektion 2

3 4 5

Variabler, händelser och if-satser

Fördefinierade variabler

En variabel har ett värde som kan variera. Du kan göra egna variabler som du själv döper. Det finns också fördefinierade variabler som håller reda på olika värden. Vi har redan använt de fördefinierade variablerna windowWidth och windowHeight som håller reda på hur stort fönstret är.

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

Vi har också använt variablerna mouseX och mouseY som håller reda på muspekarens koordinater.

ellipse(mouseX, mouseY, 20, 20);

Vi ska nu använda en fördefinierad variabel som håller reda på om musknappen är nedtryckt, variabeln mouseIsPressed.

camel case
Variablerna är skrivna med så kallad camel case: Wikipedia - Camel Case

Variabeln mouseIsPressed är en så kallade booleska variabler. Booleska variabler kan bara anta två värden, true eller false. Vi ska använda mouseIsPressed för att göra en villkorssats.

Villkorssatser

I Scratch kan man lägga vissa block inuti andra block. Så fungerar exempelvis om-block och om-annars-block.

Villkor i Scratch
Villkorssatser i Scratch.

För att åstadkomma "inuti" med skriven kod, används olika sorts parenteser.

Villkor i Processing
Villkorssatser i Processing.

Längre stycken kod som ligger "inuti" dras in så att det visuellt ser ut som "inuti", detta kallas för att indentera koden. I Processing måste man inte indentera koden men det gör koden mer lättläst. I programmeringsspråket Python måste man indentera kod som "ligger inuti".

Programmeringsuppgift - Enkelt ritprogram

Gör en ny sketch i OpenProcessing. Ändra draw-metoden till:

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

Testkör programmet!

Lägg till en händelse

Vi ska låta användaren byta till färgen röd genom att trycka på tangent. Lägg in händelsen keyPressed.

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

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

function keyPressed() {
  fill(255, 0, 0);
}

Händelsen keyPressed är en funktion, precis som setup och draw.

Testkör programmet och byt färg genom att klicka på någon tangent.

Låt användaren välja färg

Vi ska använda den fördefinierade variabeln key för att låta användaren välja mellan flera olika färger. I variabeln key lagras den senast tryckta alfanumeriska tangenten.

Ändra koden i keyPressed till:

function keyPressed() {
  if (key == 'R') {
    fill(255, 0, 0);
  }
}

Lägg till fler if-satser så att man också kan välja färgerna grönt och blått!

Observera att logisk likhet skrivs med dubbelt likhetstecken.

==

Ändra cirkelns diameter

Användaren ska också kunna ändra cirkelns storlek. Ellipsens diameter ska kunna varieras. Vi gör därför en variabel diameter .

gör en variabel
Deklarera variabeln på översta raden. Ge den ett startvärde
och använd den som ellipsens bredd och höjd.

Nu ska vi låta användaren byta storlek genom att trycka på piltangenterna. Eftersom det inte finns alfanumeriska tecken för piltangenterna kan man inte använda key. Istället måste vi använda variabeln keyCode.

Lägg till följande två if-satser inuti funktionen keyPressed.

if (keyCode == UP_ARROW) {
    diameter = diameter + 1;
  }
  if (keyCode == DOWN_ARROW) {
    diameter = diameter - 1;
  }

Testkör programmet! Vad händer om du klickar på nedåt pil så många gånger att diametern blir negativ?

Observera att ett enkelt likhetstecken inte betyder "lika med".

diameter = diameter + 1;

Att sätta en variabels värde kallas för en tilldelning.

Först beräknas det som står till höger om likhetstecknet,

sedan tilldelas variabeln detta nya värde.

Hur man använder keyCode kan du läsa om i referensbiblioteket Reference keyCode.

 

1

Lektion 2

3 4 5