Press "Enter" to skip to content

Matematik och logik i speldesign del 2, trigonometri

Matematik är ett sådant ämne som elever ibland har svårt för, när det blir för abstrakt. Elever uppskattar ofta tydlighet och när saker och ting är konkreta, i min erfarenhet. När jag lärde ut mekanik och hållfasthetslära under höstterminen kändes det som att det var en del elever som äntligen kände att de förstod att det här med sin, cos och tan faktiskt är sådant som betyder något på riktigt.

Och trigonometri är livsviktigt i speldesign. Idag tänkte jag skriva ner en liten föreläsning jag hållit med några av mina elever, med varierande grad av positiv respons till följd.

Där engelskan vinner

Jag föredrar att köra trigonometri på engelska. Dels för att verktygen, programmeringsspråken, jag använder generellt bygger på engelskan, men också för att jag tycker om de engelska termerna. Jag gillar att katetrarna kallas “opposite” (motstående katet) och “adjacent” (närliggande katet). En av de saker som gör att jag gillar det här är att det blir lättare att komma ihåg. I engelsktalande undervisning brukar lärare kunna ge eleverna den mnemotiska koden SOH-CAH-TOA. Vokalerna hjälper!

1.-soh-cah-toa

För mig som svensk så blir det här givetvis socka-toa; plötsligt har jag en enkel men udda och därför effektiv bild som hjälper mig att minnas alltihop; jag brukar tänka mig en vattenklosett med strumpor i…

SOH CAH TOA betyder alltså att Sin(x) = O/H, Cos(x) = A/H, Tan = O/A. H är Hypotenuse, O är Opposite, och A är Adjacent.

2.-soh-cah-toa-steg2

Jag brukar också passa på att skriva upp de inverterade funktionerna. Har man de vanliga är de ganska enkla. Arcsin(o/h) = x, arccos(a/h) = x, och arctan(o/a) = x.

3.-soh-cah-toa-steg3

Så; utifrån en enkel bild (strumpor i toaletten) så har jag “vecklat ut” formlerna för sinus, cosinus och tangens, samt deras inverterade versioner.

Vända gubbe

Om vi nu börjar tänka spel… Om vi tänker oss en figur som står i mitten av skärmen. Den ska hela tiden vända sig så att den följer muspekaren, och “siktar” mot den. När man klickar med musen så ska den avfyra ett skott, som då ska röra sig i riktning mot platsen där man klickade. Det här är inte något alldeles ovanligt i spelvärlden; ofta kombinerar man med att styra figurens egen x- och y-rörelse med piltangenterna.

Vid varje givet ögonblick måste alltså figuren kunna avgöra hur den ska vara roterad, baserad på sin egen position och muspekarens position.

4.-figure-pointer

Först och främst kan vi notera, att vi kan rita en triangel mellan figuren och muspekaren.

5.-figure-pointer-triangle1

Här ritar jag också upp x (vinkeln) samt a, o och h för adjacent, opposite och hypotenuse. Att räkna ut o och a är ganska lätt, eftersom vi vet x- och y-värdena för både figuren och muspekaren. Muspekarens x minus figurens x blir opposite-sidans längd, och muspekarens y minus figurens y blir adjacent-sidans längd.

6.-figure-pointer-triangle-triangles

Sedan kollar vi bland formlerna: vilken av sin, cos och tan är det som relaterar till o och a? T, naturligtvis, tangens. Toa, ni minns. Tan(x) = o/a hjälper oss däremot inte så mycket; vad vi vill ha ut är ju x. Däremot om vi kollar på den inverterade, atan(o/a) = x, så får vi ju ut x. Om då o är 20 och a är 10, så räknar vi alltså ut:

atan(20/10) = x.

Då får vi ett resultat på något över 63 grader.

7.-figure-pointer-triangle-atan

(I många programmeringsspråk får vi istället resultatet i radianer, så då får vi konvertera och hålla på, men formeln för att översätta från radienter till grader är inte så svår.)

Så lätt var det att få ut graderna figuren behövde vrida sig från att bara ha haft positionerna för muspekaren och figuren.

 

Nästa steg: Skottet

När figuren sedan avfyrar ett skott, så behöver skottet åka lite fort oavsett åt vilket håll det ska åka. Det bör dessutom åka i samma riktning som gubben var vänd åt när skottet avfyrades.

8.-bullet-target

Här behöver vi alltså räkna åt andra hållet. Vi känner till hur långt ska röra sig varje gång*, till exempel 10 pixlar. Vi vet också vilken vinkel det ska röra sig i, eftersom vi nyss räknade ut den vinkeln för gubben. Det vi behöver få fram är hur långt i x- och y-led skottet ska åka.

9.-bullet-target-x-y

8.-bullet-target-oah

Om vi då konstaterar att y-axeln är samma sak som adjacent-sidan i triangeln, längden man ska åka är hypotenusan, och x-axeln är samma sak som opposite-sidan i triangeln, så blir det hela ganska lätt. för om vi vet H (hypotenusan) och vi vet X, alltså gradtalet, och vi vill få reda på A (adjacent), så kollar vi helt enkelt vilken av cos, sin och tan som använder sig av h och a. Det är cosinus – i soh cah toa är det den andra stavelsen som har a och h.

Eftersom cos(x) = a/h, och vi vill ha ut a, så flyttar vi helt enkelt h till högersidan och får cos(x)*h = a.

10.-bullet-target-y

Och då vet vi hur långt skottet ska färdas längsmed Y-axeln varje runda.

Sedan vill vi ha ut x-axeln, alltså opposite-sidan. Vi gör samma sak: Vi har vinkeln och vi har hypotenusan, och vi vill ha ut opposite. Vilken av soh cah toa har med o och h? Sinus, såklart. Sin(x) = o/h. Och då är såklart sin(x)*h = o.

11.-bullet-target-x

Och då vet vi hur långt skottet ska röra sig i x- och y-led varje gång.

 

Så – ett praktiskt “real world”-exempel på trigonometri, både de vanliga och de inverterade funktionerna, med stark datorspelsanknytning. Det tog mig ungefär 50 minuter att gå igenom allt det här, så har man en klass som har svårt för långa föreläsningar kanske man får dela upp den i två.

* I datorspel finns alltid en “game loop”, ett antal kodsatser som repeteras om och om igen. I det här exemplet har jag inte fördjupat mig så mycket i det, men det vi behöver veta är alltså hur långt skottet ska röra sig varje gång loopen körs… Jag kanske skriver ett blogginlägg till om game loops någon annan gång.

One Comment

  1. Mikael Tylmad Mikael Tylmad October 15, 2012

    Hej!

    Jag har läst lite på din blogg och det verkar som om vi har en del gemensamt. Dels heter jag också Mikael, men jag håller också på med programmeringsundervisning och blandar det lite med matematik och fysik.

    Jag tror att nyckeln till allt är att elev har roligt, och just nu är jag mest inriktad på att använda JavaScript för att lära ut programmering, och jag inriktar mig helt på att skapa grafiska spel som man spelar med sin webbläsare.

    Denna bok har jag och min kamrat skrivit:

    http://www.bokus.com/bok/9789173791915/spelprogrammeringnu-med-html5-och-javascript-larobok-med-ovningar/

    som i sig använder denna hemsida:

    http://www.spelprogrammering.nu

    Hör av dig om du tycker att detta verkar kul!

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.