Logo de Ladies Learning CodeBienvenue!

À télécharger
et à installer

  1. Fichiers d'apprentissage (dossier zip, disponible en français) : http://bit.ly/llc-processingjs-fr
    • extrayez le dossier (Extraire tout sur Windows)
    • ouvrez diapositives.html dans le navigateur pour voir les diapositives
  2. Éditeur Atom : http://atom.io
  3. Navigateur Chrome : https://www.google.ca/chrome

Introduction à
ProcessingJS

Visualisation sous forme de dessin à la main de toutes les portes traversées par quelqu'un en une semaine :

Visualisation sous forme de vecteur de la densité de population sur Terre :

Visualisation en direct du mouvement des vélos en libre-service de la ville de New York :

La fonction « draw »

Comme nous l'avons vu plus tôt, « draw() » est une méthode qui ajoute des éléments au canevas dans Processing. Elle dessine (« draw ») sur le canevas.

Toutefois, la méthode « draw() » n'est pas statique : elle se répète constamment. « draw() » est comme une boucle qui tourne 60 fois par seconde, c'est-à-dire, une fois toutes les 160 millisecondes.

Il est donc possible de changer les règles du dessin de la visualisation. Nous nous amuserons avec ces règles un peu plus tard aujourd'hui.

#Un premier dessin Notre fonction « draw() » étant bien en place, nous pouvons commencer à ajouter des commandes pour dessiner sur le canevas. Ajoutons la méthode « rect() » directement sous le commentaire. ``` function sketchProc(processing) { processing.setup = function() { //Le code des fonctions de base va ici. processing.size(700,500); } processing.draw = function() { //Le code de l'élément à dessiner va ici. processing.rect(10,20,130,260); }; } var canevas = document.getElementById("monProjetProcessing"); //Associe la fonction sketchProc au canevas var processingInstance = new Processing(canevas, sketchProc); ```

Ressources supplémentaires

Voici quelques ressources supplémentaires qui vous seront utiles si vous souhaitez continuer à travailler avec ProcessingJS.

Ressources pour la visualisation de données

La visualisation de données est une tâche complexe qui exige, avant tout, beaucoup de créativité. Il n'y a que le code qui soit technique. Voici quelques ressources pratiques pour exploiter le côté droit (créatif) de votre cerveau. (Ressources en anglais seulement)

Merci!

Introduction à ProcessingJS

Diapositives créées par William Wolfe-Wylie à partir de Lea Verou's SlideShow et de reveal.js.