creative coding with d3.js
TRANSCRIPT
CREATIVE CODING WITH D3.JS
PARIS D3.JS
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
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
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
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
D3 IS NOT JUST FOR DATAVIZ
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/
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!
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/
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/
D3 IS NOT JUST FOR DATAVIZ
MAKING MUSIC WITH D3
▸ Adam Pearce
▸ Visual sequencer
▸ http://roadtolarissa.com/synth/
STORY OF A SIDE PROJECT
MIRVALD’S ANALOG DIGITAL ART
THE STORY OF A SIDE PROJECT
VLADISLAV MIRVALD
▸ 20th century Czech artist (1921-2003)
▸ Constructivism movement
▸ Strong interest in geometric construction
THE STORY OF A SIDE PROJECT
SOME PIECES FRO MIRVALD
Circular Structure (1969)
Continuous Cylinder (1979-1992)
Undulating Cylinder (1995)
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!
THE STORY OF A SIDE PROJECT
THE E-BOOK
THE STORY OF A SIDE PROJECT
THE STORY OF A SIDE PROJECT
ONLY 2 CORE CONCEPTS
USE DATA TO GENERATE SHAPES PARAMETRICALLY. IT CAN BE AS SIMPLE AS A D3.RANGE()
CHANGE THE DATA TO UPDATE THE DRAWING AND ANIMATE. CAN BE TRIGGERED WITH D3.TIMER() OR USER INTERACTION.
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])
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/ )
THANK YOU.
@fabian_dubois https://www.datamaplab.com
Get a copy of: Draw Like Vladislav with d3.jshttps://gum.co/mirvald/slideshare