Codage créatif sur JS : animation, son et couleur
Un cours proposé par Bruno ImbriziCodeur créatif
Un cours proposé par Bruno Imbrizi, Codeur créatif
Découvrez des techniques de codage créatif et créez sur JavaScript des visuels combinant couleur, son et mouvement
Le codage est un processus semblable à la résolution d’une énigme : un cycle constant d’apprentissage, d’erreurs et d’itérations pouvant mener à la création de quelque chose de beau. Bruno Imbrizi est un graphiste primé ayant consacré les 10 dernières années de sa carrière à maîtriser l’art du codage créatif.
Il utilise JavaScript pour produire des animations, des tirages imprimés, des pièces interactives, et bien d’autres éléments, qui l’ont mené à collaborer avec des marques telles que Google, Spotify et Nike, et remporter des prix, notamment le Prix Adobe Cutting Edge et celui de la meilleure installation numérique de FITC.
C'est le second cours de Bruno sur Domestika. Le premier, Codage créatif : créez des éléments visuels avec JavaScript, vous apprendra de A à Z les fondamentaux de la programmation et du dessin grâce au codage.
À quoi s’attendre en suivant ce cours ?
« Dans ce cours, je vous présenterai plusieurs techniques pour créer des visuels passionnants sur JavaScript. »
Apprenez à coder une visualisation immersive en jouant avec le son
Développer des compositions de codage riches en couleur
Animer vos visuels et incorporer des interactions du curseur
Qu'allez-vous apprendre dans ce cours en ligne ?
28 leçons & 20 vidéos téléchargées
La configuration en ligne
5 minutes, 4 secondes
Distribution
4 minutes, 51 secondes
Ajouter des couleurs
8 minutes, 50 secondes
Masque d'écrêtage
6 minutes, 29 secondes
Données d'image
8 minutes, 53 secondes
Que comprend ce cours ?
Vous commencerez le cours en passant en revue les outils fondamentaux de JavaScript. Puis vous configurerez un environnement pour exécuter le code et créer vos croquis.
Ensuite, vous apprendrez à dessiner des formes de base entièrement grâce au codage, à ajouter de la couleur et à étirer ou incliner vos visuels.
Dans l’unité suivante, vous créerez des courbes pour différentes itérations, des éléments de graphisme et des graphiques, en ajoutant plusieurs points le long d’un segment, en les animant et en apprenant à faire interagir un curseur avec des images.
Par la suite, vous produirez une visualisation audio en lisant des fichiers audio et leurs données et en utilisant des fréquences pour créer une animation.
Pour terminer le cours, vous expérimenterez avec des particules et apprendrez à dicter leur comportement en jouant avec différentes forces et perturbations, ainsi qu’en modifiant leur taille et leur couleur.
Quel est le projet du cours ?
Pour le projet final, vous développerez une série de compositions de codage jouant avec la couleur et le son qui s’exécuteront sur un navigateur web.
Projets d'élèves du cours
À qui s'adresse ce cours en ligne ?
Ce cours s’adresse à toute personne souhaitant approfondir ses connaissances en codage pour créer des compositions animées uniques.
Prérequis et matériel nécessaire
Des connaissances préalables en codage sont requises pour suivre ce cours.
Pour le matériel, vous aurez besoin d’une tablette ou d’un ordinateur avec JavaScript.
Avis
- il y a 4 mois
Polecam, fajna zabawa
- il y a 8 mois
Excelente! Buena fuente de inspiración para creativos incursionando en programación
- il y a 9 mois
I will recommend this to my friend who likes to know more on javascript designing
- il y a 10 mois
Recomendado para principiantes que quiera incorporar su lado artístico a la codificación.
- chillwill47PLUSil y a 1 an
Just getting started into creative coding and this course is definitely a great point to begin at.
Il a travaillé avec des agences, des studios de graphisme, des sociétés de production et des marques de premier plan comme Dell, Adidas et Universal Music au cours de ses plus de dix ans de carrière. Il est apparu dans des publications en ligne telles que les revues WIRED et Londonist, et il a remporté de nombreuses récompenses dont le Prix Adobe Cutting Edge et le Prix FITC de la meilleure installation numérique.
Contenu
- U1
Introduction
- Présentation
- Mes sources d'inspiration
- U2
La mise en place
- Récapitulatif JavaScript
- La configuration en ligne
- La configuration hors ligne
- Toile-Croquis
- U3
Inclinaison
- Dessiner un rectangle
- Dessiner un rectangle incliné
- Distribution
- Ajouter des couleurs
- Masque d'écrêtage
- Définition d'une graine aléatoire
- U4
Courbes
- Dessiner une courbe quadratique
- Interaction du curseur
- Points multiples
- Création d'une grille
- segments
- Animation
- U5
Le son
- Appuyer sur Lecture
- Analyseur
- Fréquences
- Arcs
- Création d'une affiche
- U6
Particules
- Dessiner une seule particule
- Appliquer des forces
- Distribuer les particules
- Modification de l'échelle et des couleurs
- Données d'image
- PF
Projet final
- * Codage créatif sur JS : animation, son et couleur
Ce qu’il faut attendre d’un cours Domestika
Apprenez à votre rythme
Apprenez chez vous, sans horaires fixes et à votre rythme. C’est vous qui décidez de votre programme d’apprentissage.
Apprenez auprès de grands noms du secteur créatif
Apprenez les techniques et les méthodes les plus utiles auprès des meilleurs professionnels du secteur créatif.
Rencontrez des spécialistes reconnus
Dans chaque leçon, votre professeur vous transmettra ses connaissances avec enthousiasme, vous donnera des explications claires et vous fera bénéficier de son expertise.
Certificats
PLUSEn tant que membre Plus, vous recevrez pour chaque cours un certificat personnalisé signé par votre professeur. Partagez-le dans votre portfolio, sur les réseaux sociaux ou partout où vous le souhaitez.
Soyez aux premières loges
Profitez de vidéos de haute qualité pour ne manquer aucun détail. Grâce à un accès illimité, vous pourrez les regarder autant de fois que nécessaire pour perfectionner vos compétences.
Partagez vos connaissances et vos idées
Posez des questions, demandez des avis ou suggérez des solutions. Partagez votre expérience d’apprentissage avec les autres élèves de la communauté qui ont, comme vous, une passion pour la créativité.
Rejoignez une communauté créative internationale
Cette communauté réunit plus de huit millions de personnes des quatre coins du monde, curieuses et passionnées, avec cette même envie de développer et d’exprimer leur créativité.
Assistez à des cours de haute qualité
Domestika sélectionne les professeurs avec soin et produit chaque cours en interne afin de garantir une expérience d’apprentissage en ligne de qualité optimale.
Foire aux questions
Ce cours est conçu pour les apprenants intermédiaires. Une connaissance de base de JavaScript et des concepts de programmation est recommandée avant de s'inscrire pour profiter pleinement des leçons.
Vous aurez besoin d'un navigateur web récent, ainsi que d'outils comme StackBlitz, CodeSandbox, Node.js, npm et un éditeur de code comme Sublime Text. Aucun matériel spécialisé n'est nécessaire.
Vous apprendrez les concepts fondamentaux du codage créatif, comment utiliser JavaScript et les API Canvas pour des visuels interactifs, les techniques d'art génératif, la configuration de projets, l'exportation d'œuvres et l'intégration audio pour la visualisation.
Le cours se concentre principalement sur le codage créatif 2D avec JavaScript et les API Canvas, mais introduit aussi des notions de visualisation 3D et des frameworks comme Processing et OpenFrameworks.
Oui, le cours inclut des instructions détaillées pour configurer et utiliser StackBlitz et CodeSandbox pour coder directement dans le navigateur, facilitant ainsi le démarrage sans installation locale.
Vous apprendrez à exporter vos œuvres génératives créées dans le navigateur au format PNG haute résolution, prêtes à être imprimées ou partagées en ligne.
Oui, le cours couvre la création de visuels interactifs et de croquis animés avec JavaScript, l'API Canvas et Canvas Sketch, incluant la gestion des images par trame et les interactions utilisateur.