Creatieve codering: maak visuele stukken met JavaScript
A course by Bruno ImbriziCreatief programmeur
A course by Bruno Imbrizi, Creatief programmeur
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.
What is this course's project?
Ontwerp een reeks creatieve visuele composities met code die uitgevoerd kunnen worden in een webbrowser.
Projecten van studenten van de cursus
Who is this online course for?
Deze cursus is voor iedereen die geïnteresseerd is in programmeren en wil leren hoe je visuals creëert met code.
Requirements and materials
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
- 16 dagen geleden
Great course, I wish I’d had a stronger foundation in coding before taking it.
- 1 maand geleden
Excellent introductory course
- 2 maanden geleden
Great course!!!
- 2 maanden geleden
I loved this! I learned a lot and I sincerely recommend this course.
- 4 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.
Certificates
PLUSIf you're a Plus member, get a persoonlijk certificaat signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
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 is using programming for artistic or visual expression. This course teaches you how to use JavaScript, HTML, and Canvas to create interactive visuals and generative art through hands-on coding experiments.
This course is designed for intermediate users. Basic familiarity with JavaScript and web development is recommended, but key concepts and tools are explained step by step for those with some coding background.
You'll need a code editor like Sublime Text or Visual Studio Code, Node.js, npm, and a modern web browser. The course also covers installing and setting up all required tools for creative coding projects.
You'll learn to create generative art, interactive visuals, and prototypes using JavaScript, Canvas, and web technologies. Topics include drawing shapes, transformations, animation, exporting graphics, and using libraries like Canvas Sketch.
The course teaches you to use JavaScript Canvas API methods such as fillRect, arc, and fillStyle to draw and style rectangles, circles, and other shapes directly in the browser.
Yes, you'll learn to export your generative sketches as PNG images or video files using Canvas Sketch CLI, along with workflow tips for high-quality exports.
You'll be guided through installing Canvas Sketch, initializing projects, managing dynamic canvas dimensions, and running sketches in your browser or terminal.