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