Codage créatif : créez des éléments visuels avec JavaScript
A course by Bruno ImbriziCodeur créatif
A course by Bruno Imbrizi, Codeur créatif
Apprenez les bases de la programmation et découvrez comment développer, illustrer et animer des éléments visuels et du texte grâce au codage
Avec le codage créatif, on ne s’ennuie jamais. Il y a toujours des techniques à découvrir et à apprendre ou de nouvelles images à créer. Pour le programmeur créatif Bruno Imbrizi, c’est l’occasion de fusionner sa passion pour le motion design et les visuels avec la programmation. Il a travaillé à la fois pour de petites agences et des marques de premier plan comme Dell, Adidas et Universal Music.
Dans ce cours, Bruno partagera son expérience pour vous aider à coder des éléments visuels percutants. Explorez les bases de la programmation et apprenez à dessiner grâce au codage créatif en JavaScript.
Vous souhaitez améliorer vos compétences en codage ? Découvrez le second cours de Bruno, Codage créatif sur JS : animation, son et couleur, et apprenez des techniques avancées pour créer des éléments visuels en jouant avec la couleur, le mouvement et le son.
Qu'allez-vous apprendre dans ce cours en ligne ?
21 leçons & 39 vidéos téléchargées
Un environnement pour l'esquisse
12 minutes, 39 secondes
Grille
7 minutes, 51 secondes
Bruit
6 minutes, 40 secondes
IHM graphique
11 minutes, 12 secondes
Texte
9 minutes, 26 secondes
Bitmap
10 minutes, 34 secondes
Que comprend ce cours ?
Vous commencerez par faire la connaissance de Bruno Imbrizi qui vous parlera des débuts de sa carrière en tant que graphiste qu’il a réussi à combiner avec son intérêt pour le codage. Il présentera également les plateformes qu’il aime utiliser et pour quelles raisons ainsi que les personnes qui ont influencé son travail.
Vous passerez ensuite aux bases de la programmation : Bruno vous apprendra à configurer les outils principaux avant de vous expliquer brièvement des concepts de programmation comme les variables, les fonctions, les tableaux et les boucles. Il vous montrera aussi comment améliorer votre configuration avant de réaliser une série de croquis.
Vous créerez un nouveau croquis numérique en utilisant différentes transformations de canevas, puis vous apprendrez à utiliser la trigonométrie pour placer des formes autour d’un cercle. Vous découvrirez comment modifier la taille de vos dessins et utiliser des fonctions utilitaires pour faciliter la réalisation de vos prochaines créations. Vous terminerez votre croquis en dessinant des arcs de cercle et en jouant avec différentes valeurs pour vos paramètres.
Vous dessinerez un croquis animé avec des agents qui se déplaceront sur le canevas, puis vous tracerez des lignes entre eux en fonction de leur position avant de découvrir comment exporter votre animation sous format vidéo qui pourra être partagé en ligne.
Vous vous pencherez sur votre quadrillage afin de le rendre plus flexible et efficace, puis vous utiliserez des générateurs de bruit pour l’améliorer. Vous créerez un petit panneau de contrôle qui vous permettra de mettre à jour vos croquis en temps réel.
Enfin, vous apprendrez à ajouter du texte à vos compositions : Bruno vous montrera comment le dessiner, le mesurer et configurer les paramètres de la police avant d’expliquer comment l’actualiser d’une simple pression sur votre clavier. Vous terminerez le cours en apprenant à lire les valeurs chromatiques et en apportant les touches finales à votre croquis.
What is this course's project?
Concevoir une série de compositions créatives visuelles qui pourront être implémentées dans un navigateur web avec le codage.
Projets d'élèves du cours
Who is this online course for?
Ce cours s’adresse à toute personne intéressée par la programmation et la création d’éléments visuels avec le codage.
Requirements and materials
Des compétences de base en mathématiques sont recommandées.
Des compétences de base en mathématiques sont recommandées. Vous aurez besoin d'un ordinateur avec Node.js, ainsi que d'un accès à un navigateur Web et à un éditeur de texte.
Systèmes d'exploitation:
⦁Linux ⦁SmartOS ⦁macOS 10.7 ou supérieur ⦁Windows 2008 ou supérieur
Configuration requise:
⦁4 Go de RAM ⦁10 Go d'espace libre
Avis
- il y a 16 jours
Great course, I wish I’d had a stronger foundation in coding before taking it.
- il y a 1 mois
Excellent introductory course
- il y a 2 mois
Great course!!!
- il y a 2 mois
I loved this! I learned a lot and I sincerely recommend this course.
- il y a 4 mois
Ó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.
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
- À propos de moi
- Influences
- U2
Fondamentaux
- Installer
- Variables et fonctions
- Tableaux et boucles
- Un environnement pour l'esquisse
- U3
Transformation d'esquisse
- Transformer
- Angles
- Fonctions utilitaires
- Arcs
- U4
Agents d'esquisse
- Objets et classes
- Animation
- Lignes
- Sortie vidéo
- U5
Bruit d'esquisse
- Grille
- Bruit
- IHM graphique
- U6
Type d'esquisse
- Texte
- Asynchrone
- Bitmap
- Glyphes
- PF
Projet final
- Introduction au codage pour les concepteurs visuels
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.
Certificates
PLUSIf you're a Plus member, get a certificat personnalisé signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
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
Le creative coding consiste à utiliser la programmation pour s’exprimer artistiquement ou visuellement. Ce cours vous apprend à utiliser JavaScript, HTML et Canvas pour créer des visuels interactifs et de l’art génératif grâce à des expériences de codage pratiques.
Ce cours s’adresse aux utilisateurs intermédiaires. Une connaissance de base de JavaScript et du développement web est recommandée, mais les concepts clés et outils sont expliqués pas à pas pour ceux qui ont déjà un peu de pratique en codage.
Vous aurez besoin d’un éditeur de code comme Sublime Text ou Visual Studio Code, Node.js, npm et un navigateur web moderne. Le cours explique aussi comment installer et configurer tous les outils nécessaires aux projets de creative coding.
Vous apprendrez à créer de l’art génératif, des visuels interactifs et des prototypes avec JavaScript, Canvas et les technologies web. Les sujets incluent le dessin de formes, les transformations, l’animation, l’export d’images et l’utilisation de bibliothèques comme Canvas Sketch.
Le cours vous enseigne à utiliser les méthodes de l’API Canvas JavaScript comme fillRect, arc et fillStyle pour dessiner et styliser rectangles, cercles et autres formes directement dans le navigateur.
Oui, vous apprendrez à exporter vos créations génératives en images PNG ou fichiers vidéo grâce à Canvas Sketch CLI, avec des conseils pour des exports de haute qualité.
Vous serez guidé pour installer Canvas Sketch, initialiser vos projets, gérer des dimensions de canvas dynamiques et lancer vos sketches dans le navigateur ou le terminal.