Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Meetup 18 avril 2017 Visualisation de données Toulouse

Meetup 18 avril 2017 Visualisation de données Toulouse

Lightning talks - introduction p5.js

visualisation de données

April 19, 2017
Tweet

More Decks by visualisation de données

Other Decks in Technology

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