Javascript - Cirkeln på parameterform

Javascript - Cirkeln på parameterform

Det här är en digitalövning där vi ska titta på hur man ritar cirkeln på parameterform och hur det görs i javascript.

Det vi sett tidigare med cirkelns ekvation kallas att använda kartesiska koordinater. Problemet är att man inte kan lösa ut y som en funktion av x utan att ta roten ur. Roten ur ger ju som bekant två rötter, en positiv och en negativ. Det ställer till problem genom att en funktion bara ska ha ett y-värde per x-värde.

Man kan i och för sig tänka sig att rita de båda värdena samtidigt men det finns ett bättre sätt - polära koordinater

Parametrisering

Tänk på den rätvinkliga triangeln med hypotenusan r. Då kan man utgå från cirkelns mittpunkt i origo och beskriva x med cosinus och y med sinus som vi gjort tidigare. X- och y-koordnaterna uttrycks med hjälp av radien r och vinkeln t. Det kallas för parametrisering. r är parametern och t är en ny variabel, vinkeln. En parameter kan ändras från cirkel till cirkel vilket ger ändrad storlek (radie) men den ändras inte medans man ritar cirkeln. Gör man det får man helt andra former och det finns faktiskt exempel på det med på spelprogrammering.nu men det får du kolla på själv senare.

[math]\displaystyle{ x = r \cdot \cos t\, }[/math]

[math]\displaystyle{ y = r \cdot \sin t\, }[/math]

För r = 1 erhålls enhetscirkeln, det vill säga cirkeln med radie 1 och med mittpunkt i origo. t är i detta fall en vinkel som ökar från 0-360^o.

Javascript

Idag ska vi äntligen jobba med Javascript!

Kartesiska koordinater

Uppgift
Prova att använda cirkelns ekvation och rita en cirkel. Tips: du måste lösa ut y. (exemepelvis ur y2 + x2 = 400) Ladda ner följande filer i en mapp och pröva själv genom att ändra i koden: Använde den här sidan att pröva på: http://www.wikiskola.se/javascript/kod.html koden: http://www.wikiskola.se/javascript/kod.js samt en libraryfil: http://www.wikiskola.se/javascript/library.js

Facit: (klicka expandera till höger)

• cirkeln http://www.wikiskola.se/javascript/cirkel_kartesiska.html
• koden http://www.wikiskola.se/javascript/cirkel_kartesiska.js

Polära koordinater

Titta på de här exemplen om hur enkelt man ritar cirklar med polära koordinater:

• Titta först på en punkt och en vinkel ritad i kartesiska koordinater: http://spelprogrammering.nu/bokexempel/08/06.html
• Läs första sidan
• Koden ovan anropar en funktion som heter circle och som finns i ett bibliotek på sajten spelprogrammering.nu. Undersök hur funktionen ser ut.
• Ritas cirkeln på så sätt som i matteboken?
  • Tänk på att funktionen circle anropar: context2D.arc som verkar vara gjord i C++ och höra till själva canvas-funktionen (den näms i förbigående på sid 31 i boken). Vet du?
• En cirkelbåge som går 360 grader är praktiskt. Det kallas polära koordinater.
  • Kolla http://spelprogrammering.nu/bokexempel/08/enhetscirkeln.html
  • En båge med vinkeln en radian: http://spelprogrammering.nu/bokexempel/08/09.html
  • Fler matteexempel: http://spelprogrammering.nu/bookexamples08
• Kan vi gå tillväga som i funktionen för triangeln och skapa en cirkel med vår formel från matteboken?

Mer: Testa funktionen att rita med polära koordinater i GGB.