World building through coding

Inleiding

Mijn twee grootste hobby’s zijn coderen en schrijven.

In het propedeusejaar van mijn CMD-studie maakte ik een minimale start met de programmeertaal HTML. Ik vond het zo geweldig, dat ik hier in mijn vrije tijd mee verder wilde gaan, maar ik heb nooit de tijd gevonden en ik haakte af zodra ik vastliep. De rest van mijn vrije tijd besteed ik aan het schrijven van verhalen. Ik ben hier ooit mee begonnen op de basisschool en sindsdien is het mijn hobby.

Om mijn hobby’s te combineren wil ik onderzoeken hoe ik mijn lineaire verhalenwereld kan transformeren in een non-lineaire, storytelling website.

Om deze onderzoeksvraag te beantwoorden ligt de focus op de deelonderwerpen:

  1. Welke storytelling/world building websites inspireren mij en waarom?
  2. Hoe wil ik mijn non-lineaire storytelling website presenteren aan de wereld?
  3. Wat is er allemaal mogelijk met HTML/CSS?

Het doel is om een storytelling website te schrijven met HTML/CSS, waar aanvullende inhoud van mijn zelfgeschreven verhalen op te ontdekken zijn. Dit onderwerp past binnen de opdracht, omdat er analytisch en creatief onderzoek wordt verricht.

Definitie

Om te begrijpen hoe het resultaat van het onderzoek tot stand is gekomen, worden hier een aantal definities gegeven.

World building is het construeren van een wereld, dat voorafgaat aan het verhaal van een verhaal. De wereld vormt een container en de verhalen passen daar in (McDowell, 2017).

Storytelling gaat over het vertellen van een verhaal als Storyteller en over het beleven van een verhaal als bezoeker. Als Storyteller leg je een bepaalde structuur op in jouw verhalen. Als de bezoeker invloed uitoefent op het verhaal, spreken we van interactieve narrativiteit (Bos, 2016).

Filmtheoreticus Cameron (2014) en game designconsultant Adams (1999) vinden een interactieve vertelling eigenlijk een oxymoron. Een oxymoron betekent een ogenschijnlijke tegenstelling (Jos van den Broek, 2015). Cameron zegt hierover:

“wanneer de auteur ten behoeve van het verhaal een ordening fixeert, doet hij afbreuk aan de interactiviteit, terwijl het vergroten van de mogelijkheid tot interactie onvermijdelijk afbreuk doet aan het verhaal” (Cameron in C. Bassett, 2014).

In de game-wereld bestaan er twee kampen rondom interactieve narrativiteit: de narratologen en de ludologen.

  • Narratologen vinden het verhaal belangrijker dan de spelbeleving (Bourgonjon, 2007-2008).
  • Ludologen vinden het spel belangrijker dan het verhaal.

Ludoloog Juul meent dat narrativiteit en het spel elkaar uitsluiten. In verhalen blijft het einde een mysterie tot de laatste pagina. Bij videogames ben jij verantwoordelijk voor het einde. (Juul, 1999). De ludoloog Frasca zegt dat de speler van een videogame meer wordt dan slechts een kijker, hij wordt medeauteur (Frasca, 1999).

Als schrijver bekijk ik het onderwerp vaak vanuit de rol als narratoloog. Tegenwoordig zijn videogames met een uitgediept verhaal niet meer weg te denken. Ik speel deze spellen om me te verliezen in een andere wereld. Zonder verhaal gaat deze ervaring verloren.

The Legend of Zelda heeft een zeer uitgediept verhaal (bron: The Legend of Zelda Hyrule historia).

Omdat ik het verhaal belangrijk vind, maak ik voor mijn website liever een verhaal met minder interactieve mogelijkheden. Game of Thrones is een voorbeeld van een website die mij inspireert (Game of Thrones, 2015).

Game of Thrones heeft een non-lineair website gemaakt met allerlei informatie, wat je op jouw eigen tempo kan bekijken (bron: Game of Thrones, 2015).

Sterk hieraan is dat je een eigen weg in kan slaan. Daar staat tegenover dat dit al veel wordt gedaan, zoals bij Zelda, Harry Potter, enzovoort. Bovendien bieden deze websites geen aanvullend materiaal. De websites zijn eigenlijk opbergplaatsen voor alles dat ooit in de serie werd laten zien.

Een ander voorbeeld van een storytelling website is My boyfriend came back from the war (Lialina, 1996).

My boyfriend came back from the war is een website waar je op kan blijven doorklikken om dieper in het verhaal te komen (bron: Lialina, 1996).

