Tid och flera villkor tillsammans
Titta på bilden med animationen av de röda rektanglarna. I koden för den används tid för att visa rektangel i olika hörn vid olika sekunder. För att få in tid i en variabel används i p5JS följande:
var sek = second();
var min = minute();
Här nedanför finns liknande kod, men fördelad på 60 sekunder. Som du ser flyttas inte rektangeln utan det läggs till en ny tills hela är fylld.
För att istället flytta rektangeln behöver du kombinera flera villkor i if-satserna. Här är två olika sätt att kombinera flera villkor:
| Kod | Funktion | Exempel |
| && | Båda villkoren måste uppfyllas | if(a > 8 && a < 10) |
| || | Ett av villkoren måste uppfyllas | if(a > 8 || a < 0) |
För att få första rektangeln att visas endast de första 15 sekunderna behöver vi kombinera villkoren med && så här:
if(sek > 0 && sek <= 15)
Din utmaning nu är att kombinera villkor med && så att rektangeln visas 15 sekunder i varje hörn.
Nästa utmaning är att visa rektangeln i rött var annan minut och grönt var annan minut! För att göra det kan ”modulus” användas. Det är ett sätt att testa om det finns ett restvärde efter division. Exempel: Om minuten är jämnt delbar med 2 visas röd färg, annars visas grön färg fill(0,255,0). För villkor med modulus används symbolen %. För att testa om minuten är jämn (0,2,4,6 osv) kan du använda villkoret:
min % 2 == 0
Prova att lägga till villkoret i din kod från förra utmaningen och lägg till else if() för den gröna färgen. (facit…).
Eller inte…
Om du ska testa om ett värde är mindre än 10 eller större än 20 (dvs inte är mellan 10 och 20), så är ELLER med symbolen || en bra idé.
Din utmaning är att skriva kod för att fråga efter ett decimaltal som är mindre än 10 eller större än 20.
Ett problem är att när du använder prompt() för att fråga efter något blir alltid svaret en textsträng, inte ett nummer. Ett annat problem är att vi i Sverige använder kommatecken som decimalavgränsare, medan punkt används i engelsktalande länder och i programmering. Därför behövs två hjälpfunktioner när du frågar efter ett decimaltal: Number() och replace()
Så här kan det skrivas:
//Fråga efter ett tal och tilldela det till variabel svar let svar = prompt(’Skriv ett decimaltal som är mindre än 10 eller större än 20’); //Byt ut kommatecken mot punkt i svar och tilldela resultatet till svar svar = svar.replace(’,’ , ’.’); //Ändra textsträngen i svar så att det blir ett tal och tilldela resultatet till svar svar = Number(svar);
Men det kan också kombineras ihop till en rad:
let svar = Number(prompt('Skriv ett decimaltal som är mindre än 10 eller större än 20').replace(',' , '.'));
Gå till editor.p5js.org Ta bort funktionen draw() och skriv din kod i funktionen setup() (eftersom vi bara vill köra koden en gång!)
När svaret är insamlat ska du skriva en if-sats med två villkor och symbolen för ELLER (dvs || ) mellan villkoren. Om något av villkoren är sant utförs händelsen fill(0,255,0) dvs grön fyllningsfärg. Annars utförs händelsen fill(255,0,0) dvs röd fyllningsfärg.
Efter if-satsens slut skriver du händelsen för att skapa en rektangel, t ex rect(0,0,100,100);
Testkör!
En ytterligare utmaning? Gör om villkoret så att svaret INTE är mindre än 10 ELLER inte är större än 20. Symbolen för INTE är ett utropstecken. Det kan t ex skrivas != om du menar ”inte lika med” och !> om du menar ”inte större än”.