Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Experiments in code, generative art in Javascript

Experiments in code, generative art in Javascript

This talk has been presented at JSDay 2014 (http://www.jsday.it).
Have fun wih Javascript is possible! In this talk we will presents some Javascript experiments for generative art projects. Generative art refers to art that in whole or in part has been created with the use of an autonomous system. Using simple algorithms and the power of Javascript, HTML5 and CSS3 we will show some creative code to perform generative art on the web. We will present some librarires such as processing.js, D3.js, Paper.js, three.js and Raphaël.

Enrico Zimuel

May 15, 2014

More Decks by Enrico Zimuel

Other Decks in Programming


  1. 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)
  2. 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
  3. A S C I I S H E L L

    F O R K B O M B Jaromil, 2002
  4. 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
  5. 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)
  6. 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
  7. R A N D O M C U T S

  8. R A N D O M C U T S

    • Generative algorithm + human interaction • Processing + Leap Motion
  9. 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)
  10. 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
  11. 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>
  12. 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); }
  13. 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); } }
  14. G E N E R AT I V E A

    R T I N J AVA S C R I P T
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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>
  22. 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/
  23. T H A N K S ! Contacts ! Email:

    [email protected] Twitter: @iamcatodo http://www.catodo.net