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.

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 skriva ett alternativ.

Alternativ

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

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

if ( <villkor>) {
  //kod som körs om villkor sant
}

if ( <villkor>) {
  //kod som körs om villkor sant
} else {
  //kod som körs om villkor falskt
}

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".

Ett alternativ inom programmering kallas ibland för en villkorssats.

Programmeringsuppgift - Enkelt ritprogram

Gör en ny sketch i OpenProcessing. Ändra draw-funktionen 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ändelsefunktionen keyPressed.

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

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

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

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. När du jämför en bokstav med det användaren skrivit in, ska du jämföra med en versal (stor bokstav).

Ä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!

Ä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.

var diameter;

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

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

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?

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