Hier kies je zelf een route. Er zijn oneindig veel mogelijkheden; dit maakt deze website erg krachtig. De site is als het ware een ontdekkingsreis. Echter, het verhaal kan verloren gaan aan de drang om te blijven klikken en te zien waar je uitkomt.

Escaping the Prison is een derde voorbeeld. Dit is een film met een game-element.

Jij bepaalt de keuzes van het karakter. Hiermee heb je tevens invloed op het verloop van het verhaal, waardoor jij een eigen einde creëert (bron: Puffballs United, 2015).

Deze film speelt met interactieve narrativiteit: jij maakt de keuzes van het hoofdkarakter. De kracht hiervan is dat de kijker participeert. Maar omdat jij het einde bepaalt, doet dit afbreuk aan het verhaal. (Puffballs United, 2015).

De website Thymia stelt persoonlijke vragen om je emoties om te zetten in beeld.

Thymia loopt puntsgewijs een paar vragen af en baseert een beeld op jouw antwoorden (bron: Gobelins Paris Students, 2017).

De kracht van Thymia is de interactiviteit. Met muziek, voice-overs en beeld wordt je het verhaal in gezogen. Er is echter maar één pad door Thymia en die wordt voor je aangelegd. Het is een lineair verhaal en er valt weinig te ontdekken.

Ook Boldking gebruikt Storytelling op hun website. Ze gebruiken een animatie waarmee ze hun service uitleggen.

Boldking gebruikt een animatie in plaats van een lap tekst om uit te leggen hoe hun service werkt (bron: Boldking, 2017).

Sterk hieraan is dat de bezoeker eerder geneigd is om deze uitleg te bekijken. Het kan echter wel ten koste gaan van de boodschap, omdat je vooral gefocust bent op de animatie zelf. Bovendien is de animatie lineair.

Aanpak

Een CMD’er zou het onderzoek als volgt aanpakken:

gather
generate
make
share

Het Desing Thinking Proces (Bron: IDEO, 2017).

Het concept ontstaat op deze manier volgens een systematisch Design Thinking proces (IDEO, 2017). Een andere manier om dit onderzoek aan te pakken is door beeldend te werk te gaan: experimenteer met beeld en papier, zodat het concept zich speels ontwikkelt, zoals het vak UX Playful is opgebouwd in het propedeusejaar van CMD Utrecht (Marieke de Roos, 2016).

Ik heb voor het proces van Design Thinking gekozen, omdat ik structuur nodig heb in mijn leven. Dan weet ik precies waar ik sta en wat ik nog moet doen. Ik heb het als volgt aangepakt:

  • Week 1: inspiratie verzameld en wireframes gemaakt.
  • Week 2: content gekozen en een wireframe uitgewerkt, om dit te testen met de doelgroep.
  • Week 3: HTML/CSS geleerd en experimenteren gedaan.
  • Week 4: website gecodeerd en getest bij de doelgroep.
  • Week 5: iteraties gedaan.

CMD Methods kaarten die ik gebruikt heb deze studio Seminar (HAN, sd).

Proces

Mijn proces per week in het kort.

HTML CSS

Mijn samenvatting van de code.

Conclusie

Het onderzoek begon met de onderzoeksvraag: hoe kan ik mijn lineaire verhalenwereld transformeren in een non-lineaire, storytelling website?

Door ongeveer 20 verschillende inspiratiebronnen te bekijken, ben ik erachter gekomen hoe je een dynamisch verhaal tot stand krijgt. Deze bronnen, zoals de website van Game of Thrones, inspireren mij. Dit zijn storytelling websites die op een eigen manier de aandacht van de bezoeker vasthouden en een duidelijk verhaal vertellen. Hier heb ik mijn idee vandaan om de bezoeker een eigen pad te laten kiezen in het beschikbaar gestelde materiaal.

Belangrijk is dat ik deze onderzoeksvraag heb beantwoord vanuit mijn perspectief als narratoloog. Vanuit de ludologie had de website er heel anders uitgezien, omdat het spel dan centraal stond. Ik wilde mijn website juist presenteren aan de wereld met het verhaal centraal en daarom is de interactie beperkt gebleven.

Om de website te coderen heb ik verschillende experimenten gedaan met HTML/CSS. Om deze kennis te bewaren heb ik samenvattingen gemaakt van alles wat ik geleerd heb. Natuurlijk is er vast veel meer mogelijk met HTML/CSS, maar voorlopig heb ik voldoende geleerd om een gebruiksvriendelijke en functionerende website te kunnen coderen.

Vanuit mijn onderzoeksvraag is dit het uiteindelijke resultaat:

