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.

Transcript

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)
   

   View Slide

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
   

   View Slide

3. View Slide

4. C O D E I S P O E T RY
   

   View Slide

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

   View Slide

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

   View Slide

7. 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
   

   View Slide

8. 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)
   

   View Slide

9. 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
   

   View Slide

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

    View Slide

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

    View Slide

12. 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)
    

    View Slide

13. L E A P J S
    • Javascript library for Leap Motion
    •
    • https://developer.leapmotion.com/leapjs
    

    View Slide

14. R A N D O M C U T S I N J AVA S C R I P T
    • Processing.js + Timbre.js
    
    
    Random cuts by Catodo
    
    
    
    
    <br/>var sound1 = T("fnoise", {freq:100, mul:0.1});<br/>var sound2 = T("saw", {freq:100, mul:0.1});<br/>
    
    
    
    

    View Slide

15. 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);
    }
    

    View Slide

16. R A N D O M C U T S . P D E
    void cuts(int num) {
    for (int i=0; iif (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);
    }
    }
    

    View Slide

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

    View Slide

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

    View Slide

19. http://soulwire.co.uk/experiments
    

    View Slide

20. 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
    

    View Slide

21. 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
    

    View Slide

22. 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
    

    View Slide

23. 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
    

    View Slide

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

    View Slide

25. 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
    

    View Slide

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

    View Slide

27. 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/
    

    View Slide

28. T H A N K S !
    Contacts
    !
    Email: iamcatodo@gmail.com
    Twitter: @iamcatodo
    http://www.catodo.net
    

    View Slide