Radianer VS Grader
Radianer är ett vinkelmått. Radianer förkortas ofta rad. För att bekanta sig med radianer är det bra att titta på en cirkel.
En cirkels omkrets beräknas som 2 * PI * radien. Om vi skapar en cirkel med radien 1 så blir den cirkelns omkrets 2 * PI.
En cirkel med radien 1 kallas för ENHETSCIRKEL
Om man delar upp cirkelns omkrets i cirkelbågar som är lika långa som radien så får det plats 2 *PI (ca 6,283 st) stycken på cirkelns hela varv .
Varje sådan cirkelbåge ger vinkeln en radian.
360 grader är alltså 2PI radianer
1 radian är då 360/2PI grader (eller 180/PI) vilket är ca 57,296 grader
Om man tar 57,296 grader 6,283 gånger blir svaret ca 360 grader
I enhetscirkeln mäts vinkeln från horisontella axeln (0 grader) med rotation moturs. På bilden nedan ses vinklarna 0, 90, 180, 270,och 360 grader samt värden för vinklarna mätt i radianer.
Vi ska skapa ert program som ritar ut två cirklar bestående av olika stora tårtbitar. En cirkel ska visa vinklar i grader och den andra ska visa grader i radianer.
Förs skapas två variabler, grader och radianer. De två variablerna kommer att innehålla en array med värden för vinklar.
I setup() fylls arrayerna med värden. Vinklarna är lika stora i arrayen för grader som de är i arrayen för radianer.
En canvas med storleken 500 * 400 pixlar skapas.
noStroke() betyder ingen yttre linje på det som ritas
noLoop() betyder att draw() ska köras endast en gång. När noLoop() används i setup() ska det skrivas på sista raden i funktionen.
let grader;
let radianer;
function setup() {
grader = [0, 30, 60, 90, 60, 30, 90];
radianer = [0, PI/6, PI/3, PI/2, PI/3, PI/6, PI/2];
createCanvas(500, 400);
noStroke();
noLoop(); // Run once and stop
}
I draw() sätts färg för bakgrund och två textsträngar skrivs.
function draw() {
background(140);
textSize(28);
text('Grader', width / 6, 50);
text('Radianer', width / 1.5, 50);
}
En funktion som ska rita ut cirkeldiagrammet men grader skapas. Funktionen får namnet pieChart och får två parametrar, diameter och data. När funktionen senare kallas på måste det alltså anges två argument i parentesen som anger vilken diameter cirkeln ska ha och vilken data den ska grunda sig på. Data i det här fallet är de två arrayerna som skapades i setup().
En variabel med namnet lastAngle skapas. Den ska hålla reda på var i cirkeln förra tårtbiten slutade och nästa ska börja. Utan den variabeln kommer tårtbitarna att ritas över varandra med utgångspunkt i 0.
Funktionen arc() kommer att användas när tårtbitarna ritas ut. Här kan du läsa mer om arc()
arc() börjar vid horizontella axeln där grader är noll och ritar medurs. Cirkeln vi arbetar med (se bilder ovan) är graderad moturs så det måste tas hänsyn till i koden.
Variabeln green, vilken finns i koden nedan, gör så att det blir olika nyanser av grönt på de olika tårtbitarna som ska skrivas ut. Om du behöver uppdatera dig på funktionen map() så kan du gå till denna sida i Kurs1
En for-loop som loopar genom alla värden i data skapas. I den sätts variabeln green och därefter bestäms att figurer som ritas ut ska fyllas med variabelns värde.
En tårtbit (arc) ska ritas ut för varje värde i arrayen. De två första argumenten i arc() talar om var på canvasen den ska börja ritas ut. Argument tre och fyra anger bredd och höjd. Argument fem och sex anger start resp stop för tårtbiten.
Sist i funktionen ändras värdet för lastAngle
function pieChart(diameter, data) {
vlet lastAngle = 0;
for (let i = 0; i < data.length; i++) {
let green = map(i, 0, data.length, 255, 50);
fill(0, green, 0);
arc(width / 4, height / 2, diameter, diameter, -grader[i] + lastAngle, lastAngle);
lastAngle -= grader[i];
}
}
En liknande funktion, med namnet pieChart2, skapas för att rita ut cirkeldiagrammet för radianer
function pieChart2(diameter, data) {
let lastAngle = 0;
for (let i = 0; i < data.length; i++) {
let red = map(i, 0, data.length, 0, 255);
fill(red, 0, 0);
arc(width - width /4, height / 2, diameter, diameter, -radianer[i] + lastAngle, lastAngle);
lastAngle -= radianer[i];
}
}
I draw() läggs nu rader till där funktionerna kallas på. Före funktionen bestäms om grader eller radianer ska användas genom angleMode().
function draw() {
background(140);
textSize(28);
text('Grader', width / 6, 50);
text('Radianer', width / 1.5, 50);
//Kod nedan ska skapas
angleMode(DEGREES);
pieChart(200, grader);
angleMode(RADIANS);
pieChart2(200, radianer);
}
Hela programmet i editorn
Om grader har en array som består av följande element [0, 45, 60, 30, 90, 45, 60, 30] skapa en array för radianer så att tårtbitarna fördelas lika på de två cirklarna.
Om raidaner har en array som består av följande element [0, PI/6, PI/2, PI/4, PI/3, PI/6] skapa en array för grader så att tårtbitarna fördelas lika på de två cirklarna.
Hur många grader/radianer saknas för att hela cirkeln ska fyllas med färg?