JavaScript for Artists

Slide deck for my presentation on the process and tools behind creating interactive audio-visual and conceptual works through JavaScript.

It didn't turn out in the PDF but here's the backdrop for the opening slide:

http://art.mand.is/playground/sketches/moving-blobs-of-light.html

Read more at https://george.mand.is

Transcript

1. JavaScript for Artists
   George Mandis
   FullStack 2018 — London
   #FullStackCon — @georgeMandis • george.mand.is • javascriptforartists.com • snaptortoise.com
   

   View Slide

2. Hi.
   I'm George. Me in a nutshell + fun facts:
   Been a developer for ~12 years
   Once lived as digital nomad in 18 countries
   Accidentally broke for ~30 seconds with an
   errant git push a decade ago
   Unintentionally cheated while running a marathon
   in North Korea
   marvel.com
   

   View Slide

3. View Slide

4. More Relevantly
   I like to break make things. Make use of
   my tools in wrong unexpected ways.
   Today we're going to look at making
   things — specifically crap art via
   JavaScript and the tools that allows us to
   do so.
   

   View Slide

5. So...
   What do we mean by “art” exactly?
   What is art?
   Why JavaScript?
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. My Definition for This Talk
    Anything created through joyful (?) exploration of a
    discipline, an expression of something captured only
    through the work itself, embracing one's curiosity and the
    pursuit to find an answer to a question.
    More succinctly:
    “Not precisely useful, but not exactly pointless!”
    

    View Slide

13. In That Vein,
    Some Things I Made
    Inky Spirals
    Flower Sketch #2
    Mirror Ink
    Changing Leaves
    Bulbs
    Moon Doodles
    Solitary Notes Echoing in Space
    

    View Slide

14. Why JavaScript?
    Because It's Everywhere!
    Browsers, servers, hardware...
    Has a Low Barrier to Entry
    Taught in many places, forgiving...
    It's Where the People Are
    Conferences, Meetups, GitHub projects...
    

    View Slide

15. So... JavaScript for Artists?
    Yes!
    JavaScript and “the web” make for an
    exceptional platform for artistic
    expression, creativity and exploration.
    

    View Slide

16. Why is this interesting?
    Through "play" we can become
    better developers
    

    View Slide

17. Also in that vein...
    

    View Slide

18. 101 Ways to Say
    “Hello World”
    I'm always interested in what you can do
    with technology that people haven't
    thought of doing yet.
    Brian Eno
    

    View Slide

19. console.log("Hello, World");
    
    

    View Slide

20. const helloWorld = [
    'H','e','l','l','o',',',' ',
    'W','o','r','l','d'
    ];
    console.log(helloWorld.join(''));
    
    

    View Slide

21. process.stdout.write("H");
    process.stdout.write("e");
    process.stdout.write("l");
    process.stdout.write("l");
    process.stdout.write("o");
    process.stdout.write(",");
    process.stdout.write(" ");
    process.stdout.write("W");
    process.stdout.write("o");
    process.stdout.write("r");
    process.stdout.write("l");
    process.stdout.write("d\n");
    
    

    View Slide

22. const helloWorld = [
    'd', 'l', 'r', 'o', 'W', ' ', ',',
    'o', 'l', 'l', 'e', 'H'
    ];
    helloWorld.reverse().forEach((letter) => {
    process.stdout.write(letter);
    })
    console.log();
    
    

    View Slide

23. const helloWorld = [
    72, 101, 108, 108,
    111, 44, 32, 87,
    111, 114, 108, 100
    ];
    helloWorld.forEach((unicode) => {
    process.stdout.write(String.fromCharCode(unicode))
    });
    console.log();
    
    

    View Slide

24. const helloWorld = "Ifmmp-!Xpsme";
    helloWorld.split("").forEach((value, index, array) => {
    process.stdout.write( String.fromCharCode(helloWorld.charCodeAt(index) - 1))
    });
    console.log()
    
    

    View Slide

25. Agenda for Today's Talk
    1. Lengthy Introduction ✅
    2. Blabber About Art ✅
    3. Show & Share Simple Demos ✅
    4. Art & Early Computing
    5. The JavaScript Artist's Palette
    6. Modes of Thinking & Demos
    7. Critique & Final Summary
    

    View Slide

26. Art & Early Computing
    A Woefully Incomplete & Comically Lacking History
    “The proper artistic response to digital
    technology is to embrace it as a new
    window on everything that's eternally
    human, and to use it with passion,
    wisdom, fearlessness and joy.”
    Ralph Lombreglia
    

    View Slide

27. “Electricity is really just organized
    lightning. ”
    — George Carlin
    

    View Slide

28. Computers & Music
    1951 — Mark II — God Save the King
    

    View Slide

29. Computers & Music
    1961 — "Daisy Bell" — Bell Labs
    

    View Slide

30. Computers & Imagery
    1956 — SAGE Pin-Up Girl
    

    View Slide

31. Computers & Animation
    1967 — "Hummingbird" — Bell Labs
    

    View Slide

32. The First Computer Animations
    1968 — "Kitty" — Russian Computer BESM-4
    

    View Slide

33. Computers & Literature
    1952 — Algorithmic Love Letters
    by Christopher Straychey
    Print two words taken from a list of salutations
    Do the following 5 times:
    Choose one of two sentence structures depending on a
    random value Rand
    Fill the sentence structure from lists of adjectives, adverbs,
    substantives, and verbs.
    Print the letter's closing
    Demonstration
    

    View Slide

