Experiments in code, generative art in Javascript

E X P E R I M E N T
S I N C O D E , G E N E R AT I V E A RT I N J AVA S C R I P T E N R I C O “ C A T O D O ” Z I M U E L JsDay 2014 - Verona (Italy)

A B O U T M E • Enrico Zimuel
(aka Catodo) • Creative coder and digital artist from Turin (Italy) • Developer since Texas Instruments Ti99/4A • Started to play with electronic art in mid-’90s • TEDx speaker about creative coding • I teach generative art at the Pictor Academy of Turin • More information http://www.catodo.net

C O D E I S P O E T
RY

A S C I I S H E L L
F O R K B O M B Jaromil, 2002

10 PRINT CHR$(205.5+RND(1)); : GOTO 10 Nick Montfort et al.
10print.org

U N N A M E D S O U
N D S C U L P T U R E http://vimeo.com/44815930

G E N E R AT I V E A
R T “Generative art refers to any art practice where the artist uses a system, such as a set of natural language rules, a computer program, a machine, or other procedural invention, which is set into motion with some degree of autonomy contributing to or resulting in a completed work of art.” (Philip Galanter)

A R T M A D E B Y A
L G O R I T H M S • Software art • Net.art • Creative coding • Generative art

R A N D O M C U T S
http://www.catodo.net/random-cuts-live-performance

R A N D O M C U T S
• Generative algorithm + human interaction • Processing + Leap Motion

Using 2 monochromatic IR cameras and 3 infrared LEDs, the
device observes a roughly hemispherical area, to a distance of about 1 meter (3 feet)

L E A P J S • Javascript library for
Leap Motion • <script src="//js.leapmotion.com/leap-0.6.0.js"></script> • https://developer.leapmotion.com/leapjs

R A N D O M C U T S
I N J AVA S C R I P T • Processing.js + Timbre.js <html> <head> <title>Random cuts by Catodo</title> <script src="js/processing.min.js"></script> <script src="js/timbre.js"></script> </head> <body style="background:black"> <script type="text/javascript"> var sound1 = T("fnoise", {freq:100, mul:0.1}); var sound2 = T("saw", {freq:100, mul:0.1}); </script> <canvas data-processing-sources="randomcuts.pde"></canvas> </body> </html>

R A N D O M C U T S
. P D E float colR, colG = 200, colB = 100, sizeBar = 10; ! void setup() { size(screen.width, screen.height); background(0); frameRate(10); } ! void draw() { strokeWeight(frameCount % sizeBar); if (frameCount % 2 == 0) { stroke(colR, colG, colB,frameCount % 255); } else { stroke(0); sound1.pause(); sound2.pause(); } cuts(random(0,20)); ! colR = random(0,255); colG = random(0,255); colB = random(0,255); sizeBar = random(0,screen.height/2); }

R A N D O M C U T S
. P D E void cuts(int num) { for (int i=0; i<num; i++) { if (random(0,10) < 5) { x1 = random(0, screen.width); y1 = -sizeBar; x2 = random(x1, screen.width); y2 = screen.height + sizeBar; sound1.set({freq : [x1, x2], mul : 0.1}).play(); } else { x1 = -sizeBar; y1 = random(0, screen.height); x2 = screen.width + sizeBar; y2 = random(y1, screen.height); sound2.set({freq : [y1, y2], mul: frameCount % 100 / 400}).play(); } line (x1,y1,x2,y2); } }

G E N E R AT I V E A
R T I N J AVA S C R I P T

W E AV E S I L K . C
O M

http://soulwire.co.uk/experiments

L I B R A R I E S F
O R G E N E R AT I V E A R T I N J AVA S C R I P T

P R O C E S S I N G
. J S • Processing.js is the sister project of the popular Processing visual programming language, designed for the web • processingjs.org

D 3 . J S • D3.js is a JavaScript
library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS • http://d3js.org

PA P E R . J S • Paper.js is
an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. • It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves • http://paperjs.org

T H R E E . J S • Javascript
library for 3D • Renderers: WebGL, <canvas>, <svg>, CSS3D, DOM, Software; effects: anaglyph, crosseyed, stereo and more • Scenes, Cameras, Animation, Lights, Materials, Shaders, Objects, Geometry, etc • http://threejs.org

R A P H A Ë L • Raphaël is
a small JavaScript library that should simplify your work with vector graphics on the web • Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. • http://raphaeljs.com

T I M B R E . J S T("timbre.js")
JavaScript Library for Objective Sound Programming <script src="timbre.js"></script> <script> T("sin", {freq:880, mul:0.5}).play(); </script>

S O M E R E F E R E
N C E S • Hello World (video), http://vimeo.com/28499650 • The Art of Creative Coding (video), http://www.youtube.com/watch? v=eBV14-3LT-g • Stop drawing dead fish (video), http://vimeo.com/64895205 • The Nature of Code (book), http://natureofcode.com/ • 10print.org (book), http://10print.org/ • Fun programming, http://funprogramming.org/ • Open Processing, share your sketches! http://www.openprocessing.org/

T H A N K S ! Contacts ! Email:
[email protected] Twitter: @iamcatodo http://www.catodo.net

Experiments in code, generative art in Javascript

Experiments in code, generative art in Javascript

Enrico Zimuel

More Decks by Enrico Zimuel

Other Decks in Programming

Featured

Transcript

E X P E R I M E N T

A B O U T M E • Enrico Zimuel

C O D E I S P O E T

A S C I I S H E L L

10 PRINT CHR$(205.5+RND(1)); : GOTO 10 Nick Montfort et al.

U N N A M E D S O U

G E N E R AT I V E A

A R T M A D E B Y A

R A N D O M C U T S

R A N D O M C U T S

Using 2 monochromatic IR cameras and 3 infrared LEDs, the

L E A P J S • Javascript library for

R A N D O M C U T S

R A N D O M C U T S

R A N D O M C U T S

G E N E R AT I V E A

W E AV E S I L K . C

http://soulwire.co.uk/experiments

L I B R A R I E S F

P R O C E S S I N G

D 3 . J S • D3.js is a JavaScript

PA P E R . J S • Paper.js is

T H R E E . J S • Javascript

R A P H A Ë L • Raphaël is

T I M B R E . J S T("timbre.js")

S O M E R E F E R E

T H A N K S ! Contacts ! Email: