JavaScript for Artists
George Mandis
FullStack 2018 — London
#FullStackCon — @georgeMandis • george.mand.is • javascriptforartists.com • snaptortoise.com
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
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.
Slide 5
Slide 5 text
So...
What do we mean by “art” exactly?
What is art?
Why JavaScript?
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
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!”
Slide 13
Slide 13 text
In That Vein,
Some Things I Made
Inky Spirals
Flower Sketch #2
Mirror Ink
Changing Leaves
Bulbs
Moon Doodles
Solitary Notes Echoing in Space
Slide 14
Slide 14 text
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...
Slide 15
Slide 15 text
So... JavaScript for Artists?
Yes!
JavaScript and “the web” make for an
exceptional platform for artistic
expression, creativity and exploration.
Slide 16
Slide 16 text
Why is this interesting?
Through "play" we can become
better developers
Slide 17
Slide 17 text
Also in that vein...
Slide 18
Slide 18 text
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
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
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
“Electricity is really just organized
lightning. ”
— George Carlin
Slide 28
Slide 28 text
Computers & Music
1951 — Mark II — God Save the King
Slide 29
Slide 29 text
Computers & Music
1961 — "Daisy Bell" — Bell Labs
Slide 30
Slide 30 text
Computers & Imagery
1956 — SAGE Pin-Up Girl
Slide 31
Slide 31 text
Computers & Animation
1967 — "Hummingbird" — Bell Labs
Slide 32
Slide 32 text
The First Computer Animations
1968 — "Kitty" — Russian Computer BESM-4
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
And Many More
Animations
Musical Composition
Paintings
Sculpture Design
Digital Photography
Romance Novels
Dance Routines
Architecture
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
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”
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
Math
Working with random numbers
In vanilla JavaScript:
With a library like p5.js:
Math.round( Math.random() * 10 );
Math.round( random(10) );
Slide 39
Slide 39 text
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);
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
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;
};
Slide 42
Slide 42 text
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!");
Slide 43
Slide 43 text
Visuals
This covers an enormous specturm of possibilities
including:
2D & 3D drawing
Photo manipulation & processing
Videos & animations
Traditional web interface
Slide 44
Slide 44 text
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/
Slide 45
Slide 45 text
Audio
Sound is an important tool for interactive works.
Important concepts include
Traversing audio files (WedAudio API)
Generating tones & sounds (WedAudio API)
Slide 46
Slide 46 text
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
Slide 47
Slide 47 text
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
Slide 48
Slide 48 text
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
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
Earthquake Music
A convoluted musical system based on latitude, longitude
and magnitude derived from a GeoJSON feed of real
earthquake data.
Demo
Slide 51
Slide 51 text
Emotional Reinforcement Bot
The art that watches you and reciprocates your mood in
color and tone.
Demo
Slide 52
Slide 52 text
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]