Att repetera kod i ett program kan göra programmet långt och svårt att förstå för andra som kanske ska läsa det.
I programmet ovan har 7 st ellipser ritats ut. Om man tittar på koden för respektive ellips så är den väldigt snarlik. Det enda som skiljer är att värdet för x ökar med 50 för varje ny ellips.
Här kan en loop användas för att göra koden kortare och mer läsbar.
While loop
while(villkor)
{
//händelse som utförs så länge villkoret är sant
}
Strukturen av en loop påminner om strukturen på en if-sats. De är båda kontrollstrukturer, det vill säga att villkoret kontrolleras innan koden innanför klammerparenteserna körs.
För att använda en while-loop i programmet ovan behövs en variabel för det värde som ändras, och kod för förändringen av variabeln.
let x = 0; // första värdet på x x = x + 50; // den förändring som ska göras för varje ny ellips ellipse(x, 200, 30,30); //variabeln x används som x-värde)
Programmet kan nu skrivas så här:
Villkoret i while-loopen är:
x < width
width är en variabel i biblioteket för p5 som gäller för hela bredden på canvasen så som den definierats i createCanvas(). I det här fallet är width 600.
För höjd av canvasen används height.
Användning av while-loop är inte så vanlig för det är väldigt lätt att få en loop som aldrig slutar. Om man skulle råka skriva något fel i villkoret skulle loopen kunna hålla på för alltid.
For loop
En for-loop har en lite annan struktur för villkoret.
for ( från när; till när; vad ska ändras)
{
//händelse som utförs så länge villkoret är sant
}
Ändra i koden så att ellipserna ritas ut vertikalt (Det blir då y-värdet som behöver en variabel)
Loop och Array
For loop är en väldigt vanlig struktur i JavaScript och används vid repetitioner, animeringar, för att loopa genom värdena i arrayer mm.
Vi fortsätter med ellipserna men skapar en array för värden för deras diameter och använder sen en for-loop.
for( let i = 0; i < diam.length; i++)
{
}
Den här typen av for-loop används för att loopa igenom en array.
let i = 0; Här skapas en variabel med namnet i som sätts till värdet 0. Namnet skulle kunna vara vad som helst men det är vanligt att använda i och här står det för index i arrayen.
i < diam.length; Här står att loopen ska ske så länge i är mindre än längden på arrayen med namnet diam.
i++ Det här uttrycket betyder det samma som i = i + 1
uttryck som används ofta inom programmering har ofta förkortningar och att öka en variabel med 1 för varje loop är ofta använt. att minska med en varje loop skrivs då som i = i - 1 eller i--
I programmet ritas alla ellipserna på samma x- och y- värden vilket gör att de ritas över varandra. Titta på arrayen och lägg märke till att den största ellipsen ritas först och sen ritas de andra ut ovanpå.
Om vi nu ska få dem att ritas var för sig så behövs en förflyttning i x-led för varje loop.
Ändra i koden så att kod för ellipsen ser ut så här:
ellipse((i +1) * 50, 200, diam[i], diam[i]);
Värdet på x varierar nu med värdet på ( i+1 ). Försök klura ut vilka värden x antar när loopen körs.
Tips: i är index för arrayen och börjar på 0