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
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
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?
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 developers
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 BESM-4
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