Omkrets och Area av rektangel/kvadrat

Omkrets och Area av rektangel/kvadrat

Två rektanglar ska ritas på canvasen varav en får namnet Red och den andra får namnet Green
Vi börjar med att skapa några variabler som innehåller deras respektive bredd och längd.
Variabler för att beräkna omkretsen skapas också. Omkretsen är 2*(bredd + höjd).
I setup-funktionen skapas canvasen.

let breddRed = 100;
let hojdRed = 150;
let omkretsRed = 2*(breddRed + hojdRed);
let areaRed = breddRed * hojdRed;

let breddGreen = 50;
let hojdGreen = 200;
let omkretsGreen = 2*(breddGreen + hojdGreen);
let areaGreen = breddGreen * hojdGreen;

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

I draw-funktionen sätts bakgrunden till (150). När bara ett värde anges  inom parentesen betyder det att alla värden sätts till det värdet, det vill säga R =150, G= 150 och B = 150. När alla färger har samma värde (förutom 0 (svart) och 255(vit)) så blir färgen grå (i olika nyanser beroende av hur högt/lågt värde).

function draw() {
 background(150);
}

Nästa del av koden är att skapa rektanglarna, en röd och en grön med de värden på höjd och bredd som angivits i variablerna.

 fill(255,0,0);
 rect(250,110,breddRed,hojdRed);    //Red rect

 fill(0,255,0);
 rect(100,110,breddGreen,hojdGreen);    //Green rect

Resterande kod handlar om den text som ska visas på canvasen.
Textens storlek ska vara 22 pixlar. Färgen är röd (det val som finns ovan gäller tills ny färg anges).  I texten ska det stå omkrets och ett mellanslag (skrivs in innanför citattecknen), variabeln omkretsGreen och texten ska skrivas ut på x=60, y =50.  Sen byter vi färg och skriver oden för den gröna texten på samma sätt.

textSize(22);
 fill(255,0,0);
 text("omkrets "+ omkretsRed, 250,50);
 text("bredd " + breddRed +"\nhöjd "+ hojdRed, 250,370);
 text("area" + areaRed, 250,75);
 
 fill(0,255,0);
 text("omkrets "+ omkretsGreen, 60,50);
 text("area" + areaGreen, 60,75);
 text("bredd " + breddGreen + "\nhöjd " + hojdGreen, 60, 370);

Nu har vi ett program som ritar ut rektanglar och skriver ut deras bredd och höjd och räknar ut omkretsen och arean. Koden är lite omkastad för att slippa skriva fill() fler än två gånger

Lägg märke till att rektanglarna har lika stor omkrets men olika stor area.

 Ändra måtten på den röda rektangeln för att få maximal area men med samma omkrets på båda rektanglarna.

 Ändra storleken på rektanglarna och se hur det uppdateras på skärmen.