Procent. Andelen, delen och det hela

Procent. Andelen, delen och det hela

Målet här är att skapa ett program som räknar ut andelen, i decimalform och i procent, av det hela. Två staplar ska ritas på canvasen i storlek som representerar andelen och det hela.

För att räkna ut hur stor andelen är i procent används delen/det hela. Vi skapar variabler för delen och det hela och en variabel för andelen. I setup-funktionen skapas canvasen. Variabeln detHela sätts till värdet 100 vilket här motsvarar 100 procent.  Delen sätts här till 56 procent.

var delen = 56;
var detHela = 100;
var andel = delen/detHela;

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

I draw-funktionen sätts bakgrunden till 200 ( en grå nyans).
En grön rektangel ritas ut. Som bredd-värde har den variabeln ”detHela” vilket gör att dess längd kommer att vara 100 procent men kan varieras beroende av värdet på variabeln.
En röd rektangel ritas ut med bredd-värde ”delen” vilket gör att den kommer att vara 56 procent men kan varieras i längd beroende av hur stor delen är.
Till sist skapas den text som ska synas på canvasen.

function draw(){
background(200);
fill(0,255,0);
rect(100,100,detHela,20);
fill(255,0,0, 230);
rect(100, 130, delen,20);
textSize(24);
text("andel " +andel + " \nandel i procent " + 
round(andel*100) + " %", 10, 50);
}

i  andra kodraden för fill() används 4 parametrar. de är värden för R, G och B och den sista är värde för Alpha.  Alpha anger genomskinlighet och kan (i p5.js) anta värden mellan 0 och 255 där 0 är helt genomskinligt och 255 är inge genomskinligt.

En förklaring av kodraden:
text(”andel” +andel + ” \nandel i procent ” + andel*100 + ” %”, 10, 50);
Först skrivs texten andel, sen visas värdet av variabeln andel, sen kommer en radbrytning (\n), därefter texten andel i procent och värdet andel*100 (för att få rätt format), och sen ett procenttecken(%). Texten ska ritas ut på x=10, y = 50.



  Ändra värdena på delen och det hela och se hur staplarna (rektangarna) ändrar längd. Lägg till text som visar vad staplarna är och deras värde.

 Som extra utmaning kan liknande program skapas för
delen= andelen*detHela  och
detHela = delen/andelen