Make Your Browser Dance | Breaking Borders

My 'Make Your Browser Dance' talk for Breaking Borders.

Transcript

1. MAKE YOUR BROWSER DANCE
2. HELLO I'm Ruth UX, Design, Front End Dev @rumyra Work in The Lab at O2
3. WINAMP 0:05
5. MY NAME IS RUTH AND I AM A VJ “VJing is a broad designation for realtime visual performance” - Wikipedia
6. I WAS THINKING CSS Animations Web Audio API (+ others) Can we recreate my old uni days?
7. TWO THINGS Moving visual Analysed sound wave
9. CREATING CSS ANIMATION @ k e y f r a m e s f l a s h i n g { 0 % { o p a c i t y : 0 ; } 5 0 % { o p a c i t y : 1 ; } 1 0 0 % { o p a c i t y : 0 ; } } . l i g h t s i { a n i m a t i o n : f l a s h i n g 2 s i n f i n i t e ; } YOU'LL NEED VENDOR PREFIXES :) List of animatable properties: http://oli.jp/2010/css- animatable-properties/
10. GO MAD HTML LESS JS Result Edit on < s c r i p t s r c = " h t t p : / / w w w . j a s o n d a v i e s . c o m / d 3 . m i n . j s " > < / s c r i p t < s c r i p t s r c = " h t t p : / / w w w . j a s o n d a v i e s . c o m / w o r d c l o u d / d 3 . l a y o u t . c l o u d . j s < d i v c l a s s = " o u t e r " > < d i v i d = " c o n t a i n e r " > HTML SCSS JS Result Edit on < d i v c l a s s = " c o n t a i n e r " > < d i v c l a s s = " b o x " > < d i v c l a s s = " b o x " > h t m l { HAML Sass Result Edit on % u l . s t r i p - ( 1 . . 3 6 0 ) . e a c h d o | i | % l i . l i n e HTML LESS Result Edit on < d i v i d = " b a c k g r o u n d " > < d i v c l a s s = " c o n t a i n e r " > < d i v c l a s s = " d i c e a n i m a t e " > < d i v c l a s s = " p a n e l " >
11. EXPANDING ON THE LIGHT
12. WEB AUDIO API It's magic! Based around nodes Source node -> sound you are loading in Output node -> where the sound wants to come out
13. ALL THE THINGS Control volume / / C o n t r o l v o l u m e m y A u d i o C o n t e x t . c r e a t e G a i n ( ) ; Create filters / / C r e a t e f i l t e r m y A u d i o C o n t e x t . c r e a t e B i q u a d F i l t e r ( ) ; Create sound / / C r e a t e s o u n d m y A u d i o C o n t e x t . c r e a t e O s c i l l a t o r ( ) ; The by Boris Smus is free to read online! Web Audio API O'Reilly book
14. ANALYSING We can do that :D / / c r e a t e i n s t a n c e v a r a n a l y s e r = m y A u d i o C o n t e x t . c r e a t e A n a l y s e r ( ) ; / / g e t d a t a a n a l y s e r . g e t B y t e F r e q u e n c y D a t a ( ) ; a n a l y s e r . g e t F l o a t F r e q u e n c y D a t a ( ) ; a n a l y s e r . g e t B y t e T i m e D o m a i n D a t a ( ) ;
15. MORE MAGIC (& SOME CODE) Loop through our lights, match them to a frequency and set them alight / / g e t l i g h t e l e m e n t s v a r l i g h t s = d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( ' i ' ) ; v a r t o t a l L i g h t s = l i g h t s . l e n g t h ; f o r ( v a r i = 0 ; i 1 6 0 ) { l i g h t s [ i ] . s t y l e . o p a c i t y = " 1 " ; } e l s e { l i g h t s [ i ] . s t y l e . o p a c i t y = " 0 . 2 " ; } }
19. USEFUL LINKS dancing.rumyra.com O'Reilly Audio API Book by Boris Smus dancer.js