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.
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.
Gör en ny sketch i OpenProcessing. Ändra draw-funktionen till:
function draw() {
if (mouseIsPressed) {
ellipse(mouseX, mouseY, 20, 20);
}
}
Testkör programmet!
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.
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!
Observera att logisk likhet skrivs med dubbelt likhetstecken.
==
Användaren ska också kunna ändra cirkelns storlek. Ellipsens diameter ska kunna varieras. Vi gör därför en variabel diameter
.
Om du vill göra egna variabler i Javascript skriver du var
följt av variabelnamn. Ett variabelnamn måste börja med en bokstav, därefter kan det innehålla bokstäver och siffror men inte blanksteg.
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?
Observera att ett enkelt likhetstecken inte betyder "lika med" utan tilldela.
diameter = diameter + 1;
Att sätta en variabels värde kallas för att göra 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.