Meetup 18 avril 2017 Visualisation de données Toulouse

Meetup 18 avril 2017 Visualisation de données Toulouse

Lightning talks - introduction p5.js

4fd94a50bc8f2c18fad2a07631b9d396?s=128

visualisation de données

April 19, 2017
Tweet

Transcript

  1. 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. 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
  3. 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
  4. 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
  5. 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 …