CANVAS
Mitt fördjupningsprojekt Webbutveckling 2
Jag har valt att fördjupa mig i JavaScript/Canvas.
Anledningen att jag valde att fördjupa mig just inom denna webbteknik är för att man kan skapa:
- Dynamisk grafik.
- Online och offline spel.
- Animationer.
- Interaktiv video och ljud.
Dessa tekniker är viktiga grundstenar inom Igaming. Därmed kommer kunskaperna som medföljer detta fördjupningsarbete till stor nytta för mig även i framtiden. Jag vill förbättra min teknik, samt min förståelse och kunskap för 2D-animationer med hjälp av canvas/JavaScript.
Detta projekt vill jag se som en början på min framtida karriär som utvecklare/spelutvecklare. Mitt drömscenario efter avslutad kurs:
Efter att ha avslutat kursen är mitt mål att fortsatt utveckla mina kunskaper genom vidare studier, för att på sikt kunna söka anställning som utvecklare hos något av de större företagen i online casino-branschen.
Matrix Rain
Det jag skapade i mitt projekt var ett enligt mig väldigt lyckat försök att efterlikna det som syns på datorskärmarna i filmen matrix. Ett regn av fallande avancerad slumpvis genererad kod som i filmen ska föreställa en virtuell verklighet som vi människor kopplas upp emot för att kunna nyttjas av maskiner som batterier. Det är nog lika komplext som det låter och det är lite så som med koden bakom som skapar denna animering.
Jag ska kort försöka beskriva det jag kodat och hur jag gått tillväga. Har du aldrig tidigare skrivit kod själv så kommer den kommande texten troligtvis kännas som främmande. Animeringen är uppbyggd av flera olika delar men grunden baseras på att man skapar en ”duk” att rita på. Därav skapar man en plats ”tagg” i Html dokumentet som man genom Java Scriptet kan anropa. På denna plats skapar man då denna ”duk” fördelaktigen med en bestämd storlek som passar ändamålet. Jag har valt att på denna plats även som ”default” ha en stillbild som föreställer animationen och som på så vis garanterar att det inte ser så tomt ut om användaren av sidan inaktiverat att köra JavaScript.
Så egentligen det första skriptet gör innan det skapa dukarna är att radera dessa default bilder.
Ska vi beskriva skriptet på allra enklaste möjliga sätt så blir nästa steg att dela upp dukarna i mindre bitar med små kolumner där våra slumpgenererade bilder kan falla fritt ner och sedan en efter en målas över med genomskinlighet tills de försvinner det en illusion av fallande kod.
Men för att den ska just få den illusionen så krävs det att det utförs många målningar och övermålningar i högt tempo. Detta genereras genom en rad funktioner loopar villkor. Men den stora utmaningen att få detta att fungera felfritt är att vi måste anpassa matematiken på dukstorlekarna om användaren ändrar webbläsarfönstrets storlek.
Detta har jag uppnått genom att lyssna efter eventet resize och när det sker målar vi om allt. Det görs genom att en funktion stoppar pågående animering raderar de gamla dukarna sätter in nya dukar anpassade efter den nya storleken och startar på nytt upp animeringen.
I kod så ser det ut såhär:
