$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Enrico Zimuel

Other Decks in Programming

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: [email protected]
    Twitter: @iamcatodo
    http://www.catodo.net

    View Slide