“Een jonge koerier vervoert goederen tussen de vier ommuurde steden, middenin het gevaarlijke Dem’N. Wanneer er een beroep wordt gedaan op zijn vaardigheden door één van de machtigste vrouwen van het land, trekt hij eropuit met een team om deze laatste opdracht in vervulling te brengen. Er wordt van hem verlangd dat hij grote gevaren trotseert. De reis leidt tevens tot interne conflicten, die zijn doel in de weg staan. De vraag of hij zal slagen hangt af van het vertrouwen in zijn team en in zichzelf!”

Dit is mijn verhaal.

En dit is mijn non-lineaire Storytelling website.

Aanbeveling

Mijn onderzoek kan interessant zijn voor Storytellers, omdat ik onderzoek gedaan heb naar narrativiteit. Het kan ook interessant zijn voor medestudenten die ook een storytelling website willen maken, om zo HTML/CSS te meesteren, want de combinatie van storytelling en HTML (creative coding) zal in de toekomst alleen nog maar belangrijker worden (Saldania, 2017).

Voor mijn medestudenten geef ik de volgende tip mee: denk goed na over wat je op jouw website zet en begin op tijd met het verzamelen hiervan. Gebruik geen plaatjes van het internet, je zal deze plaatjes zelf moeten tekenen of fotograferen.

Bronnen

Inspiratiebronnen:

Auchampach, D. (2015). Blaze Fielding. Opgehaald van Vizzed.com: http://www.vizzed.com/videogames/character.php?id=3290

Boldking. (2017). Hoe het werkt – Milieubewust – Wat krijg je? Opgehaald van Boldking: https://www.boldking.com

Feil, A. (Regisseur). (2012). Mercedes-Benz Singapore: ‘Drive Seek’ [Interactive film].

Game of Thrones. (2015). Featured Locations. Opgehaald van Game of Thrones: http://viewers-guide.hbo.com/game-of-thrones/season-7/episode-7/map/location/25/inn-at-the-crossroads

Gobelins Paris Students. (2017). Thymia. Opgehaald van Thymia: http://thymia.world

GTST. (2017). Inwoners. Opgehaald van GTST: https://gtst.nl/#!/bio/2017-2018/rollen

Guerrilla. (2017). WE RAISE OUR ARTISTRY, ATTENTION TO DETAIL AND TECHNICAL PERFORMANCE WITH EVERY TITLE. Opgehaald van Explore: https://www.guerrilla-games.com/explore

Heemskerk, J., & Paesmans, D. (sd). Jodi. Opgehaald van Jodi: http://wwwww.jodi.org

Lialina, O. (1996). My boyfriend came back from the war. After dinner they left us alone. Opgehaald van Teleportacia: http://www.teleportacia.org/war/

Moniker. (2012-2017). We are an Amsterdam based interactive design studio researching the social effects of technology. Opgehaald van Moniker: https://studiomoniker.com

New Line Productions. (2011). Content. Opgehaald van Lord of the rings: http://www.lordoftherings.net/home.htm

Nintendo. (2011). Explore the world. Opgehaald van The Legend of Zelda; Skyward Sword: http://www.zelda.com/skywardsword/#/world

Nintendo. (2017). Super Smash Bros. Opgehaald van Super Smash Bros: http://www.smashbros.com/nl/

NobodyHere. (1998). Mijn naam is Jogchem Niemandsverdriet en het spijt me van alles wat gaat komen. Opgehaald van NobodyHere: http://nobodyhere.com

Pottermore. (2017). Explore the story. Opgehaald van Pottermore: https://www.pottermore.com/explore-the-story

Puffballs United. (2015). Escaping the prison. Stickpage.com.

Steege, B. t. (2017). How code creates an experience. Opgehaald van studie.bewauw: http://studie.bewauw.com/pitchseminar/

The Legend of Zelda. https://www.slideshare.net/hydevk/the-legend-of-zelda-hyrule-historia-26244683.

Bronnen coding:

Williamson, J. (2014). HTML Essential Training Opgehaald van Lynda: https://www.lynda.com/HTML-tutorials/Welcome/170427/196125-4.html

w3schools. (2017). CSS Tutorial. Opgehaald van w3schools.com: https://www.w3schools.com/css/default.asp

w3schools. (2017). HTML5 Tutorial. Opgehaald van w3schools.com: https://www.w3schools.com/html/default.asp

Bronnen kennis:

Adams, E. (29 december 1999). The Designer’s Notebook: Three Problems for Interactive Storytellers. Opgehaald van Gamasutra, http://www.gamasutra.com/features/designers_notebook/19991229.htm

