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
2. Environnement P5.js
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
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
5. Image processing Kernel Image piece convolution https://en.wikipedia.org/wiki/Kernel_(image_processing)
6. Anscombe quartet : https://kwichmann.github.io/ml_sandbox/linear_regression_diagnostics/ Quelques réalisations avec p5.js
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
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 …