34. And Many More
    Animations
    Musical Composition
    Paintings
    Sculpture Design
    Digital Photography
    Romance Novels
    Dance Routines
    Architecture
    

    View Slide

35. The JavaScript Artist's Palette
    “When something is such a creative
    medium as the web, the limits to it are
    our imagination.”
    Tim Berners-Lee
    

    View Slide

36. The JavaScript Artist's Palette
    The tools, services and technologies available to us today
    to create interesting, expressive things in JavaScript.
    Math
    Visuals
    Audio
    “Interactivity”
    

    View Slide

37. Math
    You don't have to be brilliant (but it doesn't hurt). A basic
    grasp of some concepts can help a lot.
    Working with random numbers
    Plotting points on a cartesian plane
    Simple trigonometry
    Keeping track of time
    There are libraries like but JavaScript's built-in math functions are probably fine. Many
    libraries will provide functions as well.
    math.js
    

    View Slide

38. Math
    Working with random numbers
    In vanilla JavaScript:
    With a library like p5.js:
    Math.round( Math.random() * 10 );
    
    Math.round( random(10) );
    
    

    View Slide

39. Math
    Working with random numbers
    Choosing randomly from a list of items in vanilla JS:
    With a library like p5.js:
    const names = ["Mary", "Kate", "Jan", "Joe"];
    const chosenName = names[ Math.floor( Math.random() * names.length) ];
    
    const names = ["Mary", "Kate", "Jan", "Joe"];
    const chosenName = random(names);
    
    

    View Slide

40. Math
    Plotting points on a cartesian plane
    Being able to traverse a plane, draw lines and generate
    images is integral.
    This uses a lot of fancy math, but at the heart of it it's traversing a 2D plane and making
    decisions on what to draw.
    for (let y=0; y++; y < height) {
    for (let x=0; x++; x < width) {
    // Do something with [x, y]
    }
    }
    
    fractal
    

    View Slide

41. Math
    Simple trigonometry
    Calculate degrees and radians and helpful in drawing arcs
    and circles.
    function radians (degrees) {
    return degrees * Math.PI / 180;
    };
    // Converts from radians to degrees.
    function degrees (radians) {
    return radians * 180 / Math.PI;
    };
    
    

    View Slide

42. Math
    Keeping track of time
    Being able to traverse a plane, draw lines and generate
    images is integral.
    const currentTime = Date.now();
    console.log("Going to wait 3 seconds...");
    while( Date.now() - currentTime < 3000 ){
    // take a rest
    }
    console.log("It's now 3 seconds later!");
    
    

    View Slide

43. Visuals
    This covers an enormous specturm of possibilities
    including:
    2D & 3D drawing
    Photo manipulation & processing
    Videos & animations
    Traditional web interface
    

    View Slide

44. Visuals
    Instead of delving into the possibilities of each here's a
    small sampling of libraries and frameworks that facilitate
    visual explorations:
    p5.js —
    d3.js —
    three.js —
    https://p5js.org
    https://d3js.org/
    https://threejs.org/
    

    View Slide

45. Audio
    Sound is an important tool for interactive works.
    Important concepts include
    Traversing audio files (WedAudio API)
    Generating tones & sounds (WedAudio API)
    

    View Slide

46. Audio
    Similar to playing with visuals, there are many tools
    available here. Some suggested starting points:
    p5.sound —
    Pizzicato.js —
    howler.js —
    Wed Audio API —
    https://p5js.org/reference/#/libraries/p5.sound
    https://alemangui.github.io/pizzicato/
    https://howlerjs.com/
    https://developer.mozilla.org/en-
    US/docs/Web/API/Web_Audio_API
    

    View Slide

47. Interactivity
    An enormous umbrella containing the bits that really make
    JavaScript an exciting place to create art projects:
    The Browser — allows us to have 2-way conversations
    with our audiences. A whole new dimension for
    interactive works.
    JavaScript on Hardware — Espruino, Tessel, Johnny-
    Five, Raspberry Pi
    

    View Slide

48. Interactivity
    An enormous umbrella containing the bits that really make
    JavaScript an exciting place to create art projects:
    APIs & Services — for images, video, texts, speech
    synthesis, speech recognition, face recognition, object
    identification...
    Machine learning and AI — , ,
    ,
    Tensorflow.js ml5.js
    Magenta.js AR.js
    

    View Slide

49. Beyond Tools
    Changing Mindset & Approach
    “Humans are allergic to change. They
    love to say, 'We've always done it this
    way.' I try to fight that. That's why I have
    a clock on my wall that runs counter-
    clockwise.”
    — Grace Hopper
    

    View Slide

50. Earthquake Music
    A convoluted musical system based on latitude, longitude
    and magnitude derived from a GeoJSON feed of real
    earthquake data.
    Demo
    

    View Slide

51. Emotional Reinforcement Bot
    The art that watches you and reciprocates your mood in
    color and tone.
    Demo
    

    View Slide

52. Thank You
    JavaScript for Artists
    George Mandis
    FullStack 2018 — London
    #FullStackCon — @georgeMandis • https://george.mand.is • javascriptforartists.com •
    snaptortoise.com
    Questions? Comments? Email me — george@mand.is
    

    View Slide