Coding creativo: realizza visual con JavaScript

Introduzione alla programmazione per visual designer

“Ciao e benvenuto alla fine di questo corso Domestika. In questa lezione finale faremo un riepilogo di ciò che abbiamo visto finora e aggiungerò alcuni suggerimenti per aiutarti nel tuo viaggio nella codifica creativa. Il codice è una lingua. Per usare una metafora con il linguaggio parlato, quando vogliamo esprimere qualcosa, non si tratta di quante parole usiamo, ma di come scegliamo di mettere insieme le parole che conosciamo. Abbiamo fatto molta strada. Siamo partiti da un file vuoto, da concetti fondamentali come variabili e funzioni. Ho detto che li avremmo usati ovunque e lo abbiamo fatto. Il modo migliore per imparare è sempre con l'esempio e ne abbiamo visti parecchi. Abbiamo anche visto array, loop, condizionali e numeri casuali. E abbiamo visto quanto potevamo fare solo con quei pochi concetti. L'ambiente che abbiamo scelto per eseguire il nostro codice era il browser, che è molto accessibile e familiare. Ora sappiamo che possiamo usarlo anche per creare immagini. Abbiamo visto come creare una pagina HTML e scriverci JavaScript. Poi abbiamo visto una configurazione più elaborata usando lo schizzo su tela. Ci ha fornito un ambiente con alcuni vantaggi rispetto a partire da zero, come semplificare la modifica delle dimensioni del nostro schizzo e anche ricaricarlo automaticamente non appena il codice è stato salvato. C'è molto di più sullo schizzo su tela di quello che abbiamo visto nel corso, quindi ti consiglio di dare un'occhiata alla documentazione su Github. Ci sono alcune informazioni sulla preparazione del tuo schizzo per la stampa in grandi formati, su come esportare le GIF e anche su come preparare la grafica per i plotter a penna. Il primo schizzo che abbiamo fatto insieme era una semplice griglia. Avevamo 5 righe e 5 colonne. Se hai provato a cambiare quel numero, ben fatto per la sperimentazione. Potresti aver realizzato che la griglia non sarebbe più centrata, perché stavamo usando valori hard-coded. In seguito abbiamo visto un modo più flessibile di fare le cose. Quindi sentiti libero di tornare allo schizzo 01 e migliorarlo con quello che sai ora, è un buon esercizio.

Nel nostro secondo schizzo abbiamo usato un po' di trigonometria. Vorrei che il mio insegnante di matematica mi avesse mostrato come fare cose creative con la trigonometria quando ero a scuola. Questa è un'altra cosa interessante della codifica creativa, la semplice matematica fa molto. Potresti scoprire che alcuni concetti matematici finalmente scattano, è sicuramente successo a me. Nel nostro terzo schizzo abbiamo visto più matematica con Pitagora e abbiamo anche imparato ad animarlo. Il browser ridipinge sempre la tela, quindi tutto ciò che dobbiamo fare è cambiare i valori nel tempo. Ancora una volta ti consiglierei di dare un'occhiata alla documentazione dello schizzo su tela e vedere come potresti creare un ciclo animato, assicurandoti che i tuoi valori cambino e alla fine tornino al loro punto originale. Nel nostro quarto schizzo ti ho mostrato come normalizzare un valore, ovvero cambiare il suo intervallo originale in un numero compreso tra 0 e 1. Questo è molto utile e visto in tutte le aree della programmazione. Se un giorno hai bisogno, diciamo di convertire un colore in un angolo o i decibel di un campione audio nell'altezza di un terreno, sai che puoi farlo se normalizzi i valori. Per lo schizzo finale, volevo mostrarti come usare la tipografia in modo creativo, ma forse la cosa più interessante che abbiamo imparato lì è stata come leggere i valori del colore dai pixel nella nostra tela. Abbiamo usato una lettera grande, ma nulla ci avrebbe impedito di usare qualsiasi altra immagine. Un'emoji, un'icona, un logo, sono tutti pixel e l'effetto funzionerebbe altrettanto bene. Mi piacerebbe davvero vedere le tue immagini. Non aver paura di sperimentare tutto. Ti ho dato alcuni suggerimenti, ma si tratta davvero di esplorare. Se impostiamo un valore su 5, prova 500. Prova a ruotare le cose lateralmente, prova a ridimensionare le cose verso l'alto o verso il basso, prova i cerchi invece dei quadrati oi cerchi sopra i quadrati. E forse, cosa più importante, prova a mescolare le cose, usa qualcosa dallo schizzo 02 sullo schizzo 05 o viceversa. Condividi i tuoi schizzi nel forum facendo clic sul pulsante "Crea il tuo progetto" in alto. In questo modo impareremo tutti gli uni dagli altri. Sarò lì per rispondere alle domande e dare alcune indicazioni. È stato bello condividere le mie intuizioni e la mia passione con te. Grazie e arrivederci. ”

Trascrizione parziale del video

“Progetto finale In quest'ultima lezione, ricapitoliamo quanto visto finora e aggiungo dei consigli per aiutarti con il tuo coding creativo. Il codice è un linguaggio. Per usare una metafora, non si tratta del numero di parole che usiamo, ma di come ordiniamo le parole che conosciamo. Abbiamo fatto molta strada. Siamo partiti da un file vuoto, dai concetti fondamentali come le variabili e le funzioni. Avevo detto che le avremmo usate ovunque e così è stato. Il modo migliore per imparare è facendo degli esempi. Abbiamo visto anche gli array, i loop, le condizionali, i numeri casuali, e tutto ...”

Questa trascrizione è stata generata con sistemi automatici, quindi può contenere errori.

Riepilogo del corso: Coding creativo: realizza visual con JavaScript

• Livello: Principiante
• 97% valutazioni positive (1177)
• 55889 allievi
• 6 unità didattiche
• 21 lezioni (2h 42m)
• 5 download

• Categoria

  3D e Animazione, Web & App Design

• Aree

  JavaScript, Motion graphics, Multimedia, Programmazione