For loop för indelning av canvas

For loop för indelning av canvas

Med det här programmet ska canvasen delas in  med horisontella och vertikala linjer och text som anger var (i pixlar) linjerna går.

Vi ska skapa ett synligt koordinatsystem på canvasen där det går streck både horisontalt och vertikalt med avstånd på 50. Vid strecken ska det finnas text som anger x- respektive y-värdet.

För att undvika att skriva kod om och om igen kan loopar användas. I en loop körs programmet det antal gånger som man specificerat.

Om all kod för det skulle skrivas ut skulle det se ut så här:
line(0,50,400,50);
text(”50”, 0,50);
line(0,100,400,100);
text(”100”, 0,100);
line(0,150,400,150);
text(”150”, 0,150);
line(0,200,400,200);
text(”200”, 0,200);
line(0,250,400,250);
text(”250”, 0,250);
line(0,300,400,300);
text(”300”, 0,300);
line(0,350,400,350);
text(”350”, 0,350);
line(50,0,50,400);
text(”50”, 50,20);
line(100,0,100,400);
text(”100”, 100,20);
line(150,0,150,400);
text(”150”, 150,20);
line(200,0,200,400);
text(”200”, 200,20);
line(250,0,250,400);
text(”250”,250,20);
line(300,0,300,400);
text(”300”, 300,20);
line(350,0,350,400);
text(”350”, 350,20);
Alla horisontella linjer har x-värdena 0 och 400 och y-värdena är lika, börjar på 50 och ökar med 50 för varje linje.
Alla vertikala linjer har y-värdena 0 och 400 och x-värdena är lika, börjar på 50 och ökar med 50 för varje linje.
Då man kan se att det finns ett återkommande mönster i koden är det bättre att försöka göra en loop.

Vi skapar canvasen(i setup) med en storlek på 400*400.
I draw sätts färgen till ”Cyan”.  Färg kan anges med en string istället för kod för RGB . Det finns 140 färger som kan anges med namn.  Läs mer om det här:  w3schools.com/colors

function setup(){
 createCanvas(400, 400);
}

function draw(){
 background("Cyan");
}

Därefter ändras färgen till dark-Blue
Nu kommer vi till for-loopen.

fill("darkBlue");
 for(let i=50; i<400; i=i+50){
 line(0,i,400,i);
 line(i,0,i,400);
 text(i, 0,i);
 text(i, i,20);
 }

For-loopen körs det antal gånger som specificeras inom parenteserna. Här skapas först en variabel som heter i. Namnet kan vara vad som helst men i är vanligt att använda i programmering, så då gör vi det här också. i får värdet 50 till att börja med (då vi vill att första linjen ska ritas där x= 50 och där y =50). Det är tre påståenden (statements) i parenteserna. Den första, där vi satte var i = 50; körs direkt när loopen startas första gången. Det andra påståendet i < 400; talar om hur länge loopen ska köras, i det här fallet så länge i är mindre än 400. Det tredje påståendet  i = i + 50 körs efter att loppen körts en gång. När loopen körs är alltså i 50, för varje gång den loopar ökar i med 50 ( 50,100,150,200…) ända tills i är mindre än 400.  Varje gång loopen körs kommer koden i den att göra så att streck och siffror skrivs ut. I den första line() sätts y-värdena till i och i den andra line() sätts x-värdena till i. Första gången är de 50, andra gången 100 och så vidare. I första text() sätt texten till värdet i ”i”,  x-värdet till 0 och y-värdet till det värde i har när loopen körs. Nästa text() fungerar på liknande sätt. Om det går att undvika långa program genom att använda loopar så bör man göra det.

 Ändra i koden och försök få linjer tätare, till exempel var 25:e pixel.

Koden som skapats här kommer att användas i kommande program  för att rita trianglar.