Coding creativo: realizza visual con JavaScript
A course by Bruno ImbriziProgrammatore creativo
A course by Bruno Imbrizi, Programmatore creativo
Impara i fondamenti della programmazione e scopri come sviluppare, disegnare e animare visual e testi attraverso il codice
Impossibile annoiarsi con il coding creativo! C'è sempre qualcosa di diverso da sperimentare, tecniche innovative da imparare o nuove immagini da creare. E per il programmatore creativo Bruno Imbrizi, questa disciplina è anche un'opportunità per combinare i suoi interessi – principalmente motion graphics e creazione grafica – e la programmazione. Bruno ha lavorato sia per piccole agenzie che per brand del calibro di Dell, adidas e Universal Music.
In questo corso condividerà con te le sue conoscenze insegnandoti a scrivere il codice sorgente di grafiche sorprendenti e accattivanti. Insieme a Bruno scoprirai le basi della programmazione e imparerai a usare il creative coding e Javascript per disegnare.
Vuoi approfondire la tua conoscenza nella programmazione? Guarda il secondo corso di Bruno Codice creativo 2.0 in JavaScript: animazione, suono e colore dove potrai imparare tecniche più avanzate per creare composizioni in codice con colori, movimento e suono.
Cosa imparerai in questo corso online?
21 lezioni & 39 download
Un ambiente per disegnare
12 minuti, 39 secondi
Griglia
7 minuti, 51 secondi
Rumore
6 minuti, 40 secondi
GUI
11 minuti, 12 secondi
Testo
9 minuti, 26 secondi
Bitmap
10 minuti, 34 secondi
Cosa include questo corso?
Nella prima lezione conoscerai il creative coder Bruno Imbrizi, che ti parlerà dei suoi inizi nel settore del graphic design e di come sia riuscito a combinare questa disciplina con la passione per la programmazione. Poi ti indicherà le sue piattaforme di lavoro preferite e le persone che hanno influenzato il suo lavoro.
Quindi inizierai a conoscere le basi della programmazione. Bruno ti insegnerà a preparare gli strumenti di lavoro, per poi passare in rassegna una serie di concetti di programmazione come variabili, funzioni, array e loop. Dopo aver compreso come migliorare la configurazione, inizierai a comporre una collezione di bozzetti.
Creerai un nuovo bozzetto digitale utilizzando diverse trasformazioni per il canvas, dopodiché imparerai a usare la trigonometria per distribuire le forme su di un cerchio. Scoprirai anche come ridimensionare i bozzetti e come usare le funzioni di utility per facilitare la creazione dei seguenti design. Finalizzerai poi il disegno disegnando degli archi e provando ad attribuire diversi valori ai parametri.
A questo punto passerai a disegnare un bozzetto animato sul canvas grazie agli agenti di movimento, imparando prima a tracciare delle linee tra gli agenti in base alla loro vicinanza, e poi a esportare l'animazione in formato video per condividerla online.
Quindi tornerai a lavorare alla tua griglia per renderla più flessibile ed efficiente, migliorandola grazie ai generatori di rumore. Per poter aggiornare in tempo reale i tuoi bozzetti, creerai anche un piccolo pannello di controllo.
Infine scoprirai come aggiungere un testo alle tue composizioni. Bruno ti mostrerà come disegnare, misurare e impostare le proprietà di un font, per poi spiegarti come modificare le lettere con un semplice tasto della tastiera. Concluderai il corso imparando a interpretare i valori dei colori e darai gli ultimi ritocchi al tuo lavoro.
What is this course's project?
Disegna con il codice una serie di composizioni grafiche da implementare su browser.
Progetti di allievi del corso
Who is this online course for?
Questo corso è pensato per chi si interessa di programmazione e vuole imparare a usare il codice per creare visual sorprendenti.
Requirements and materials
È consigliabile possedere capacità matematiche di base. Ti servirà un computer con Node.js, un web browser e un elaboratore di testi.
Sistemi operativi:
⦁Linux ⦁SmartOS ⦁macOS 10.7 o superiore ⦁Windows 2008 o superiore
Requisiti di sistema:
⦁4GB RAM ⦁10GB di spazio libero
Recensioni
- 16 giorni fa
Great course, I wish I’d had a stronger foundation in coding before taking it.
- un mese fa
Excellent introductory course
- 2 mesi fa
Great course!!!
- 2 mesi fa
I loved this! I learned a lot and I sincerely recommend this course.
- 4 mesi fa
Ó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.
Nei suoi oltre 10 anni di esperienza, Bruno ha lavorato per agenzie, studi di design, case di produzione e importanti brand come Dell, adidas o Universal Music. I suoi lavori sono apparsi in riviste online come Wired e Londonist, e gli sono valsi numerosi riconoscimenti, come l'Adobe Cutting Edge Award e il premio FITC per la miglior installazione digitale.
Contenuti
- U1
introduzione
- A proposito di me
- Influenze
- U2
Fondamenti
- Impostare
- Variabili e funzioni
- Array e loop
- Un ambiente per disegnare
- U3
Trasformazione schizzo
- Trasformare
- angoli
- Funzioni di utilità
- archi
- U4
Agenti di schizzo
- Oggetti e classi
- Animazione
- Linee
- Uscita video
- U5
Rumore di schizzo
- Griglia
- Rumore
- GUI
- U6
Tipo di schizzo
- Testo
- Asincrono
- Bitmap
- Glifi
- PF
Progetto finale
- Introduzione alla programmazione per visual designer
Cosa aspettarsi da un corso Domestika
Impara al tuo ritmo
Divertiti imparando comodamente da casa e senza orari. Sei tu a decidere quando seguire le lezioni.
Impara dai migliori professionisti
Impara i metodi e le tecniche più utili insieme ai migliori professionisti del settore creativo.
Conosci insegnanti di grande esperienza
Ogni insegnante ti trasmetterà le sue conoscenze con passione e spiegazioni chiare, offrendoti una prospettiva professionale in ogni lezione.
Certificates
PLUSIf you're a Plus member, get a attestato personalizzato signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Soyez aux premières loges
Con i nostri video di alta qualità, non ti perderai neanche un dettaglio. Grazie all'accesso illimitato, puoi vedere ogni lezione tutte le volte che vuoi e perfezionare le tue abilità.
Condividi conoscenze e idee
Fai domande, chiedi pareri e offri soluzioni. Condividi la tua esperienza di apprendimento con gli altri allievi della community appassionati di creatività.
Interagisci con una community creativa globale
La community di Domestika è composta da milioni di utenti di tutto il mondo: persone curiose, piene di voglia di esplorare ed esprimere la propria creatività.
Segui corsi prodotti da veri professionisti
Domestika seleziona gli insegnanti con cura e produce ogni corso internamente, per garantirti un'esperienza di apprendimento online di eccellente qualità.
Domande frequenti
Il creative coding è l’uso della programmazione per esprimersi artisticamente o visivamente. Questo corso ti insegna a usare JavaScript, HTML e Canvas per creare visual interattivi e arte generativa tramite esperimenti di coding pratici.
Il corso è pensato per utenti intermedi. È consigliata una conoscenza base di JavaScript e sviluppo web, ma i concetti chiave e gli strumenti sono spiegati passo passo per chi ha già qualche esperienza di coding.
Ti servirà un editor di codice come Sublime Text o Visual Studio Code, Node.js, npm e un browser web moderno. Il corso spiega anche come installare e configurare tutti gli strumenti necessari per i progetti di creative coding.
Imparerai a creare arte generativa, visual interattivi e prototipi usando JavaScript, Canvas e tecnologie web. Gli argomenti includono disegno di forme, trasformazioni, animazioni, esportazione grafica e l’uso di librerie come Canvas Sketch.
Il corso ti insegna a usare i metodi dell’API Canvas di JavaScript come fillRect, arc e fillStyle per disegnare e stilizzare rettangoli, cerchi e altre forme direttamente nel browser.
Sì, imparerai a esportare i tuoi schizzi generativi come immagini PNG o file video usando Canvas Sketch CLI, insieme a consigli per esportazioni di alta qualità.
Verrai guidato nell’installazione di Canvas Sketch, nell’inizializzazione dei progetti, nella gestione dinamica delle dimensioni della canvas e nell’esecuzione degli schizzi nel browser o nel terminale.