the formulartic spectrum
- @noopkat -

suz hinton

  1. » @noopkat

  2. » front-end dev @ kickstarter

photo of NYC cityscape

suz hinton

  1. » member of NodeJS hardware WG

  2. » member of Ember-A11y Project team

photo of NYC cityscape

why are we here

feelings

storytime

1994

commodore64 graphics programming book chapter cover

the littlest artist

(then I grew up)

oled screen on a breadboard, displaying a pixelated monchrome picture of a cat's face

"the accidental programmer"

semicolon wars

semicolon wars

semicolon wars;;

a story within a story

front cover design of the book Contact by Carl Sagan
fs

Dr Ellie Arroway

drawing of a ground satellite, binary code and a ruby stone
photo of NYC subway

flic.kr/p/p5rbEm

photo of NYC subway

flic.kr/p/cuSKuE

photo of NYC subway

flic.kr/p/cvteNq

photo of NYC subway

flic.kr/p/dqZU3s

photo of NYC subway

flic.kr/p/fb7pay

photo of NYC subway

flic.kr/p/prmtWS

photo of NYC subway

flic.kr/p/rAqrrm

photo of NYC subway

flic.kr/p/qwE93z

fs
fs

"Dr Arroway didn't have JavaScript"

What does sound "look" like?

Lets find out via art!
(and the Web Audio API)

The Formulartic Spectrum

fs
fs
fs
fs

Analysing PCM data
(Pulse Code Modulation!)

PCM

fs

our sample

what if...


        audioContext.decodeAudioData(audioData)
          .then(function(decoded) {

            // just get the left ear, it's fine ;)
            let data = decoded.getChannelData(0);
            
            for (let i = 0; i < data.length; i += 1) {

              // convert raw sample to within 0-255 range
              let hue = Math.ceil((data[i] + 1) * 255 / 2);

              // convert HSL to an RGB array
              let rgb = hslToRgb(hue, 200, 150);

              // create the pixel
              imgData.data[i*4] = rgb[0];
              imgData.data[i*4+1] = rgb[1];
              imgData.data[i*4+2] = rgb[2];
              imgData.data[i*4+3] = rgb[3];
            }

            // put the pixels on a canvas element
            canvas.putImageData(imgData, 0, 0);
          });
       
fs
fs

> 300k pixels

fs

let's reduce it

what if we made a song?

fs
fs
fs
fs
fs

composition

disclaimer: NOT a musician

but I am better at hardware things

what would playing this "music" look like in the real world?

fs
fs
fs
fs
fs

goals

goals

& make better music

ok.

so things got a bit weird.

but it's art

recap!

what's the point?

creative coding gets you out of your comfort zone

art doesn't care about your semicolon feelings

art doesn't care about perfection

art is about exploration

fs

art is about what you learned

write messy code

make lots of mistakes

you deserve a break from being judged

fs

code like no one's watching

& if you can:

don't `git rebase -i`

just `git push`

and make it ok for others

 

noopkat.github.io/iltsw

noopkat.github.io/formulartic-spectrum

meow.noopkat.com

⋆ thank you ⋆

noopkat.github.io/iltsw