Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creative coding with d3.js

1,447 views

Published on

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

Published in: Software
  • Login to see the comments

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

×