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

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:


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


George Mandis

July 14, 2018


  1. JavaScript for Artists George Mandis FullStack 2018 — London #FullStackCon

    — @georgeMandis • george.mand.is • javascriptforartists.com • snaptortoise.com
  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
  3. None
  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.
  5. So... What do we mean by “art” exactly? What is

    art? Why JavaScript?
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  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!”
  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
  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...
  15. So... JavaScript for Artists? Yes! JavaScript and “the web” make

    for an exceptional platform for artistic expression, creativity and exploration.
  16. Why is this interesting? Through "play" we can become better

  17. Also in that vein...

  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
  19. console.log("Hello, World"); 

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

  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"); 
  22. const helloWorld = [ 'd', 'l', 'r', 'o', 'W', '

    ', ',', 'o', 'l', 'l', 'e', 'H' ]; helloWorld.reverse().forEach((letter) => { process.stdout.write(letter); }) console.log(); 
  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(); 
  24. const helloWorld = "Ifmmp-!Xpsme"; helloWorld.split("").forEach((value, index, array) => { process.stdout.write(

    String.fromCharCode(helloWorld.charCodeAt(index) - 1)) }); console.log() 
  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
  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
  27. “Electricity is really just organized lightning. ” — George Carlin

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

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

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

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

  32. The First Computer Animations 1968 — "Kitty" — Russian Computer

  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
  34. And Many More Animations Musical Composition Paintings Sculpture Design Digital

    Photography Romance Novels Dance Routines Architecture
  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
  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”
  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
  38. Math Working with random numbers In vanilla JavaScript: With a

    library like p5.js: Math.round( Math.random() * 10 );  Math.round( random(10) ); 
  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); 
  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
  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; }; 
  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!"); 
  43. Visuals This covers an enormous specturm of possibilities including: 2D

    & 3D drawing Photo manipulation & processing Videos & animations Traditional web interface
  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/
  45. Audio Sound is an important tool for interactive works. Important

    concepts include Traversing audio files (WedAudio API) Generating tones & sounds (WedAudio API)
  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
  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
  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
  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
  50. Earthquake Music A convoluted musical system based on latitude, longitude

    and magnitude derived from a GeoJSON feed of real earthquake data. Demo
  51. Emotional Reinforcement Bot The art that watches you and reciprocates

    your mood in color and tone. Demo
  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