Codage créatif : créez des éléments visuels avec JavaScript

Introduction au codage pour les concepteurs visuels

“Bonjour et bienvenue à la fin de ce cours Domestika. Dans cette dernière leçon, nous ferons un récapitulatif de ce que nous avons vu jusqu'à présent et j'ajouterai quelques conseils pour vous aider dans votre cheminement vers le codage créatif. Le code est un langage. Pour utiliser une métaphore avec le langage parlé, lorsque nous voulons exprimer quelque chose, il ne s'agit pas du nombre de mots que nous utilisons, mais de la façon dont nous choisissons de rassembler les mots que nous connaissons. Nous avons parcouru un long chemin. Nous sommes partis d'un fichier vide, de concepts fondamentaux comme les variables et les fonctions. J'ai mentionné que nous allions les utiliser partout et nous l'avons fait. La meilleure façon d'apprendre est toujours par l'exemple et nous en avons vu pas mal. Nous avons également vu des tableaux, des boucles, des conditions et des nombres aléatoires. Et nous avons vu tout ce que nous pouvions faire avec ces quelques concepts. L'environnement que nous avons choisi pour exécuter notre code était le navigateur, qui est très accessible et familier. Nous savons maintenant que nous pouvons également l'utiliser pour créer des visuels. Nous avons vu comment créer une page HTML et y écrire du JavaScript. Ensuite, nous avons vu une configuration plus élaborée utilisant canvas-sketch. Cela nous a donné un environnement avec certains avantages par rapport à partir de zéro, comme faciliter la modification des dimensions de notre croquis et le recharger automatiquement dès que le code a été enregistré. Il y a plus de canvas-sketch que ce que nous avons vu dans le cours, je vous recommande donc de jeter un œil à la documentation sur Github. Il y a quelques informations sur la préparation de votre croquis pour l'impression en grand format, sur la façon d'exporter des GIF et également sur la façon de préparer l'illustration pour les traceurs à plume. Le premier croquis que nous avons fait ensemble était une simple grille. Nous avions 5 lignes et 5 colonnes. Si vous avez essayé de changer ce nombre, bravo pour l'expérimentation. Vous vous êtes peut-être rendu compte que la grille ne serait plus centrée, car nous utilisions des valeurs codées en dur. Plus tard, nous avons vu une façon plus flexible de faire les choses. Alors n'hésitez pas à revenir au croquis 01 et à l'améliorer avec ce que vous savez maintenant, c'est un bon exercice.

Dans notre deuxième croquis, nous avons utilisé un peu de trigonométrie. J'aurais aimé que mon professeur de mathématiques m'ait montré comment faire des choses créatives avec la trigonométrie quand j'étais à l'école. C'est une autre chose intéressante à propos du codage créatif, les mathématiques simples vont un long chemin. Vous constaterez peut-être que certains concepts mathématiques s'enclenchent enfin, cela m'est certainement arrivé. Dans notre troisième sketch, nous avons vu plus de mathématiques avec Pythagore et nous avons également appris à l'animer. Le navigateur repeint toujours le canevas, donc tout ce que nous avons à faire est de changer les valeurs au fil du temps. Encore une fois, je vous recommande de jeter un œil à la documentation de canvas-sketch et de voir comment vous pouvez créer une boucle animée, en vous assurant que vos valeurs changent et reviennent éventuellement à leur point d'origine. Dans notre quatrième sketch, je vous ai montré comment normaliser une valeur, c'est-à-dire changer sa plage d'origine en un nombre compris entre 0 et 1. C'est très utile et visible dans tous les domaines de la programmation. Si un jour vous avez besoin, disons convertir une couleur en un angle ou les décibels d'un échantillon audio en hauteur d'un terrain, vous savez que vous pouvez le faire si vous normalisez les valeurs. Pour le croquis final, je voulais vous montrer comment utiliser la typographie de manière créative, mais la chose la plus intéressante que nous ayons apprise était peut-être comment lire les valeurs de couleur des pixels de notre toile. Nous avons utilisé une grosse lettre, mais rien ne nous empêcherait d'utiliser une autre image. Un emoji, une icône, un logo, ce sont tous des pixels et l'effet fonctionnerait tout aussi bien. J'aimerais vraiment voir vos visuels. N'ayez pas peur de tout expérimenter. Je vous ai donné quelques conseils, mais il s'agit vraiment d'explorer. Si nous définissons une valeur à 5, essayez 500. Essayez de faire pivoter les choses sur le côté, essayez de les mettre à l'échelle vers le haut ou vers le bas, essayez des cercles au lieu de carrés, ou des cercles au-dessus des carrés. Et peut-être plus important encore, essayez de mélanger les choses, utilisez quelque chose du croquis 02 sur le croquis 05 ou vice-versa. Partagez vos croquis dans le forum en cliquant sur le bouton "Créez votre projet" ci-dessus. De cette façon, nous apprendrons tous les uns des autres. Je serai là pour répondre aux questions et donner quelques conseils. Cela a été formidable de partager mes idées et ma passion avec vous. Merci et au revoir. ”

Transcription partielle de la vidéo

“Le projet final Dans cette leçon, récapitulons ce que nous avons vu, avec des conseils pour vous aider dans le code créatif. Le code est un langage. Pour utiliser une métaphore de langage, ce n’est pas le nombre de mots, mais l’assemblage de ceux qu’on connait qui compte. Nous avons bien avancé, en partant d’un fichier vide, avec des concepts fondamentaux, les variables et fonctions. Nous les avons utilisés en permanence. Le meilleur apprentissage est l’exemple, nous en avons vu beaucoup. Nous avons vu les listes, boucles, conditionnelles et aléatoires, et tout ce que nous pouvons en faire....”

Cette transcription a été générée automatiquement et peut contenir des erreurs.

Sommaire du cours : Codage créatif : créez des éléments visuels avec JavaScript

• Niveau : Débutant
• 97% avis positifs (1177)
• 55872 élèves
• 6 unités
• 21 leçons (2 h 42 min)
• 5 vidéos téléchargées

• Catégorie

  3D & Animation, Création de sites et d'applications

• Domaines

  JavaScript, Motion design, Multimédia, Programmation