Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Creative coding with d3.js

962 vues

Publié le

Presentation for the d3.js meetup in Paris
Creative coding in the browser with javascript and d3.js
Getting inspired.

Publié dans : Logiciels
  • Soyez le premier à commenter

Creative coding with d3.js

  1. 1. CREATIVE CODING WITH D3.JS PARIS D3.JS
  2. 2. CREATIVE CODING WITH D3.JS WHAT WILL YOU LEARN? ▸ What is generative art and creative code? ▸ d3 is not just for dataviz! ▸ The story of a side project ▸ The analog digital art of a Czech artist ▸ Creating and selling a digital product in a week ▸ Live demo of creative environment with d3
  3. 3. CREATIVE CODING WITH D3.JS FABIAN DUBOIS ▸ Former Orange Labs Tokyo and Locarise ▸ Data Visualisation and Web App consultant ▸ Based in Tokyo, sometime Paris, Berlin, Valencia ▸ Author of ‘Drawing LIKE VLADISLAV MIRVALD WITH D3.js’ ▸ twitter: @fabian_dubois ▸ blog: www.datamaplab.com
  4. 4. GENERATIVE ART AND CREATIVE CODING GENERATIVE ART ▸ Art created by an ‘autonomous’ process. ▸ the artists defines the process, the process generates the output. ▸ Often algorithmic ▸ Can be data driven ▸ See also: Generative design (parametric architecture…) ▸ Some Fugue of Bach considered as generative @AndruSenn
  5. 5. GENERATIVE ART AND CREATIVE CODING CREATIVE CODING ▸ Use of code to generate art ▸ Roots in Demoscene ▸ Use in VJing, art installations… ▸ Popular tool: Processing (and now p5.js) ▸ Also GIF Loop coder ▸ See also: glitch art @IamCraigPickard
  6. 6. D3 IS NOT JUST FOR DATAVIZ
  7. 7. D3 IS NOT JUST FOR DATAVIZ ONE ANIMATED PIECE A DAY ▸ Created by John Firebaugh (2015) ▸ All made with d3.js ▸ Most of them around 40 lines of code ▸ http://jfire.io/animations/
  8. 8. D3 IS NOT JUST FOR DATAVIZ T.D3FC.IO ▸ Tweet-sized d3 animations ▸ write https://t.d3fc.io and it will be rendered in GIF on the website ▸ use special helpers to reduce code size. ▸ must fits under 116 characters!
  9. 9. D3 IS NOT JUST FOR DATAVIZ STAINED GLASS ▸ d3 project by David Nowinsky ▸ Image filtering using d3.geom.voronoi() ▸ http://david.nowinsky.net/stained- glass/
  10. 10. D3 IS NOT JUST FOR DATAVIZ PARTY MODE ▸ Play music from soundcloud and get a sound visualisation ▸ Visuals made with d3 ▸ Web audio API ▸ http://preziotte.com/partymode/
  11. 11. D3 IS NOT JUST FOR DATAVIZ MAKING MUSIC WITH D3 ▸ Adam Pearce ▸ Visual sequencer ▸ http://roadtolarissa.com/synth/
  12. 12. STORY OF A SIDE PROJECT
  13. 13. MIRVALD’S ANALOG DIGITAL ART
  14. 14. THE STORY OF A SIDE PROJECT VLADISLAV MIRVALD ▸ 20th century Czech artist (1921-2003) ▸ Constructivism movement ▸ Strong interest in geometric construction
  15. 15. THE STORY OF A SIDE PROJECT SOME PIECES FRO MIRVALD Circular Structure (1969) Continuous Cylinder (1979-1992) Undulating Cylinder (1995)
  16. 16. THE STORY OF A SIDE PROJECT GUMROAD’S SMALL PRODUCT LAB CHALLENGE ▸ Gum road is a platform for selling goods, in particular digital goods ▸ 1 week challenge: ▸ Create something ▸ Sell it!
  17. 17. THE STORY OF A SIDE PROJECT THE E-BOOK
  18. 18. THE STORY OF A SIDE PROJECT
  19. 19. THE STORY OF A SIDE PROJECT
  20. 20. ONLY 2 CORE CONCEPTS
  21. 21. USE DATA TO GENERATE SHAPES PARAMETRICALLY. IT CAN BE AS SIMPLE AS A D3.RANGE()
  22. 22. CHANGE THE DATA TO UPDATE THE DRAWING AND ANIMATE. CAN BE TRIGGERED WITH D3.TIMER() OR USER INTERACTION.
  23. 23. DEMO LIVE DEMO ▸ With KORG nano KONTROL ▸ using https://github.com/shokai/korg- nano-kontrol based on WebMIDI API ▸ to map inputs: d3.scale().domain([0, 127])
  24. 24. TEXT LINKS ▸ Creative coding sketches codedoodl.es (https://medium.com/@neilcarpenter/ introducing-codedoodl-es-598039758df8#.ifeve6ql7) ▸ GIF Loop coder (http://www.gifloopcoder.com/) ▸ p5.js (https://p5js.org/) ▸ 50 free copies of Draw like Vladislav Mirvald with d3.js ebook (https://gum.co/mirvald/ d3paris) with code `d3paris`.
 Also some code here: https://github.com/fabid/mirvald-d3 ▸ John Firebaugh’s d3 animations (http://jfire.io/animations/) ▸ About tweet-sized d3 (http://blog.scottlogic.com/2016/03/08/deconstructing-a-tweet- sized-d3-creation.html) ▸ Creative coding Podcast (http://creativecodingpodcast.com/ )
  25. 25. THANK YOU. @fabian_dubois https://www.datamaplab.com Get a copy of: 
 Draw Like Vladislav with d3.js
 https://gum.co/mirvald/slideshare

×