make art with JavaScript!

by Sher Minn Chong / @piratefsh at EmpireJs 2016

Sher Minn

Malaysia

front-end web engineer

Singapore

i like code.

i also like making art.

code + art = ?

generative art

art that is generated by a non-human system that can indepedently decide features of the artwork

e.g. algorithms

screensaver art

3D pipes from Youtube
Windows Mystify from Youtube
geometric shapes, by sasj
noize, by jerome herr
melting, by infinitygene
constellations, by piratefsh
shutter, by leanderherzog

how is generative art made?

what we'll use

JavaScript library

designed for
creating visual art

inspired by Processing

<canvas>

## here's some code
## p5.js ```javascript //Hello mouse in p5.js. function setup() { createCanvas(400, 400); stroke(255); background(192, 64, 0); } function draw() { const x = 150; const y = 25; line(x, y, mouseX, mouseY); } ```
## vanilla canvas API ```javascript const canvas = document.createElement('canvas'); canvas.width = 400; canvas.height = 400; const ctx = canvas.getContext('2d'); ctx.fillStyle = 'rgb(192, 64, 0)'; ctx.strokeStyle = 'rgb(255, 255, 255)'; ctx.fillRect(0, 0, canvas.width, canvas.height); canvas.addEventListener('mousemove', (e) => { ctx.lineTo(150, 25); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); }); document.body.appendChild(canvas); ```

algorithms

geometry

shapes, points, lines

constellations, by piratefsh
shells, by piratefsh

demo

| ~ ■ ●

recursion

```javascript // recursive fibonacci function function fib(n){ if(n == 0){ return 0; } if(n == 1){ return 1; } return fib(n-2) + fib(n-1); } // call it fib(4) ```

repetition in a self similar way

Mandelbrot set from Wikipedia
Sierpinski's triangle from Wikipedia

koch snowflake

beyond the canvas

audio input

warning: flashing lights

video input

the browser is your playground

code + art = ♥

resources

p5.js tutorials

p5art inspiration

Nature of Code book

by Daniel Shiffman

thank yous

EmpireJS | Recurse Center

make art with code!

tweet me at @piratefsh

code: https://github.com/piratefsh/p5js-art | slides: https://git.io/vrrwU