JavaScript for Artists

Update: This site is undergoing a refresh for 2023! Sign-up for the newsletter above to learn more when about when the changes go live. New articles, regular updates, interviews and job boards forthcoming.

This site is a collection of links to libraries, frameworks, services, articles, tutorials and other resources that seem helpful for creating interactive, expressive artwork via JavaScript. It's intended to accompany and supplement my talk of the same name.

Libraries & Frameworks

• Tensorflow.js
  https://www.tensorflow.org/js
  https://github.com/tensorflow

• Tensorflow Models
  https://github.com/tensorflow/tfjs-models

• brain.js
  https://github.com/BrainJS/brain.js A library of neural networks

• Convnet.js
  https://github.com/karpathy/convnetjs

• WebDNN
  https://github.com/mil-tokyo/webdnn

• mljs
  https://github.com/mljs

• synaptic.js
  http://caza.la/synaptic/#/paint-an-image

• p5.js
  https://p5js.org/

• three.js
  https://threejs.org/

• babylon.js
  https://www.babylonjs.com/

• TWGL.js
  https://twgljs.org/

• PixiJS
  https://www.pixijs.com/

• A-Frame (WebVR)
  https://aframe.io

• WebGL Frameworks
  https://en.wikipedia.org/wiki/List_of_WebGL_frameworks

• regl
  A functional approach to WebGL.
  https://github.com/regl-project/regl

• Magenta.js
  https://magenta.tensorflow.org

• MusicVAE
  https://magenta.tensorflow.org/music-vae

• ml5.js
  https://github.com/ml5js

• Bodypix.js
  https://github.com/tensorflow/tfjs-models/tree/master/body-pix

• LiquidFun
  https://google.github.io/liquidfun/

• Movement.js
  https://github.com/mgechev/movement.js

• Posnet (tensorflow.js model)
  https://github.com/tensorflow/tfjs-models/tree/master/posenet

• faceapi.js
  https://github.com/justadudewhohacks/face-api.js?files=1

• Resemble.js
  Image analysis and comparison. Demo https://github.com/rsmbl/Resemble.js

• processing.js
  http://processingjs.org/

• pico.js (face recog)
  Small face-detection library in only 200 lines of code. Demo
  https://github.com/tehnokv/picojs

• Tone.js
  http://tonejs.org/

• WebMidi.js / MIDI
  Makes it easier to work with the Web MIDI API.
  http://djipco.github.io/webmidi/latest/classes/WebMidi.html

• Tonal.js
  https://github.com/danigb/tonal

• natural
  https://github.com/NaturalNode/natural
  Natural language tools for Node

• Tesseract.js
  https://tesseract.projectnaptha.com/
  Pure JavaScript OCR in 62 languages

Articles & Tutorials

• Machine Learning
  https://www.ml.cmu.edu/

• Generated Artwork Auctions Off for $ 432,500
  https://medium.com/datadriveninvestor/machine-learning-generated-artwork-auctions-off-for-432-500-c377be74146f

• Getting started with Magenta.js and MusicRNN
  https://medium.com/@oluwafunmi.ojo/getting-started-with-magenta-js-e7ffbcb64c21

• Neural Networks in JavaScript with Brain.js
  https://stackabuse.com/neural-networks-in-javascript-with-brain-js/

• ConvnetJS demo: Image “Painting”
  https://cs.stanford.edu/~karpathy/convnetjs/demo/image_regression.html

• Neural networks in JavaScript
  https://scrimba.com/g/gneuralnetworks

• Writing Code Poems
  https://www.smashingmagazine.com/2018/07/writing-code-poems/

• Image Classification in the Browser with JavaScript
  https://thekevinscott.com/image-classification-with-javascript/

• Why is AI Art Copyright So Complicated?
  https://www.artnome.com/news/2019/3/27/why-is-ai-art-copyright-so-complicated

• Face detection using Shape Detection API
  https://paul.kinlan.me/face-detection/

• face-api.js — JavaScript API for Face Recognition in the Browser with tensorflow.js
  https://itnext.io/face-api-js-javascript-api-for-face-recognition-in-the-browser-with-tensorflow-js-bcc2a6c4cf07

• Microsoft Azure Face Detection
  https://azure.microsoft.com/en-us/services/cognitive-services/face/#detection

• BodyPix Demo
  https://storage.googleapis.com/tfjs-models/demos/body-pix/index.html

Audio

• Awesome Audio Viz
  https://github.com/willianjusten/awesome-audio-visualization

Books

Topics include making art through computers, creativity & JavaScript

It's not hard to find good online tutorials and examples that show you had to make a ball bounce across the screen, animate text or even experiment with facial recognition in the browser. I still find it helpful to read books on these topics—even real, physical books I can throw in a bag and take to the beach.

• Generative Art: A Practical Guide Using Processing by Matt Pearson.
  This book specifically shows you how to make things in Processing, but it's easy to apply to concepts to other languages.
  Manning Publishing • Amazon

• JavaScript on Things by Lyza Danger Gardner
  Manning Publishing

• Making Things Smart by Gordon Williams
  https://www.oreilly.com/library/view/making-things-smart/9781680451887/

• SparkFun Guide to Processing by Derek Runberg
  https://nostarch.com/sparkfunprocessing

• Processing for Visual Artists by Andrew Glassner
  https://www.glassner.com/portfolio/processing-for-visual-artists/

• Aesthetic Computing edited by Paul A. Fishwick
  MIT Press

• The Nature of Code by Daniel Shiffman
  https://natureofcode.com/

• Technology & Creativity by Subrata Dasgupta.
  This is not a book on JavaScript or making art with computers. Instead it talks about the creative process through the lense of technological progress. I think it's as helpful, academic reminder that creativity isn't a piece of software or literal tool in your toolbelt. It's a way of thinking and approaching the world.
  Amazon

• 10 PRINT CHR$(205.5+RND(1)); : GOTO 10 by Casey Reas, Ian Bogost, Jeremy Douglass, John Bell, Mark C. Marino, Mark Sample, Michael Mateas, Nick Montfort, Noah Vawter, and Patsy Baudoin
  https://10print.org/

Slides

The slides from my talk at Microsoft Build 2019 are now available here:
→ speakerdeck.com/georgemandis/javascript-for-artists-8e9b3f52-ec3d-4374-8256-7122b9dbf485

The slides from my talk at FrontMania 2018 are now available here:
→ speakerdeck.com/georgemandis/javascript-for-artists