--- title: Javascript Creative Coding tags: post, design, javascript robots: noindex, nofollow author: Julien Noyer --- # Javascript Creative Coding *Manipuler la machine pour generer des interfaces créatives* ![](https://i.imgur.com/yV6AfnJ.png) > &copy; [Julien Noyer](https://www.linkedin.com/in/julien-n-21219b28/) - All rights reserved for educational purposes only --- ## Enseigner pour mieux apprendre Quand j'ai vue le numéro de Karim s'afficher sur mon téléphone en septembre dernier, j'ai souri à l'idée d'avoir de ses nouvelles. Nous avons travaillons dans une école il y à quelques années, sans donner de cours en commun mais en partageant beaucoup de points de vue sur la manière de former aux métier des Internets. Alors quand il m'à annoncer qu'il avait prit la responsabilité d'un cursus dans une autre école et qu'il avait besoin de moi pour y intervenir, j'ai sauté sur l'occasion de travailler avec lui ! Notre conversation a été assez longue, nous ne nous étions pas parlé depuis longtemps, et la proposition qu'il m'a fait a tout de suite exité mon envie de me lancer dans mes recherches pour monter le programme des quelques jours de formation qu'il me proposait. Ceux qui me connaissent, dont Karim, savent que mon parcours est principalement nouri par mon gout pour la création. Je suis bien loin de me considérer comme un artiste, mais j'ai toujours voulu faire quelque chose de mes mains pour faire sortir ce qu'il y a dans mon cerveaux. J'allai donc pouvoir retourner à mes permières amours, pour appronfondir les connaissances que j'ai d'un milieu qui me passionne depuis toujours : la création assitée par ordinateur. --- <br><br><br> # Intelligence vraiment artificielle *Peu importe le résultat, c'est le moyen d'y parvenir qui compte* ![](https://i.imgur.com/rpverU4.png) <br> L’époque actuelle est pleine d’enthousiasmes autour des avancés en robotique et en intelligence artificielle, les médias, le cinéma ou l’éducation nationale, tout le monde semble prendre le sujet pour lui et y va de son analyse, de son appréciation sur la sur-puissance supposée des machines. Dans la mesure où les recherches scientifiques sont théorisées depuis bien longtemps les possibilités de la machine, le monde des chercheurs y voit des nouvelles opportunités dans leur recherche mais n’ont toujours pas pour ambition de dépasser le cerveau humain. Pour Yann Lecun par exemple qui est l’un des inventeurs du principe d’apprentissage profond, l’intelligence ne peut-être artificielle. En revanche, les techniques misent en place pour prédire des résultats, classifier des réponses ou générer des données sont une aubaine pour nourir des créations, et lorsqu'elles sont manipuler en Javascript elles deviennet accessibles à un très grand nombre. Je commence donc tout naturellement mon programme par la présentation de deux bibliothèque Javascript pour initier aux pratiques de gestion de l'information en Javascript. <br> ## D3js : traiter et convertire des données ![](https://i.imgur.com/8n70FvM.png) La bibliothèque D3js est principalement utiliser pour faire de la Data visualisation mais il contient également des outils très intéressants qui permettent de traiter et de convertir des données dans différents formats. Dans le cadre de ce document nous allons utiliser D3js pour convertir des données du format CSV au format JSON afin de préparer la suite des exercices à réaliser lors des futures séquences. > En savoir plus https://hackmd.io/@teach-supports/d3js-support <br> ## Brainjs : entraîner et manipuler un réseau de neurones ![](https://i.imgur.com/4m5gvPE.png) Brain.js est une librairie à la fois FrontEnd et Backend permettant de créer des réseaux de neurones, de les entraîner et de les utiliser dans le but de réaliser des prédictions. L’intérêt de cette librairie est qu’elle est particulièrement simple à manipuler et qu’elle permet d’appréhender les différentes notions concernant les réseaux de neurones. > En savoir plus https://hackmd.io/@teach-supports/brainjs-support --- <br><br><br> # S'il te plait, dessine moi un canevas *Avant de commencer à créer il faut choisir le bon support pour sa création* ![](https://i.imgur.com/hq7Vdq4.png) <br> Avec l'évolution des navigateurs Web et l'arriver de nouveaux standards pour la création d'éléments visuelles, il est primordiale de définir ceux qui sont les plus pertinents pour réaliser un design. Si l'utilisation du format [Scalable Vector Graphics (.svg)](https://fr.wikipedia.org/wiki/Scalable_Vector_Graphics) à apporter l'avantage indéniable de pouvoir utiliser un [format d'image vectorielle (eq. Illustrator)](https://www.futura-sciences.com/tech/definitions/informatique-image-vectorielle-13099/) sur une page Web tout en pouvant manipuler chacun des vecteurs en CSS et en Javascript, il n'en reste pas moins un format qui peut surcharger le [Document Object Model (DOM)](https://fr.wikipedia.org/wiki/Document_Object_Model) dans le cadre de visuels complèxes. L'élément [canvas](https://fr.wikipedia.org/wiki/Canvas_(HTML)) est un composant du langage Web HTML qui permet d'effectuer des rendus dynamiques d'images bitmap en utilisant des javascripts. L'un des avantages à utiliser les canvas est que le visuel est rendu dans un seul et unique élément HTML, ce qui limite énormément l'impact que pourrait avoir l'exécution du code dans le chargement de la page Web. Mais cet avantage n'arrive pas seul, il est aussi important de noter que la manipulation des graphiques dans un canvas est plus compliquée que dans un visuel SVG car tout le visuel doit être réalisé en Javascript. <br> ## Dessiner sur un canvas HTML ![](https://i.imgur.com/igbQwW1.png) Il serait bien prétencieux de ma part de me lancer dans un tutoriel sur l'utilisation des canvas qui dépasserait le niveau de celui de MDN. Cette plateforme m'accompagne depuis de nombreuses années et je continu à l'utiliser à titre personnel ou dans le cadre des formations que je donne. C'est donc tout naturellement que je me base sur leurs tutoriels lorsque j'élabore des nouveaux programme, comme une ressource à laquelle se référencer. > En savoir plus https://developer.mozilla.org/fr/docs/Web/API/Canvas_API/Tutorial <br> ## P5.js : la librairie Javascript pour "Creative Coders" ![](https://i.imgur.com/KGKkrGK.png) [P5.js](https://p5js.org) est une librairie qui à pour ambition de rendre accessible et plus lisible la génération de visuels sur une canvas HTML. Nullement réservée à des profils expert, l'objectif de P5.js est de permettre à des designers de débuter dans la création graphique assitée par ordinateur. Très inspirée par le [langage Processing](https://fr.wikipedia.org/wiki/Processing), P5.js est un outil idéal car il permet en plus de la création graphique, d'apprendre des principes qui sont ensuite transposables dans d'autres pratiques. > En savoir plus https://p5js.org <br> ## ML5.js : utiliser des modèles prédictifs ![](https://i.imgur.com/mVofsbk.png) Alors que Brain.js permet de créer des réseaux de neurones, [ML5.js](https://ml5js.org) est une librairie qui se base sur les modèles de [Tensorflow.js](https://www.tensorflow.org/js?hl=fr) pour permettre de faire des prédiction basées sur les résutats des-dits modèles. Il est également possible de créer des réseaux de neurones avec [ML5.js](https://ml5js.org), mais ça s'avérer être d'une très grande utilités lorsqu'il s'agit de capter des mouvement ou d'analyser des images et des sons. > En savoir plus https://ml5js.org --- <br><br><br> ## Ressources ![](https://i.imgur.com/eAySYs0.png) > Index des liens vers les sujets traités dans ce document : - [**P5.js** JavaScript library for creative coding](https://p5js.org) - [**ML5.js**](https://ml5js.org) - [**MDN** Introduction to canvas](https://developer.mozilla.org/fr/docs/Web/API/Canvas_API/Tutorial) - [**Wikipedia** Scalable Vector Graphics (.svg)](https://fr.wikipedia.org/wiki/Scalable_Vector_Graphics) - [**Futura Science** Image vectorielle](https://www.futura-sciences.com/tech/definitions/informatique-image-vectorielle-13099/) - [**Wikipedia** Document Object Model (DOM)](https://fr.wikipedia.org/wiki/Document_Object_Model) - [**Wikipedia** HTML Canvas](https://fr.wikipedia.org/wiki/Canvas_(HTML)) - [**Wikipedia** Langage Processing](https://fr.wikipedia.org/wiki/Processing)