Bourgonjon, J. (2007-2008). Een retorische analyse van videogames (pp. 43-44). Gent: Faculteit Psychologie en Pedagogische Wetenschappen.

Bos, S. (2016). Wat is storytelling? De bouwstenen van een goed verhaal. Opgehaald van De kracht van content: https://dekrachtvancontent.nl/contentmarketing/storytelling-de-vijf-bouwstenen-van-een-goed-verhaal/

Bradshaw, C. (2017). The Ultimate Guide To World-Building: How To Write Fantasy, Sci-Fi And Real-Life Worlds. Opgehaald van Writer’s Edit: https://writersedit.com/fiction-writing/the-ultimate-guide-to-world-building-how-to-write-fantasy-sci-fi-and-real-life-worlds/

Frasca, G. (1999). LUDOLOGY MEETS NARRATOLOGY: Similitude and differences between (video)games and narrative. Opgehaald van ludologie.org: http://www.ludology.org/articles/ludology.htm

Haak, B. v. (Regisseur). (2017). All in the game VPRO Tegenlicht [Film].

HAN. (sd). CMD Methods Pack. Amsterdam: HAN.

IDEO. (2017). The 4 Phases of Design Thinking. Opgehaald van IDEO: https://www.ideou.com/pages/design-thinking

(2014). In C. Bassett, The Arc and the Machine: Narrative and New Media (p. 41). Oxford University Press.

Jos van den Broek, W. K. (2015). Beeldtaal. In W. K. Jos van den Broek, Beeldtaal. Nederland: Boom Lemma Uitgevers.

Juul, J. (2001). A Clash between Game and Narrative. Copenhagen: Institute of Nordic Language and Literature, University of Copenhagen.

Juul, J. (2003). The Game, the Player, the World: Looking for a Heart of Gameness. (p. 5) Utrecht.

Marieke de Roos, T. W. (2016). Cursushandleiding UX Playful. In T. W. Marieke de Roos, Cursushandleiding UX Playful. Utrecht: Hogeschool Utrecht.

McDowell, A. (2017). What Is the World Building Institute? Opgehaald van World Building Institute: http://worldbuilding.institute/about

Saldania, T. (2017). Coding: The New Storytelling? Opgehaald van Computational Thinkers: https://www.computationalthinkers.com/coding-new-storytelling/

English summary

This research is about combining code and world building. I wrote in this text how I interpreted the terms, how I dealt with the research and what I eventually made. My research can be interesting for Storytellers, because I discuss about the degree of interactivity that influences your story. It is also interesting for fellow students who want to make a Storytelling website. The main problem that I encountered is making images. You cannot use pictures from the internet, so I had to fabricate everything myself.

Reflectie

Ik ben als persoon wijzer geworden over mijn eigen functioneren. Als onderdeel van dit project heb ik gereflecteerd op mijn proces en ontwikkeling op basis van het Johari model (zie afbeelding).

   

Afbeelding: Johari-venster (Schuitemaker, 2018)

Tijdens het invullen van het Johari venster kwam onder andere naar voren dat ik vastzit in een tunnelvisie. Ik kijk te veel naar mijn eigen ideeën en ben niet echt bereid te luisteren naar de ideeën van anderen. Ik druk mijn eigen visie door. Ik heb hier niet aan kunnen werken dit project, omdat dit een individueel traject was. Daarom wil ik dit meenemen naar de volgende periode.

Actiepunt

Mijn doel is om flexibeler op te treden en andere ideeën in te laten. Dit wil ik bereiken door vaker mijn mond te houden en echt te luisteren naar de ideeën van anderen. Als ik een idee van mijn teamgenoot niet zie zitten, leg ik uit waarom en misschien kunnen we er samen dan uitkomen of onze ideeën combineren. Ik weet dat ik mijn doel heb behaald door tussentijds en achteraf met mijn team te reflecteren. Ik wil het doel behaald hebben, voordat de volgende periode ten einde is. Omdat ik de enige ben die zich moet aanpassen, is het een realistisch doel.

Dankwoord

Ik wil graag Sam Verkoelen, Ronald van Essen en Bart Ruitenbeek bedanken, omdat ik altijd bij hen heb mogen aankloppen als ik hulp nodig had met mijn code.

Keywords (tags)

Studio Seminar, 2018, Periode B, CMD Studio, Cyber, Digital Craft Lions, Creative Coding, HTML/CSS, Narrativiteit, World Building, Storytelling.

Enya Schuitemaker (1695075)
Utrecht januari 2018

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *