Creatieve codering: maak visuele stukken met JavaScript
Een cursus van Bruno ImbriziCreatief programmeur
Een cursus van Bruno Imbrizi, Creatief programmeur
- 4,897% positieve beoordelingen(1.2K)
- 59.893 studenten
- 21 lessen (2u 42m)
- 34 aanvullende bronnen (5 bestanden)
- Online en in je eigen tempo
- Beschikbaar in de app
- Audio: Engels, Spaans (Latam), Frans, Italiaans, Portugees, Turks
- Spaans · Engels · Portugees · Duits · Frans · Italiaans · Pools · Nederlands · Turks
Niveau:
Beginner- Onbeperkte toegang
Leer de basisprincipes van het programmeren en leer afbeeldingen en tekst te ontwikkelen, tekenen en animeren met code
Experimenteren met creatief programmeren is nooit saai, er zijn altijd dingen te ontdekken, nieuwe technieken om te leren of nieuwe afbeeldingen om te creëren. Voor creatief programmeur Bruno Imbrizi is het een kans om zijn interesse in motion graphics en visuals te combineren met programmeren. Hij heeft zowel voor kleine bureaus als voor bekende merken gewerkt, zoals Dell, Adidas en Universal Music.
In deze cursus deelt Bruno zijn kennis om je te helpen bij het creëren van aantrekkelijke visuals door middel van programmeren. Ontdek de basics van programmeren en leer tekenen met creatief coderen in JavaScript.
Wil je je kennis van coderen verder uitbreiden? Bekijk Bruno's tweede cursus, Creatieve codering: maak visuele stukken met JavaScript om meer geavanceerde technieken te ontdekken voor het maken van gecodeerde composities met kleur, beweging en geluid.
Wat leer je tijdens deze online cursus?
21 lessen & 39 aanvullende bronnen
Een omgeving om te schetsen
12 minuten, 39 seconden
Rooster
7 minuten, 51 seconden
Lawaai
6 minuten, 40 seconden
GUI
11 minuten, 12 seconden
Tekst
9 minuten, 26 seconden
Bitmap
10 minuten, 34 seconden
Wat is inbegrepen in deze cursus?
Eerst maak je kennis met creatief programmeur Bruno Imbrizi. Hij vertelt over het begin van zijn carrière als grafisch ontwerper en hoe hij dit combineert met zijn interesse in programmeren. Daarna bespreekt hij de platformen die hij graag gebruikt en waarom, en hij vertelt ook meer over de mensen die zijn werk beïnvloed hebben.
Ontdek de basics van programmeren. Bruno leert je hoe je de belangrijkste tools instelt voordat hij een overzicht geeft van programmeringsconcepten zoals variabelen, functies, arrays en loops. Voordat hij begint aan een collectie schetsen laat hij zien hoe je je set-up kunt optimaliseren.
Creëer een nieuwe digitale schets door verschillende transformaties te gebruiken. Leer daarna hoe je trigonometrie gebruikt om vormen rond een cirkel te verdelen. Leer hoe je de afmetingen van je schetsen aanpast en zie hoe je utility functions het best inzet om je bij je volgende ontwerpen te helpen. Werk je schets af door bogen te tekenen en te spelen met verschillende parameterwaardes.
Ontwerp een geanimeerde schets met agenten die over het oppervlak bewegen. Eerst leer hoe je daar lijnen tussen tekent op basis van hun afstand, en daarna zie je hoe je je animatie kunt exporteren als een videobestand dat je online kunt delen.
Ga terug naar je raster en leer hoe je dit flexibeler en efficiënter kunt maken. Daarna gebruik je geluidsgeneratoren om het te verbeteren. Creëer een klein controlepaneel waarmee je je schetsen in realtime kunt updaten.
Tot slot ontdek je hoe je tekst in je composities kunt verwerken. Bruno laat je zien hoe je dit tekent en meet, hoe je lettertype-eigenschappen instelt en ook hoe je je lettertype update met één druk op de knop. Je sluit de cursus af met informatie over hoe je kleurwaardes leest en je werkt je definitieve schets af met de laatste details.
Wat is het cursusproject?
Ontwerp een reeks creatieve visuele composities met code die uitgevoerd kunnen worden in een webbrowser.
Voor wie is deze online cursus bedoeld?
Deze cursus is voor iedereen die geïnteresseerd is in programmeren en wil leren hoe je visuals creëert met code.
Vereisten en materialen
Basis rekenvaardigheden worden aanbevolen.
Basis rekenvaardigheden worden aanbevolen. U hebt een computer met Node.js nodig, evenals toegang tot een webbrowser en teksteditor.
Besturingssystemen: ⦁Linux ⦁SmartOS ⦁macOS 10.7 of hoger ⦁Windows 2008 of hoger
Systeem vereisten: ⦁4GB RAM ⦁10 GB vrije ruimte
Beoordelingen
- kotrynanPLUS3 maanden geleden
Great course, I wish I’d had a stronger foundation in coding before taking it.
- 3 maanden geleden
Excellent introductory course
- 4 maanden geleden
Great course!!!
- 5 maanden geleden
I loved this! I learned a lot and I sincerely recommend this course.
- 6 maanden geleden
Ótimo curso. O professor entende do assunto em profundidade e sabe transmitir muito bem o conteúdo. É uma excelente oportunidade como porta de entrada para a programação criativa.
Hij heeft meer dan 10 jaar ervaring en heeft gewerkt bij bureaus, ontwerpstudio’s, productiemaatschappijen en bekende merken, waaronder Dell, Adidas en Universal Music. Hij was te zien in online publicaties zoals WIRED en Londonist, en hij heeft verschillende prijzen gewonnen, waaronder de Adobe Cutting Edge Award en FITC Best Digital Installation.
Inhoud
- U1
Introductie
- Over mij
- invloeden
- U2
grondbeginselen
- Opstelling
- Variabelen en functies
- Arrays en lussen
- Een omgeving om te schetsen
- U3
Schetstransformatie
- Transformeren
- hoeken
- Hulpfuncties
- Bogen
- U4
Sketch Agents
- Objecten en klassen
- Animatie
- lijnen
- Video uitgang
- U5
Schetsruis
- Rooster
- Lawaai
- GUI
- U6
Schetstype
- Tekst
- asynchrone
- Bitmap
- tekens
- EP
Eindproject
- Inleiding tot codering voor visuele ontwerpers
Wat kan je verwachten van een cursus van Domestika
Leer in je eigen tempo
Geniet van thuis leren, zonder lesroosters en in je eigen tempo. Jij beslist wanneer je verder gaat met het volgende onderdeel.
Leer met de beste professionals
Leer de meest bruikbare methoden en technieken van de beste professionals in de creatieve industrie.
Ontmoet deskundige docenten
Iedere docent brengt kennis met passie over, biedt duidelijke uitleg en een professioneel perspectief bij elke les.
Certificaten
PLUSAls Plus-lid krijg je voor elke cursus een persoonlijk certificaat, ondertekend door je docent. Deel het in je portfolio, op social media of waar je maar wilt.
Zorg dat je op de voorste rij zit
Dankzij de hoge kwaliteit van de video's mis je geen enkel detail. Dankzij de onbeperkte toegang kun je de lessen zo vaak bekijken als nodig is om je vaardigheden te perfectioneren.
Deel kennis en ideeën
Stel vragen, krijg feedback en bied oplossingen aan. Deel je leerervaringen met andere studenten in de community die net als jij een passie hebben voor creativiteit.
Maak contact met een wereldwijde creatieve community
Deze community heeft miljoenen gebruikers van over de hele wereld, nieuwsgierig en enthousiast om hun creativiteit te verkennen en te uiten.
Geef cursussen op een professionele manier
Domestika selecteert zorgvuldig haar docenten en produceert iedere cursus in eigen huis om een uitstekende online leerervaring te garanderen.
Veelgestelde vragen
Creative coding betekent programmeren voor artistieke of visuele expressie. In deze cursus leer je hoe je met JavaScript, HTML en Canvas interactieve visuals en generatieve kunst maakt via praktische codeerexperimenten.
Deze cursus is bedoeld voor gebruikers met een beetje ervaring. Basiskennis van JavaScript en webontwikkeling is aanbevolen, maar belangrijke concepten en tools worden stap voor stap uitgelegd voor wie al wat kan programmeren.
Je hebt een code-editor nodig zoals Sublime Text of Visual Studio Code, Node.js, npm en een moderne webbrowser. De cursus behandelt ook het installeren en instellen van alle benodigde tools voor creative coding projecten.
Je leert generatieve kunst, interactieve visuals en prototypes maken met JavaScript, Canvas en webtechnologieën. Onderwerpen zijn onder andere vormen tekenen, transformaties, animatie, exporteren van graphics en het gebruik van libraries zoals Canvas Sketch.
De cursus leert je JavaScript Canvas API-methodes zoals fillRect, arc en fillStyle gebruiken om rechthoeken, cirkels en andere vormen direct in de browser te tekenen en te stylen.
Ja, je leert je generatieve schetsen exporteren als PNG-afbeeldingen of videobestanden met Canvas Sketch CLI, plus tips voor een soepele workflow en hoge kwaliteit exports.
Je wordt begeleid bij het installeren van Canvas Sketch, het starten van projecten, het beheren van dynamische canvasafmetingen en het draaien van schetsen in je browser of terminal.
