Kmom02: Animering och trianglar

Vi fördjupar oss i programmering med JavaScript genom att läsa på om dess grundstrukturer samt testar dem via laborationer. Därefter ser vi kan förbättra vår sandbox med animeringar och helskärmsläge. Du fortsätter studera WebGL och ritar trianglar som du styr med musen och du skapar enklare animationer.

Det kan se ut så här när vi är klara.

(Detta är instruktionen för kursmomentet och omfattar det som skall göras inom ramen för kursmomentet. Momentet omfattar cirka 20 studietimmar inklusive läsning, arbete med övningar och uppgifter, felsökning, problemlösning, redovisning och eftertanke. Läs igenom hela kursmomentet innan du börjar jobba. Om möjligt – planera och prioritera var du vill lägga tiden.)

#Läsanvisningar

(ca: 4-8 studietimmar)

#Kurslitteratur

Läs följande:

1. WebGL Programming Guide.
   • Ch 3: Drawing and transforming triangles
   • Ch 4: More transformations and basic animation

I kapitlen finns en del exempelprogram som du kan testa direkt i ditt kursrepo example/webgl/theBook, eller via dbwebb’s kopia av kursrepot.

1. Läs i boken Speaking JavaScript: An In-Depth Guide for Programmers om villkor och loopar.
   • Ch1 Basic JavaScript (läs endast om conditionals och loops)
   • Ch13 Statements (hoppa över with)
   • Ch15 Functions

#MDN

Läs igenom följande.

1. I dokumentet “MDN JavaScript Guide” läs om konstruktioner för villkor och loopar samt funktioner.

   • Control flow and error handling
   • Loops and iteration
   • Functions

2. Bekanta dig med referensmanualen JavaScript reference. Som en introduktion kan du kika på konstruktioner för villkor och loopar samt funktioner.

   • Statements and declarations
   • if…else
   • for
   • Functions

#Artiklar

Läs följande artiklar.

1. På MDN finns en längre artikel om grunderna i JavaScript, som en översiktlig introduktion till grundläggande begrepp i JavaScript. Du kan kika i artikeln “A re-introduction to JavaScript (JS tutorial)” och läsa översiktligt. Kanske vill du komma tillbaka till artikeln i senare kursmoment. Artikeln ger en bra översikt till den som redan kan andra programmeringsspråk.

#Video

Titta på följande:

1. Videoserien Lär dig JavaScript är tätt kopplat till kursmaterialet. Kika igenom serien under kursens gång.

2. The Khronos Group har en videoserie om WebGL. Kika igenom vad den innehåller och se om du kan finna inspiration.

#Lästips

Läs gärna följande för att förkovra dig.

1. Kika på de artiklar som WebGL Fundamentals presenterar inom det område som kursmomentet omspänner.

2. Kika på de lektioner som Learning WebGL erbjuder inom kursmomentets område.

3. Se video med JavaScript-gurun Douglas Crockford i en historisk bakgrund om programmeringsspråk och en introduktion till JavaScript: “Crockford on JavaScript - Volume 1: The Early Years”.

#Övningar & Uppgifter

(ca: 6-10 studietimmar)

#Övningar

1. Arbete igenom övningen Strukturera JavaScript med klasser för att träna på några av de nyare JavaScript konstruktionerna som tillkommit senaste åren.

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

1. Gör laborationen “JavaScript med funktioner”. Spara resultatet i me/kmom02/lab3.

2. Gör uppgiften “JavaScript och arrayer”. Spara resultatet i me/kmom02/lab4.

3. Gör uppgiften “Rita trianglar med WebGL och animera dem”. Ditt resultat sparar du delvis i me/kmom02/sandbox3 och delvis i me/kmom02/tri.

#Resultat & Redovisning

(ca: 1-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

Se till att följande frågor besvaras i redovisningstexten.

• Hur är din syn på programmeringsspråket JavaScript så här långt? Jämför med andra programmeringsspråk som du känner till.
• Hur känner du inför WebGL kontra de 3D-tekniker du är van vid?
• Gjorde du något speciellt med kodstrukturen i din sandbox?
• Gjorde du något speciellt med triangel-uppgiften?
• Vilka resurser i kursmaterialet finner du mest nyttiga för att lösa uppgifterna? Eller hittar du egna resurser på nätet, isåfall vilka och vad tycker du om dem?

#Revision history