Creatieve codering: maak visuele stukken met JavaScript

Inleiding tot codering voor visuele ontwerpers

“Hallo en welkom bij het einde van deze Domestika-cursus. In deze laatste les zullen we een samenvatting geven van wat we tot nu toe hebben gezien en ik zal enkele tips toevoegen om je te helpen op je reis naar creatief coderen. Code is een taal. Om een metafoor met gesproken taal te gebruiken, als we iets willen uitdrukken, gaat het er niet om hoeveel woorden we gebruiken, maar hoe we ervoor kiezen om de woorden die we kennen samen te stellen. We kwamen van ver. We gingen uit van een leeg bestand, van fundamentele concepten als variabelen en functies. Ik zei dat we ze overal zouden gebruiken en dat hebben we gedaan. De beste manier om te leren is altijd door het goede voorbeeld te geven en we hebben er nogal wat gezien. We zagen ook arrays, loops, conditionals en willekeurige getallen. En we zagen hoeveel we konden doen met slechts die paar concepten. De omgeving die we kozen om onze code uit te voeren, was de browser, die zeer toegankelijk en vertrouwd is. Nu weten we dat we het ook kunnen gebruiken voor het maken van visuals. We hebben gezien hoe we een HTML-pagina kunnen maken en daarin JavaScript kunnen schrijven. Toen zagen we een meer uitgebreide opstelling met canvas-schets. Het gaf ons een omgeving met enkele voordelen ten opzichte van helemaal opnieuw beginnen, zoals het gemakkelijk maken om de afmetingen van onze schets te wijzigen en deze ook automatisch opnieuw te laden zodra de code is opgeslagen. Canvas-schets is meer dan wat we in de cursus hebben gezien, dus ik raad je aan om de documentatie op Github te bekijken. Er is wat informatie over het voorbereiden van uw schets voor afdrukken in grote formaten, hoe u GIF's exporteert en ook hoe u de illustratie voorbereidt voor penplotters. De eerste schets die we samen maakten, was een eenvoudig raster. We hadden 5 rijen en 5 kolommen. Als je geprobeerd hebt dat aantal te veranderen, goed gedaan om te experimenteren. Je hebt je misschien gerealiseerd dat het raster niet langer gecentreerd zou zijn, omdat we hardgecodeerde waarden gebruikten. Later zagen we een meer flexibele manier om dingen te doen. Dus voel je vrij om terug te gaan naar schets 01 en het te verbeteren met wat je nu weet, het is een goede oefening.

In onze tweede schets hebben we een beetje trigonometrie gebruikt. Ik wou dat mijn wiskundeleraar me had laten zien hoe ik creatieve dingen kon doen met trigonometrie toen ik op school zat. Dit is een ander interessant aspect van creatief coderen, eenvoudige wiskunde gaat een lange weg. Je zou kunnen ontdekken dat sommige wiskundige concepten eindelijk klikken, het is mij zeker overkomen. In onze derde schets zagen we meer wiskunde met Pythagoras en leerden we ook hoe we het konden animeren. De browser schildert het canvas altijd opnieuw, dus we hoeven alleen de waarden in de loop van de tijd te wijzigen. Nogmaals, ik raad je aan om de canvas-sketch-documentatie te bekijken en te zien hoe je een geanimeerde lus kunt maken, door ervoor te zorgen dat je waarden veranderen en uiteindelijk terugkeren naar hun oorspronkelijke punt. In onze vierde schets heb ik je laten zien hoe je een waarde normaliseert, namelijk het veranderen van het oorspronkelijke bereik in een getal tussen 0 en 1. Dit is erg handig en wordt gezien in alle gebieden van programmeren. Als je op een dag moet, laten we zeggen een kleur omzetten in een hoek of de decibel van een audiomonster in de hoogte van een terrein, weet je dat je dat kunt doen als je de waarden normaliseert. Voor de uiteindelijke schets wilde ik je laten zien hoe je typografie op een creatieve manier kunt gebruiken, maar misschien wel het meest interessante dat we daar leerden, was hoe je kleurwaarden van de pixels in ons canvas kon lezen. We gebruikten een grote letter, maar niets zou ons ervan weerhouden om een andere afbeelding te gebruiken. Een emoji, een icoon, een logo, dat zijn allemaal pixels en het effect zou net zo goed werken. Ik zou heel graag je visuals willen zien. Wees niet bang om met alles te experimenteren. Ik heb je wat tips gegeven, maar het draait echt allemaal om ontdekken. Als we een waarde op 5 zetten, probeer dan 500. Probeer dingen zijwaarts te draaien, probeer dingen omhoog of omlaag te schalen, probeer cirkels in plaats van vierkanten, of cirkels bovenop vierkanten. En misschien nog belangrijker, probeer dingen te mixen, gebruik iets van schets 02 op schets 05 of omgekeerd. Deel uw schetsen op het forum door hierboven op de knop "Maak uw project" te klikken. Zo leren we allemaal van elkaar. Ik zal er zijn om vragen te beantwoorden en advies te geven. Het was geweldig om mijn inzichten en passie met jullie te delen. Dank je en tot ziens. ”

Gedeeltelijke transcriptie van de video

“Laatste project In deze laatste les doen we een samenvatting van wat we tot nu toe hebben gezien en ik zal enkele tips toevoegen om u te helpen bij creatief coderen. Code is een taal. Om een taalmetafoor te gebruiken, het gaat er niet om hoeveel woorden we gebruiken, maar hoe we de woorden die we kennen samenvoegen. We kwamen van ver. We gingen uit van een leeg bestand, van fundamentele concepten zoals variabelen en functies. Ik zei dat we ze overal zouden gebruiken, en dat hebben we gedaan. De beste manier om te leren is door het voorbeeld te geven en we hebben er nogal wat gezien. We zage...”

Deze transcriptie wordt automatisch gegenereerd en er kunnen typefouten in staan.

Samenvatting van de cursus: Creatieve codering: maak visuele stukken met JavaScript

• Niveau: Beginner
• 97% positieve beoordelingen (1177)
• 55889 studenten
• 6 didactische onderdelen
• 21 lessen (2u 42m)
• 5 aanvullende bronnen

• Categorie

  3D en animatie, Web- en app-ontwerp

• Domeinen

  JavaScript, Motion Graphics, Multimedia, Programmeren