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

JavaScript for Artists

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

George Mandis

July 14, 2018
Tweet

More Decks by George Mandis

Other Decks in Technology

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 — [email protected]

    View Slide