Sin, Cos och Enhetscirkeln

Sinus och Cosinus i Enhetscirkeln

Enhetscirkeln är en cirkel i ett koordinatsystem med  medelpunkt i origo och radien 1 längdenheter. En rätvinklig triangel kan ritas in i enhetscirkeln (se figur 1). Hypotenusan i triangeln blir då 1 längdenheter. Med hjälp av definitionerna för sinus och cosinus i rätvinkliga trianglar visas att
cos v = x och sin v = y.
x och y kan tolkas som koordinater för punkten P.

Här kan du lätt slå på miniräknaren för att se att cosinus 60 grader är 0,5 och sinus 60 grader är 0,87. Om du ska räkna ut x respektive y för vinkeln angett i radianer så kom ihåg att miniräknaren  måste ställas om till radianer.  60 grader är PI/3 radianer

Trigonometri handlar inte bara om vinklar. Med hjälp av de trigonometriska funktionerna kan
man studera vissa periodiska förlopp. Det är förlopp som upprepas med en viss regelbundenhet. Ett exempel är sinusfunktionen. Dess graf kan konstrueras genom att resonera utifrån enhetscirkeln. Här ska vi skapa ett program som visar vad som händer med med y-koordinaten när en punkt roterar moturs i enhetscirkeln?

Program som ritar en sinuskurva

Först skapa tre variabler. En ska hålla reda på vinkeln, en ska vara en array som håller reda på alla  y-värden så att kurvan kan ritas ut och en variabel för radien på cirkeln.
I setup() skapas en canvas med storleken 600 * 400 pixlar. frameRate sätts till 10. Det betyder att skärmen kommer att uppdateras 1/6 gånger normal uppdaterings-rate.

var angle = 0;
var wave = [];
var radius;

function setup() {
  createCanvas(600, 400);
  frameRate(10);
}

I draw() sätts bakgrundsfärg och linjer och text ritas ut.
Cirkelns radie sätts till 100. Det här är helt fel för en enhetscirkel har ju radien 1 längdenhet. Här måste vi göra den större då den inte syns annars.

function draw() {
  background(0);
  radius = 100; //cirkelns radie
  stroke(255,0,0);
  fill(255,0,0);
  line(0, height/2, width, height/2);
  textSize(24);
  text('0', 20, height/2);
  stroke(0,255,0);
  fill(0,255,0);
  line(0, height/2+radius, width, height/2+radius);
  text('-1', 20, height/2+radius);
  line(0, height/2-radius, width, height/2-radius);
  text('1', 20, height/2-radius);
//Slutparentes saknas för mer ska in i draw() senare

Näst i draw() flyttar vi origo 200 pixlar i x led och 200 pixlar i y led. Det görs för att en cirkel ska ritas ut på canvasen och dess origo ska vara 0,0. Om canvasens origo inte flyttas kommer cirkeln att ritas ut med sin mittpunkt i övre vänstra hörnet vilket gör att bara en fjärdedel av cirkeln kommer att synas.

Cirkeln ritas ut utan fyllnadsfärg och med en ytterlinje i färgen vit.

Värden för x och y sätts till cos(vinkeln) respektive sin(vinkeln)
Alla y-värden ska lagras i arrayen wave. Unshift() betyder att de ”puttas in ” framtill i arrayen. Senare i koden kommer vi att ta bort ut arrayen genom metoden pop(). Om du känner dig osäker på metoderna så kan du läsa mer på sidan Metoder för Arrayer

Senare i koden kommer variabeln angle att ändras och då kommer alla dessa nya y-värden att lagras i arrayen. Om du skriver ut wave i consolen efter koden nedan kommer du att se att den bara innehåller en massa element med värdet 0.  Arrayen wave innehåller värden för varaibel y och så länge y inte förändras så fylls arrayen med värdet noll.

translate(200,200);//flyttar canvasens origo
stroke(255);
noFill();
ellipse(0,0,radius*2);// cirkeln
var x = radius * cos(angle);
var y = radius * sin(angle);
wave.unshift(y);
console.log(wave);

Vidare i draw() ritas en liten cirkel ut med sitt centrum vid x, y och en diameter på 8. En linje ritas från origo till koordinaterna x, y

fill(255); ellipse(x,y,8); 
line(0,0,x,y);

Näst flyttas origo 200 pixlar i x-led och en linje ritas

translate(200,0); 
line(x-200, y, 0, wave[0]);

 Köp ditt program mellan varje nytt kod-stycke och reflektera över vad koden gör

Nu kommer kod som gör att sinuskurvan ritas ut. Kurvan kommer att ritas med något som kallas vertex. Vertex kan beskrivas som en mängd punkter som sammanbinder en figur (i det här fallet en linje. Läs mer på p5.js referenser

Vertex används, i p5.js, alltid inom beginShape() och endShape()

beginShape();
noFill();
for( let i=0; i < wave.length; i++){
vertex(i, wave[i]);
}
endShape();

Om du kör koden nu kommer du att se en linje bildas utefter y = 0. för varje index i arrayen wave blir linjen längre.

Om vi lägger till en förändring av vinkeln angle så kommer en kurva att ritas ut.

angle -= 0.02;

Nu finns en sak till att göra som är viktig.
Arrayen wave kommer att bli oändligt lång och efter ett tag kommer det att ta mycket plats i minnet och göra datorn segare och segare.

Lägg till en kod som tar bort element från arrayen när antal element i den är större än 300.

if (wave.length > 300) {
wave.pop();
}
} // slutparentesen för draw()

Hela koden i Editorn.

Av någon underlig anledning ritas inte cirkeln ut i denna widget  men om du skriver koden i p5.js editor kommer allt att se rätt ut