Meetup 18 avril 2017 Visualisation de données Toulouse

Lightning talks - introduction p5.js

Transcript

1. La datavisualization avec p5.js
   CREATIVE CODING (Art to Data visualization)
   En 2001 Projet processing (MIT)
   Benjamin Fry - Casey Reas (deux artistes américains)
   Bibliothèque « JAVA »
   Applet pour tourner sur navigateur
   En 2008 Processing.js (interpréteur Javascript)
   John Resig
   En 2013 processing -> nouveau projet p5.js
   Lauren Mac Carthy
   JavaScript pour visualiser le résultat d’un programme dans le navigateur (web)
   librairies de fonctions
   Historique
   Alain Ottenheimer Avril 2017
   

   View Slide

2. Environnement P5.js
   

   View Slide

3. P5.js .org : Complete Library p5.js, p5.dom.js & p5.sound.js..
   Appels gérés par la lib
   • setup() au chargement de la page
   • draw() en boucle 60FPS
   P5.js par l’exemple avec un navigateur + éditeur de texte
   • Basic1 créer des formes
   • Basic2 animer des formes
   • Basic3 charger et déplacer une image
   • Basic3d créer une box avec une image en texture
   • Basic4 modifier les pixels du canvas
   • Basic5 modifier une image
   • Basic6 image processing
   • Basic7 créer un bar chart
   P5.js
   

   View Slide

4. Image / Pixels
   loadPixels();
   for (var y = 0; y < height; y++) {
   for (var x = 0; x < width; x++) {
   var index = (x + y * width)*4;
   r = pixels[index+0] ;
   b = pixels[index+1] ;
   g = pixels[index+2] ;
   alpha = pixels[index+3] ;
   …..
   }
   }
   transparence
   

   View Slide

5. Image processing
   Kernel Image piece
   convolution
   https://en.wikipedia.org/wiki/Kernel_(image_processing)
   

   View Slide

6. Anscombe quartet : https://kwichmann.github.io/ml_sandbox/linear_regression_diagnostics/
   Quelques réalisations avec p5.js
   

   View Slide

7. Autres réalisations : http://jagracar.com/sketches/thousandWords.php
   Une sélection de liens et ressources WebDesign, DataViz et Design Génératif : http://www.gildasp.fr/liens/
   https://p5js.org/examples/
   Tuto : https://www.youtube.com/user/shiffman
   Livre : Getting Started with p5.js By Lauren McCarthy, Casey Reas, Ben Fry
   Quelques réalisations avec p5.js
   

   View Slide

8. P5.js versus d3.js
   p5/D3 Cookbook Combining the power of D3.js with the simplicity of p5.js : http://sciutoalex.github.io/p5-D3-
   cookbook/
   D3/p5 canvas circle : http://bl.ocks.org/eesur/7b345becbd2d47e74a03
   Processing puis p5.js avaient pour but de rendre accessible le codage aux artistes
   P5.js et d3.js : ce sont deux approches différentes d’outils graphiques.
   P5.js est plus accessible !
   P5.js est performant pour le traitement de l’image, la 3D, le son …
   

   View Slide