2024-11-22 16:44:08 +00:00
<!DOCTYPE html> < html lang = "en-US" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width,height=device-height,initial-scale=1.0" > < meta name = "apple-mobile-web-app-capable" content = "yes" > < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < meta property = "og:type" content = "website" > < meta name = "twitter:card" content = "summary" > < style > @ m e d i a s c r e e n { b o d y [ d a t a - b e s p o k e - v i e w = " " ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n , b o d y [ d a t a - b e s p o k e - v i e w = n e x t ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - i n f o - c o n t a i n e r b u t t o n , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - n o t e - c o n t a i n e r b u t t o n { a p p e a r a n c e : n o n e ; b a c k g r o u n d - c o l o r : i n i t i a l ; b o r d e r : 0 ; c o l o r : i n h e r i t ; c u r s o r : p o i n t e r ; f o n t - s i z e : i n h e r i t ; o p a c i t y : . 8 ; o u t l i n e : n o n e ; p a d d i n g : 0 ; t r a n s i t i o n : o p a c i t y . 2 s l i n e a r ; - w e b k i t - t a p - h i g h l i g h t - c o l o r : t r a n s p a r e n t } b o d y [ d a t a - b e s p o k e - v i e w = " " ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n : d i s a b l e d , b o d y [ d a t a - b e s p o k e - v i e w = n e x t ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n : d i s a b l e d , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - i n f o - c o n t a i n e r b u t t o n : d i s a b l e d , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - n o t e - c o n t a i n e r b u t t o n : d i s a b l e d { c u r s o r : n o t - a l l o w e d ; o p a c i t y : . 1 5 ! i m p o r t a n t } b o d y [ d a t a - b e s p o k e - v i e w = " " ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n : h o v e r , b o d y [ d a t a - b e s p o k e - v i e w = n e x t ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n : h o v e r , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - i n f o - c o n t a i n e r b u t t o n : h o v e r , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - n o t e - c o n t a i n e r b u t t o n : h o v e r { o p a c i t y : 1 } b o d y [ d a t a - b e s p o k e - v i e w = " " ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n : h o v e r : a c t i v e , b o d y [ d a t a - b e s p o k e - v i e w = n e x t ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n : h o v e r : a c t i v e , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - i n f o - c o n t a i n e r b u t t o n : h o v e r : a c t i v e , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - n o t e - c o n t a i n e r b u t t o n : h o v e r : a c t i v e { o p a c i t y : . 6 } b o d y [ d a t a - b e s p o k e - v i e w = " " ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n : h o v e r : n o t ( : d i s a b l e d ) , b o d y [ d a t a - b e s p o k e - v i e w = n e x t ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n : h o v e r : n o t ( : d i s a b l e d ) , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - i n f o - c o n t a i n e r b u t t o n : h o v e r : n o t ( : d i s a b l e d ) , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - n o t e - c o n t a i n e r b u t t o n : h o v e r : n o t ( : d i s a b l e d ) { t r a n s i t i o n : n o n e } b o d y [ d a t a - b e s p o k e - v i e w = " " ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n [ d a t a - b e s p o k e - m a r p - o s c = p r e v ] , b o d y [ d a t a - b e s p o k e - v i e w = n e x t ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n [ d a t a - b e s p o k e - m a r p - o s c = p r e v ] , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - i n f o - c o n t a i n e r b u t t o n . b e s p o k e - m a r p - p r e s e n t e r - i n f o - p a g e - p r e v { b a c k g r o u n d : # 0 0 0 0 u r l ( " d a t a : i m a g e / s v g + x m l ; b a s e 6 4 , P H N 2 Z y B 4 b W x u c z 0 i a H R 0 c D o v L 3 d 3 d y 5 3 M y 5 v c m c v M j A w M C 9 z d m c i I H Z p Z X d C b 3 g 9 I j A g M C A x M D A g M T A w I j 4 8 c G F 0 a C B m a W x s P S J u b 2 5 l I i B z d H J v a 2 U 9 I i N m Z m Y i I H N 0 c m 9 r Z S 1 s a W 5 l Y 2 F w P S J y b 3 V u Z C I g c 3 R y b 2 t l L W x p b m V q b 2 l u P S J y b 3 V u Z C I g c 3 R y b 2 t l L X d p Z H R o P S I 1 I i B k P S J N N j g g O T A g M j g g N T B s N D A t N D A i L z 4 8 L 3 N 2 Z z 4 = " ) n o - r e p e a t 5 0 % ; b a c k g r o u n d - s i z e : c o n t a i n ; o v e r f l o w : h i d d e n ; t e x t - i n d e n t : 1 0 0 % ; w h i t e - s p a c e : n o w r a p } b o d y [ d a t a - b e s p o k e - v i e w = " " ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n [ d a t a - b e s p o k e - m a r p - o s c = n e x t ] , b o d y [ d a t a - b e s p o k e - v i e w = n e x t ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n [ d a t a - b e s p o k e - m a r p - o s c = n e x t ] , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - i n f o - c o n t a i n e r b u t t o n . b e s p o k e - m a r p - p r e s e n t e r - i n f o - p a g e - n e x t { b a c k g r o u n d : # 0 0 0 0 u r l ( " d a t a : i m a g e / s v g + x m l ; b a s e 6 4 , P H N 2 Z y B 4 b W x u c z 0 i a H R 0 c D o v L 3 d 3 d y 5 3 M y 5 v c m c v M j A w M C 9 z d m c i I H Z p Z X d C b 3 g 9 I j A g M C A x M D A g M T A w I j 4 8 c G F 0 a C B m a W x s P S J u b 2 5 l I i B z d H J v a 2 U 9 I i N m Z m Y i I H N 0 c m 9 r Z S 1 s a W 5 l Y 2 F w P S J y b 3 V u Z C I g c 3 R y b 2 t l L W x p b m V q b 2 l u P S J y b 3 V u Z C I g c 3 R y b 2 t l L X d p Z H R o P S I 1 I i B k P S J t M z
2024-09-30 09:38:29 +01:00
* Marp / Marpit Gaia theme.
*
* @theme gaia
* @author Yuki Hattori
*
* @auto-scaling true
* @size 16:9 1280px 720px
* @size 4:3 960px 720px
2024-11-22 16:44:08 +00:00
*/div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) code.hljs{display:block;overflow-x:auto;padding:1em}div#\:\$p > svg > foreignObject > section code.hljs{padding:3px 5px}div#\:\$p > svg > foreignObject > section .hljs{background:#000;color:#f8f8f8}div#\:\$p > svg > foreignObject > section .hljs-comment,div#\:\$p > svg > foreignObject > section .hljs-quote{color:#aeaeae;font-style:italic}div#\:\$p > svg > foreignObject > section .hljs-keyword,div#\:\$p > svg > foreignObject > section .hljs-selector-tag,div#\:\$p > svg > foreignObject > section .hljs-type{color:#e28964}div#\:\$p > svg > foreignObject > section .hljs-string{color:#65b042}div#\:\$p > svg > foreignObject > section .hljs-subst{color:#daefa3}div#\:\$p > svg > foreignObject > section .hljs-link,div#\:\$p > svg > foreignObject > section .hljs-regexp{color:#e9c062}div#\:\$p > svg > foreignObject > section .hljs-name,div#\:\$p > svg > foreignObject > section .hljs-section,div#\:\$p > svg > foreignObject > section .hljs-tag,div#\:\$p > svg > foreignObject > section .hljs-title{color:#89bdff}div#\:\$p > svg > foreignObject > section .hljs-class .hljs-title,div#\:\$p > svg > foreignObject > section .hljs-doctag,div#\:\$p > svg > foreignObject > section .hljs-title.class_{text-decoration:underline}div#\:\$p > svg > foreignObject > section .hljs-bullet,div#\:\$p > svg > foreignObject > section .hljs-number,div#\:\$p > svg > foreignObject > section .hljs-symbol{color:#3387cc}div#\:\$p > svg > foreignObject > section .hljs-params,div#\:\$p > svg > foreignObject > section .hljs-template-variable,div#\:\$p > svg > foreignObject > section .hljs-variable{color:#3e87e3}div#\:\$p > svg > foreignObject > section .hljs-attribute{color:#cda869}div#\:\$p > svg > foreignObject > section .hljs-meta{color:#8996a8}div#\:\$p > svg > foreignObject > section .hljs-formula{background-color:#0e2231;color:#f8f8f8;font-style:italic}div#\:\$p > svg > foreignObject > section .hljs-addition{background-color:#253b22;color:#f8f8f8}div#\:\$p > svg > foreignObject > section .hljs-deletion{background-color:#420e09;color:#f8f8f8}div#\:\$p > svg > foreignObject > section .hljs-selector-class{color:#9b703f}div#\:\$p > svg > foreignObject > section .hljs-selector-id{color:#8b98ab}div#\:\$p > svg > foreignObject > section .hljs-emphasis{font-style:italic}div#\:\$p > svg > foreignObject > section .hljs-strong{font-weight:700}div#\:\$p > svg > foreignObject > section :is(h1, marp-h1),div#\:\$p > svg > foreignObject > section :is(h2, marp-h2),div#\:\$p > svg > foreignObject > section :is(h3, marp-h3),div#\:\$p > svg > foreignObject > section :is(h4, marp-h4),div#\:\$p > svg > foreignObject > section :is(h5, marp-h5),div#\:\$p > svg > foreignObject > section :is(h6, marp-h6){margin:.5em 0 0}div#\:\$p > svg > foreignObject > section :is(h1, marp-h1) strong,div#\:\$p > svg > foreignObject > section :is(h2, marp-h2) strong,div#\:\$p > svg > foreignObject > section :is(h3, marp-h3) strong,div#\:\$p > svg > foreignObject > section :is(h4, marp-h4) strong,div#\:\$p > svg > foreignObject > section :is(h5, marp-h5) strong,div#\:\$p > svg > foreignObject > section :is(h6, marp-h6) strong{font-weight:inherit}div#\:\$p > svg > foreignObject > section :is(h1, marp-h1)::part(auto-scaling),div#\:\$p > svg > foreignObject > section :is(h2, marp-h2)::part(auto-scaling),div#\:\$p > svg > foreignObject > section :is(h3, marp-h3)::part(auto-scaling),div#\:\$p > svg > foreignObject > section :is(h4, marp-h4)::part(auto-scaling),div#\:\$p > svg > foreignObject > section :is(h5, marp-h5)::part(auto-scaling),div#\:\$p > svg > foreignObject > section :is(h6, marp-h6)::part(auto-scaling){max-height:580px}div#\:\$p > svg > foreignObject > section :is(h1, marp-h1){font-size:1.8em}div#\:\$p > svg > foreignObject > section :is(h2, marp-h2){font-size:1.5em}div#\:\$p > svg > foreignObject > section :is(h3, marp-h3){font-size:1.3em}div#\:\$p > svg > foreignObject > section :is(h4, marp-h4){font-size:1.1em}div#\:\$p > svg > foreignObject > section :is(h5, marp-h5){font-size:1em}div#\:\$p > svg > foreignObject > section :is(h6,
2024-11-28 09:46:01 +00:00
< / style > < / head > < body > < div class = "bespoke-marp-osc" > < button data-bespoke-marp-osc = "prev" tabindex = "-1" title = "Previous slide" > Previous slide< / button > < span data-bespoke-marp-osc = "page" > < / span > < button data-bespoke-marp-osc = "next" tabindex = "-1" title = "Next slide" > Next slide< / button > < button data-bespoke-marp-osc = "fullscreen" tabindex = "-1" title = "Toggle fullscreen (f)" > Toggle fullscreen< / button > < button data-bespoke-marp-osc = "presenter" tabindex = "-1" title = "Open presenter view (p)" > Open presenter view< / button > < / div > < div id = ":$p" > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section data-background-color = "#000000" data-color = "#B3ACA2" data-class = "lead" data-theme = "gaia" lang = "en-US" class = "lead" style = "--background-color:#000000;--color:#B3ACA2;--class:lead;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;--marpit-advanced-background-split:40%;" data-marpit-advanced-background = "background" data-marpit-advanced-background-split = "right" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "horizontal" > < figure style = "background-image:url("images/deluge-slider-2.jpg");" > < / figure > < figure style = "background-image:url("images/UGS.png");" > < / figure > < figure style = "background-image:url("images/monome-gridlab.jpg");filter:blur(2px);" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "60%" height = "720" > < section id = "1" data-background-color = "#000000" data-color = "#B3ACA2" data-class = "lead" data-theme = "gaia" lang = "en-US" class = "lead" style = "--background-color:#000000;--color:#B3ACA2;--class:lead;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;--marpit-advanced-background-split:40%;" data-marpit-advanced-background = "content" data-marpit-advanced-background-split = "right" >
2024-09-30 09:38:29 +01:00
< h1 id = "towards-a-universal-button-grid-interface" > < strong > Towards a universal button grid interface< / strong > < / h1 >
2024-11-28 09:46:01 +00:00
< h2 id = "and-its-open-implementation" > And its open implementation< / h2 >
2024-09-30 09:38:29 +01:00
< p > Thibaud Keller< br / >
2024-11-24 23:15:43 +00:00
< a href = "https://ossia.io" > ossia.io< / a > - < a href = "https://www.maynoothuniversity.ie/" > Maynooth University< / a > < br / >
2024-09-30 09:38:29 +01:00
< em > made with < a href = "https://marp.app" > marp< / a > < / em > < / p >
< / section >
2024-11-28 09:46:01 +00:00
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section data-background-color = "#000000" data-color = "#B3ACA2" data-class = "lead" data-theme = "gaia" lang = "en-US" class = "lead" style = "color:#B3ACA2;" data-marpit-advanced-background = "pseudo" data-marpit-advanced-background-split = "right" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "2" data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;" >
2024-09-30 09:38:29 +01:00
< h1 id = "an-enduring-practice" > An enduring practice< / h1 >
< ul >
< li >
< p > Thoroughly documented at LMU Munich by Beat Rossmy < a href = "https://doi.org/10.21428/92fbeb44.563bfea9" > [1]< / a > ,< br / >
2024-11-24 23:15:43 +00:00
with Alexander Wiethoff < a href = "https://doi.org/10.21428/92fbeb44.6a2451e6" > [2]< / a > < a href = "https://doi.org/10.1145/3294109.3295646" > [12]< / a > , Maximilian Rauh< a href = "https://doi.org/10.21428/92fbeb44.db84ecd0" > [3]< / a > < br / >
2024-09-30 09:38:29 +01:00
and Sebastian Unger < a href = "https://doi.org/10.21428/92fbeb44.303223db" > [4]< / a > .< / p >
< / li >
< li >
2024-11-25 19:16:10 +00:00
< p > With a dedicated course at Berkley college of Music< br / >
2024-09-30 09:38:29 +01:00
" Grid Controller Studies" ISEL-112 < a href = "https://github.com/stretta/gridlab" > [5]< / a > < / p >
< / li >
< li >
< p > And an active community of artists and developers < a href = "https://llllllll.co/tag/grid" > [6]< / a > < br / >
Due, in part, to the open source, and open-ended nature of monome's grid< / p >
< / li >
< / ul >
< / section >
2024-11-28 09:46:01 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "3" data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;" >
2024-09-30 09:38:29 +01:00
< h1 id = "the-monome-way" > The monome way< / h1 >
< p > < img src = "images/monome-gridlab.jpg" alt = "" style = "width:540px;" / > < img src = "images/grids.jpg" alt = "" style = "height:297px;" / > < br / >
As presented in < a href = "https://stories.maker.co/monome-open-source-tools-for-music-makers" > Maker Stories [7]< / a > .< / p >
< / section >
2024-11-28 09:46:01 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;--marpit-advanced-background-split:40%;" data-marpit-advanced-background = "background" data-marpit-advanced-background-split = "right" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "vertical" > < figure style = "background-image:url("images/202edited.png");background-size:70%;" > < / figure > < figure style = "background-image:url("images/sp808_gal.jpg");background-size:70%;" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "60%" height = "720" > < section id = "4" data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;--marpit-advanced-background-split:40%;" data-marpit-advanced-background = "content" data-marpit-advanced-background-split = "right" >
2024-09-30 09:38:29 +01:00
< h1 id = "origins-of-backlit-button-grids" > Origins of backlit button grids< / h1 >
< p > 1998 - SP series (202 & 808)< br / >
Performance samplers< / p >
< p > The grid allows:< / p >
< ul >
< li > Sampling and triggering< / li >
< li > Copy and paste< / li >
< li > Step recording< / li >
< / ul >
< / section >
2024-11-28 09:46:01 +00:00
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "color:#B3ACA2;" data-marpit-advanced-background = "pseudo" data-marpit-advanced-background-split = "right" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section data-background-color = "#ffffff" data-color = "#B3ACA2" data-header = "Annual grid device releases ([data set](https://gothub.ducks.party/BeatRossmy/Musical-Grid-Interfaces)), separated in five product categories" data-footer = "Figure 2 in Rosmy, B. & Wiethoff, A. “Musical Grid Interfaces: Past, Present, and Future Directions.” 2021[[2]](https://doi.org/10.21428/92fbeb44.6a2451e6)" data-theme = "gaia" lang = "en-US" style = "--background-color:#ffffff;--color:#B3ACA2;--header:Annual grid device releases ([data set](https://gothub.ducks.party/BeatRossmy/Musical-Grid-Interfaces)), separated in five product categories;--footer:Figure 2 in Rosmy, B. & Wiethoff, A. “Musical Grid Interfaces: Past, Present, and Future Directions.” 2021[[2]](https://doi.org/10.21428/92fbeb44.6a2451e6);--theme:gaia;color:#B3ACA2;background-color:#ffffff;background-image:none;" data-marpit-advanced-background = "background" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "horizontal" > < figure style = "background-image:url("images/grid_releases.svg");background-size:67%;" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "1280" height = "720" > < section id = "5" data-background-color = "#ffffff" data-color = "#B3ACA2" data-header = "Annual grid device releases ([data set](https://gothub.ducks.party/BeatRossmy/Musical-Grid-Interfaces)), separated in five product categories" data-footer = "Figure 2 in Rosmy, B. & Wiethoff, A. “Musical Grid Interfaces: Past, Present, and Future Directions.” 2021[[2]](https://doi.org/10.21428/92fbeb44.6a2451e6)" data-theme = "gaia" lang = "en-US" style = "--background-color:#ffffff;--color:#B3ACA2;--header:Annual grid device releases ([data set](https://gothub.ducks.party/BeatRossmy/Musical-Grid-Interfaces)), separated in five product categories;--footer:Figure 2 in Rosmy, B. & Wiethoff, A. “Musical Grid Interfaces: Past, Present, and Future Directions.” 2021[[2]](https://doi.org/10.21428/92fbeb44.6a2451e6);--theme:gaia;color:#B3ACA2;background-color:#ffffff;background-image:none;" data-marpit-advanced-background = "content" >
2024-11-24 23:15:43 +00:00
< header > Annual grid device releases (< a href = "https://gothub.ducks.party/BeatRossmy/Musical-Grid-Interfaces" > data set< / a > ), separated in five product categories< / header >
< footer > Figure 2 in Rosmy, B. & Wiethoff, A. “Musical Grid Interfaces: Past, Present, and Future Directions.” 2021< a href = "https://doi.org/10.21428/92fbeb44.6a2451e6" > [2]< / a > < / footer >
2024-09-30 09:38:29 +01:00
< / section >
2024-11-28 09:46:01 +00:00
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section data-background-color = "#ffffff" data-color = "#B3ACA2" data-header = "Annual grid device releases ([data set](https://gothub.ducks.party/BeatRossmy/Musical-Grid-Interfaces)), separated in five product categories" data-footer = "Figure 2 in Rosmy, B. & Wiethoff, A. “Musical Grid Interfaces: Past, Present, and Future Directions.” 2021[[2]](https://doi.org/10.21428/92fbeb44.6a2451e6)" data-theme = "gaia" lang = "en-US" style = "color:#B3ACA2;" data-marpit-advanced-background = "pseudo" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "6" data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;" >
2024-09-30 09:38:29 +01:00
< h1 id = "notable-instruments-and-sequencers" > Notable instruments and sequencers< / h1 >
< ul >
< li > 2007 - Tenori-on, Yamaha< / li >
< li > 2014 - BeatStep, Arturia< br / >
Circadian Rhythm, Tip Top audio (eurorack)< / li >
< li > 2015 - Circuit, Novation< br / >
Pocket operators, Teenage Engineering (hand held)< / li >
< li > 2016 - Deluge, Synthstrom (open source)< / li >
< li > 2017 - Seq, Polyend (wide)< / li >
< li > 2019 - Zoia, Empress (nodal patcher)< / li >
< li > 2023 - Push 3, Ableton (export to and from a PC)< / li >
< / ul >
< / section >
2024-11-28 09:46:01 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "7" data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;" >
2024-09-30 09:38:29 +01:00
< h1 id = "notable-controllers" > Notable controllers< / h1 >
< ul >
< li > 2006 - 40h, monome (open source)< / li >
< li > 2009 - launchpad, Novation< / li >
< li > 2013 - Push, Ableton< / li >
< li > 2014 - Untztrument, Adafruit (open source)< / li >
< li > 2015 - Linstrument, Roger Lynn (continuous surface)< / li >
< li > 2019 - Grid, Intech Studio (modular)< / li >
< li > 2020 - Mine S, Special Waves (modular)< / li >
< / ul >
< / section >
2024-12-05 18:49:21 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "8" data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;" >
2024-09-30 09:38:29 +01:00
< h1 id = "problem" > Problem< / h1 >
< ul >
< li > A majority of closed source, proprietary hardware.< / li >
< li > Either a blank slate (monome), or overly standardized practices< / li >
< li > Software specific libraries, with divergent approaches< / li >
< li > Many overlapping features< / li >
< / ul >
< / section >
2024-12-05 18:49:21 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;--marpit-advanced-background-split:60%;" data-marpit-advanced-background = "background" data-marpit-advanced-background-split = "right" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "horizontal" > < figure style = "background-image:url("images/controller-b-fur-yamaha-fs1r-730x548.jpg");background-size:110%;" > < / figure > < figure style = "background-image:url("images/pamela.jpg");background-size:26%;" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "40%" height = "720" > < section id = "9" data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;--marpit-advanced-background-split:60%;" data-marpit-advanced-background = "content" data-marpit-advanced-background-split = "right" >
2024-11-28 09:46:01 +00:00
< h1 id = "limitation" > Limitation< / h1 >
< h3 id = "menus" > Menus!< / h3 >
2024-09-30 09:38:29 +01:00
< p > The case of the< br / >
Yamaha FS1R < a href = "https://fs1r.skerjanc.de/" > [8]< / a > < br / >
and the dread of< br / >
2024-11-24 23:15:43 +00:00
" menu diving" < br / >
against< br / >
2024-11-25 19:16:10 +00:00
< a href = "https://busycircuits.com/alm034/" > Pamela's PRO Workout< / a > < / p >
2024-09-30 09:38:29 +01:00
< / section >
2024-12-05 18:49:21 +00:00
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "color:#B3ACA2;" data-marpit-advanced-background = "pseudo" data-marpit-advanced-background-split = "right" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "10" data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;" >
2024-11-22 16:44:08 +00:00
< h1 id = "button-grids-can-be" > Button grids can be:< / h1 >
< ul >
< li > Keyboards / drum pads< / li >
< li > Step sequencers< / li >
< li > " Clip" launchers (Ardour (Ableton))< / li >
2024-11-25 19:16:10 +00:00
< li > Arrangement views (Deluge)< / li >
2024-11-22 16:44:08 +00:00
< li > Routing matrixes (Deluge)< / li >
2024-11-25 19:16:10 +00:00
< li > Rudimentary waveform croppers (Deluge)< / li >
2024-11-22 16:44:08 +00:00
< li > Text displays (Launchapd)< / li >
< li > Basic spin boxes (Circuit)< / li >
< li > Nodal patchers (Zoia) ...< / li >
< / ul >
< / section >
2024-12-05 18:49:21 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "11" data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;" >
2024-09-30 09:38:29 +01:00
< h1 id = "tangible-timelines" > Tangible timelines< / h1 >
< p > < img src = "images/UGS.png" alt = "" style = "width:540px;" / > < img src = "images/superbrain.jpg" alt = "" style = "width:540px;" / > < br / >
Samuel J. Hunt's < a href = "https://iv.nboeck.de/watch?v=KHFJPfa38wY" > UGS< / a > < a href = "https://doi.org/10.1145/3411109.3411122" > [9]< / a > & Beat Rossmy's < a href = "https://vimeo.com/546873594" > SuperBrain< / a > < / p >
< / section >
2024-12-05 18:49:21 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "12" data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;" >
2024-11-25 19:16:10 +00:00
< h1 id = "challenges" > Challenges< / h1 >
< ul >
< li > Compatibility: supporting a wide selection of hardware devices< / li >
< li > Performance: low compute cost & optimal responsiveness< / li >
< li > Extensibility: ease of adding more devices< / li >
< li > Low resolution: reducing graphical elements to their bare minimum< / li >
< li > Portability: ease of integration in software< / li >
< li > Modularity: option to aggregate devices< / li >
< / ul >
< / section >
2024-12-05 18:49:21 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "13" data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;" >
2024-11-28 09:46:01 +00:00
< h1 id = "approach" > Approach< / h1 >
2024-11-25 19:16:10 +00:00
< ul >
< li > Starting with the Launchpad Pro: common & full-featured< / li >
< li > Implement a minimalist widget system< / li >
< li > Porting < a href = "https://ossia.io" > score< / a > 's user interface to a grid< / li >
< li > Drawing from the < a href = "https://ossia.io/score-docs/in-depth/remote.html" > remote control plugin< / a > < / li >
< li > Search for Intuitive mappings of physical actions to software functionalities< / li >
< li > Aim for full integration of the hardware device, allowing complete use of score without a screen, mouse or keyboard< / li >
< / ul >
< / section >
2024-12-05 18:49:21 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;--marpit-advanced-background-split:70%;" data-marpit-advanced-background = "background" data-marpit-advanced-background-split = "right" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "vertical" > < figure style = "background-image:url("images/touchgrid.png");background-size:90%;" > < / figure > < figure style = "background-image:url("images/kinephone.png");background-size:90%;" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "30%" height = "720" > < section id = "14" data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;--marpit-advanced-background-split:70%;" data-marpit-advanced-background = "content" data-marpit-advanced-background-split = "right" >
2024-11-25 19:16:10 +00:00
< h1 id = "beyond" > Beyond< / h1 >
2024-11-24 23:15:43 +00:00
< p > < br / >
< br / >
Beat Rossmy's < a href = "https://vimeo.com/387381202" > TouchGrid< / a > < a href = "https://nime.pubpub.org/pub/touchgrid/release/1" > [4]< / a > & MIT labs < a href = "https://doi.org/10.5281/zenodo.1176145" > Kinéphone [10]< / a > /< a href = "https://doi.org/10.1145/2851581.2892414" > SoundFORMS [11]< / a > < / p >
< / section >
2024-12-05 18:49:21 +00:00
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "color:#B3ACA2;" data-marpit-advanced-background = "pseudo" data-marpit-advanced-background-split = "right" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;--marpit-advanced-background-split:40%;" data-marpit-advanced-background = "background" data-marpit-advanced-background-split = "right" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "vertical" > < figure style = "background-image:url("images/impulse_curve.jpg");background-size:90%;" > < / figure > < figure style = "background-image:url("images/comb.png");background-size:90%;" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "60%" height = "720" > < section id = "15" data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;--marpit-advanced-background-split:40%;" data-marpit-advanced-background = "content" data-marpit-advanced-background-split = "right" >
2024-11-24 23:15:43 +00:00
< h1 id = "honorable-mention" > Honorable mention< / h1 >
< p > < br / >
< br / >
Eli Fieldsteel's< br / >
< a href = "https://inv.nadeko.net/watch?v=6iF5FZ9DAY4&list=PLLnA8B3ZULyHtPZUaIBUtMy3xtxq_uC_I&index=8" > Impulse Curve< / a > < a href = "https://www.icfo.eu/event/3292" > [14]< / a > < br / >
& Beat Rossmy's< br / >
< a href = "https://vimeo.com/231299236" > COMB< / a > < a href = "https://doi.org/10.1145/3294109.3295646" > [12]< / a > < / p >
< / section >
2024-12-05 18:49:21 +00:00
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "color:#B3ACA2;" data-marpit-advanced-background = "pseudo" data-marpit-advanced-background-split = "right" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "16" data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;" >
2024-11-25 19:16:10 +00:00
< h1 id = "bibliography" > Bibliography< / h1 >
2024-09-30 09:38:29 +01:00
< p > < a href = "https://doi.org/10.21428/92fbeb44.563bfea9" > [1]< / a > Rossmy, B. “Buttons, Sliders, and Keys – < / p >
< p > < a href = "https://doi.org/10.21428/92fbeb44.6a2451e6" > [2]< / a > Rossmy, B., & Wiethoff, A. “Musical Grid Interfaces: Past, Present, and Future Directions.” In International Conference on New Interfaces for Musical Expression, 2021.< / p >
< p > < a href = "https://doi.org/10.21428/92fbeb44.db84ecd0" > [3]< / a > Rossmy, B., Rauh, M., & Wiethoff, A. “Towards User Interface Guidelines for Musical Grid Interfaces.” In International Conference on New Interfaces for Musical Expression, 2022.< / p >
< / section >
2024-12-05 18:49:21 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "17" data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;" >
2024-09-30 09:38:29 +01:00
< p > < a href = "https://doi.org/10.21428/92fbeb44.db84ecd0" > [4]< / a > Rossmy, B., Unger, S., & Wiethoff, A. “TouchGrid – < / p >
< p > < a href = "https://github.com/stretta/gridlab" > [5]< / a > Matthew Davidson, aka stretta, gridalb patches repository, June 21, 2024. < a href = "https://github.com/stretta/gridlab" > https://github.com/stretta/gridlab< / a > .< / p >
< p > < a href = "https://llllllll.co/tag/grid" > [6]< / a > Lines “Latest Grid Topics”. The monome comunity forum. < a href = "https://llllllll.co/tag/grid" > https://llllllll.co/tag/grid< / a > .< / p >
< p > < a href = "https://stories.maker.co/monome-open-source-tools-for-music-makers" > [7]< / a > Maker Stories. “Monome / Open Source Tools for Music Makers.” < a href = "https://stories.maker.co/monome-open-source-tools-for-music-makers" > https://stories.maker.co/monome-open-source-tools-for-music-makers< / a > .< / p >
< / section >
2024-12-05 18:49:21 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "18" data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;" >
2024-09-30 09:38:29 +01:00
< p > < a href = "https://fs1r.skerjanc.de/" > [8]< / a > Robert Skerjanc, “HARDWARE-CONTROLLER FOR YAMAHA FS1R,” August 26, 2023. < a href = "https://fs1r.skerjanc.de/" > https://fs1r.skerjanc.de/< / a > .< / p >
< p > < a href = "https://doi.org/10.1145/3411109.3411122" > [9]< / a > Hunt, Samuel J. “Exploring Polyrhythms, Polymeters, and Polytempi with the Universal Grid Sequencer Framework.” In Proceedings of the 15th International Audio Mostly Conference, 101– ’ < / p >
< / section >
2024-12-05 18:49:21 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "19" data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;" >
2024-11-24 23:15:43 +00:00
< p > < a href = "https://doi.org/10.5281/zenodo.1176145" > [10]< / a > Xiao, Xiao, Donald Derek Haddad, Thomas Sanchez, Akito van Troyer, Rébecca Kleinberger, Penny Webb, Joe Paradiso, Tod Machover, and Hiroshi Ishii. “Kin\’ < / p >
< p > < a href = "https://doi.org/10.1145/2851581.2892414" > [11]< / a > Colter, Aubrey, Patlapa Davivongsa, Donald Derek Haddad, Halla Moore, Brian Tice, and Hiroshi Ishii. “SoundFORMS: Manipulating Sound Through Touch.” In Proceedings of the 2016 CHI Conference Extended Abstracts on Human Factors in Computing Systems, 2425– ’ < / p >
< / section >
2024-12-05 18:49:21 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "20" data-background-color = "#000000" data-color = "#B3ACA2" data-theme = "gaia" lang = "en-US" style = "--background-color:#000000;--color:#B3ACA2;--theme:gaia;color:#B3ACA2;background-color:#000000;background-image:none;" >
2024-11-24 23:15:43 +00:00
< p > < a href = "https://doi.org/10.1145/3294109.3295646" > [12]< / a > Rossmy, Beat, and Alexander Wiethoff. “COMB -- Shape as a Meaningful Element of Interaction.” In Proceedings of the Thirteenth International Conference on Tangible, Embedded, and Embodied Interaction, 287– ’ < / p >
< p > < a href = "https://www.icfo.eu/event/3292" > [13]< / a > Fieldsteel, Eli. “LightMatrix: A Light-Sensitive Musical Control Interface.” QUANTUM SOUNDS SYMPOSIUM - ICFO (blog). Accessed November 24, 2024.< / p >
< / section >
2024-11-22 16:44:08 +00:00
< script > ! f u n c t i o n ( ) { " u s e s t r i c t " ; c o n s t t = { h 1 : { p r o t o : ( ) = > H T M L H e a d i n g E l e m e n t , a t t r s : { r o l e : " h e a d i n g " , " a r i a - l e v e l " : " 1 " } , s t y l e : " d i s p l a y : b l o c k ; f o n t - s i z e : 2 e m ; m a r g i n - b l o c k - s t a r t : 0 . 6 7 e m ; m a r g i n - b l o c k - e n d : 0 . 6 7 e m ; m a r g i n - i n l i n e - s t a r t : 0 p x ; m a r g i n - i n l i n e - e n d : 0 p x ; f o n t - w e i g h t : b o l d ; " } , h 2 : { p r o t o : ( ) = > H T M L H e a d i n g E l e m e n t , a t t r s : { r o l e : " h e a d i n g " , " a r i a - l e v e l " : " 2 " } , s t y l e : " d i s p l a y : b l o c k ; f o n t - s i z e : 1 . 5 e m ; m a r g i n - b l o c k - s t a r t : 0 . 8 3 e m ; m a r g i n - b l o c k - e n d : 0 . 8 3 e m ; m a r g i n - i n l i n e - s t a r t : 0 p x ; m a r g i n - i n l i n e - e n d : 0 p x ; f o n t - w e i g h t : b o l d ; " } , h 3 : { p r o t o : ( ) = > H T M L H e a d i n g E l e m e n t , a t t r s : { r o l e : " h e a d i n g " , " a r i a - l e v e l " : " 3 " } , s t y l e : " d i s p l a y : b l o c k ; f o n t - s i z e : 1 . 1 7 e m ; m a r g i n - b l o c k - s t a r t : 1 e m ; m a r g i n - b l o c k - e n d : 1 e m ; m a r g i n - i n l i n e - s t a r t : 0 p x ; m a r g i n - i n l i n e - e n d : 0 p x ; f o n t - w e i g h t : b o l d ; " } , h 4 : { p r o t o : ( ) = > H T M L H e a d i n g E l e m e n t , a t t r s : { r o l e : " h e a d i n g " , " a r i a - l e v e l " : " 4 " } , s t y l e : " d i s p l a y : b l o c k ; m a r g i n - b l o c k - s t a r t : 1 . 3 3 e m ; m a r g i n - b l o c k - e n d : 1 . 3 3 e m ; m a r g i n - i n l i n e - s t a r t : 0 p x ; m a r g i n - i n l i n e - e n d : 0 p x ; f o n t - w e i g h t : b o l d ; " } , h 5 : { p r o t o : ( ) = > H T M L H e a d i n g E l e m e n t , a t t r s : { r o l e : " h e a d i n g " , " a r i a - l e v e l " : " 5 " } , s t y l e : " d i s p l a y : b l o c k ; f o n t - s i z e : 0 . 8 3 e m ; m a r g i n - b l o c k - s t a r t : 1 . 6 7 e m ; m a r g i n - b l o c k - e n d : 1 . 6 7 e m ; m a r g i n - i n l i n e - s t a r t : 0 p x ; m a r g i n - i n l i n e - e n d : 0 p x ; f o n t - w e i g h t : b o l d ; " } , h 6 : { p r o t o : ( ) = > H T M L H e a d i n g E l e m e n t , a t t r s : { r o l e : " h e a d i n g " , " a r i a - l e v e l " : " 6 " } , s t y l e : " d i s p l a y : b l o c k ; f o n t - s i z e : 0 . 6 7 e m ; m a r g i n - b l o c k - s t a r t : 2 . 3 3 e m ; m a r g i n - b l o c k - e n d : 2 . 3 3 e m ; m a r g i n - i n l i n e - s t a r t : 0 p x ; m a r g i n - i n l i n e - e n d : 0 p x ; f o n t - w e i g h t : b o l d ; " } , s p a n : { p r o t o : ( ) = > H T M L S p a n E l e m e n t } , p r e : { p r o t o : ( ) = > H T M L E l e m e n t , s t y l e : " d i s p l a y : b l o c k ; f o n t - f a m i l y : m o n o s p a c e ; w h i t e - s p a c e : p r e ; m a r g i n : 1 e m 0 ; - - m a r p - a u t o - s c a l i n g - w h i t e - s p a c e : p r e ; " } } , e = " d a t a - m a r p - a u t o - s c a l i n g - w r a p p e r " , i = " d a t a - m a r p - a u t o - s c a l i n g - s v g " , n = " d a t a - m a r p - a u t o - s c a l i n g - c o n t a i n e r " ; c l a s s s e x t e n d s H T M L E l e m e n t { c o n t a i n e r ; c o n t a i n e r S i z e ; c o n t a i n e r O b s e r v e r ; s v g ; s v g C o m p u t e d S t y l e ; s v g P r e s e r v e A s p e c t R a t i o = " x M i n Y M i d m e e t " ; w r a p p e r ; w r a p p e r S i z e ; w r a p p e r O b s e r v e r ; c o n s t r u c t o r ( ) { s u p e r ( ) ; c o n s t t = t = > ( [ e ] ) = > { c o n s t { w i d t h : i , h e i g h t : n } = e . c o n t e n t R e c t ; t h i s [ t ] = { w i d t h : i , h e i g h t : n } , t h i s . u p d a t e S V G R e c t ( ) } ; t h i s . a t t a c h S h a d o w ( { m o d e : " o p e n " } ) , t h i s . c o n t a i n e r O b s e r v e r = n e w R e s i z e O b s e r v e r ( t ( " c o n t a i n e r S i z e " ) ) , t h i s . w r a p p e r O b s e r v e r = n e w R e s i z e O b s e r v e r ( ( ( . . . e ) = > { t ( " w r a p p e r S i z e " ) ( . . . e ) , t h i s . f l u s h S v g D i s p l a y ( ) } ) ) } s t a t i c g e t o b s e r v e d A t t r i b u t e s ( ) { r e t u r n [ " d a t a - d o w n s c a l e - o n l y " ] } c o n n e c t e d C a l l b a c k ( ) { t h i s . s h a d o w R o o t . i n n e r H T M L = ` \ n < s t y l e > \ n s v g [ $ { i } ] { d i s p l a y : b l o c k ; w i d t h : 1 0 0 % ; h e i g h t : a u t o ; v e r t i c a l - a l i g n : t o p ; } \ n s p a n [ $ { n } ] { d i s p l a y : t a b l e ; w h i t e - s p a c e : v a r ( - - m a r p - a u t o - s c a l i n g - w h i t e - s p a c e , n o w r a p ) ; w i d t h : m a x - c o n t e n t ; } \ n < / s t y l e > \ n < d i v $ { e } > \ n < s v g p a r t = " s v g " $ { i } > \ n < f o r e i g n O b j e c t > < s p a n $ { n } > < s l o t > < / s l o t > < / s p a n > < / f o r e i g n O b j e c t > \ n < / s v g > \ n < / d i v > \ n ` . s p l i t ( / \ n \ s * / ) . j o i n ( " " ) , t h i s . w r a p p e r = t h i s . s h a d o w R o o t . q u e r y S e l e c t o r ( ` d i v [ $ { e } ] ` ) ? ? v o i d 0 ; c o n s t t = t h i s . s v g ; t h i s . s v g = t h i s . w r a p p e r ? . q u e r y S e l e c t o r ( ` s v g [ $ { i } ] ` ) ? ? v o i d 0 , t h i s . s v g ! = = t & & ( t h i s . s v g C o m p u t e d S t y l e = t h i s . s v g ? w i n d o w . g e t C o m p u t e d S t y l e ( t h i s . s v g ) : v o i d 0 ) , t h i s . c o n t a i n e r = t h i s . s v g ? . q u e r y S e l e c t o r ( ` s p a n [ $ { n } ] ` ) ? ? v o i d 0 , t h i s . o b s e r v e ( ) } d i s c o n n e c t e d C a l l b a c k ( ) { t h i s . s v g = v o i d 0 , t h i s . s v g C o m p u t e d S t y l e = v o i d 0 , t h i s . w r a p p e r = v o i d 0 , t h i s . c o n t a i n e r = v o i d 0 , t h i s . o b s e r v e ( ) } a t t r i b u t e C h a n g e d C a l l b a c k ( ) { t h i s . o b s e r v e ( ) } f l u s h S v g D i s p l a y ( ) { c o n s t { s v g : t } = t h i s ; t & & ( t . s t y l e . d i s p l a y = " i n l i n e " , r e q u e s t A n i m a t i o n F r a m e ( ( ( ) = > { t . s t y l e . d i s p l a y = " " } ) ) ) } o b s e r v e ( ) { t h i s . c o n t a i n e r O b s e r v e r . d i s c o n n e c t ( ) , t h i s . w r a p p e r O b s e r v e r . d i s c o n n e c t ( ) , t h i s . w r a p p e r & & t h i s . w r a p p e r O b s e r v e r . o b s e r v e ( t h i s . w r a p p e r ) , t h i s . c o n t a i n e r & & t h i s . c o n t a i n e r O b s e r v e r . o b s e r v e ( t h i s . c o n t a i n e r ) , t h i s . s v g C o m p u t e d S t y l e & & t h i s . o b s e r v e S V G S t y l e ( t h i s . s v g C o m p u t e d S t y l e ) } o b s e r v e S V G S t y l e ( t ) { c o n s t e = ( ) = > { c o n s t i = ( ( ) = > { c o n s t e = t . g e t P r o p e r t y V a l u e ( " - - p r e s e r v e - a s p e c t - r a t i o " ) ; i f ( e ) r e t u r n e . t r i m ( ) ; r e t u r n ` x $ { ( ( { t e x t A l i g n : t , d i r e c t i o n : e } ) = > { i f ( t . e n d s W i t h ( " l e f t " ) ) r e t u r n " M i n " ; i f ( t . e n d s W i t h ( " r i g h t " ) ) r e t u r n " M a x " ; i f ( " s t a r t " = = = t | | " e n d " = = = t ) { l e t i = " r t l " = = = e ; r e t u r n " e n d " = = = t & & ( i = ! i ) , i ? " M a x " : " M i n " } r e t u r n " M i d " } ) ( t ) } Y M i d m e e t ` } ) ( ) ; i ! = = t h i s . s v g P r e s e r v e A s p e c t R a t i o & & ( t h i s . s v g P r e s e r v e A s p e c t R a t i o = i , t h i s . u p d a t e S V G R e c t ( ) ) , t = = = t h i s . s v g C o m p u t e d S t y l e & & r e q u e s t A n i m a t i o n F r a m e ( e ) } ; e ( ) } u p d a t e S V G R e c t ( ) { l e t t = M a t h . c e i l ( t h i s . c o n t a i n e r S i z e ? . w
2024-11-28 09:46:01 +00:00
< / script > < / foreignObject > < / svg > < / div > < div class = "bespoke-marp-note" data-index = "2" tabindex = "0" > < p > * Demo of the MLR max patch
and a sonified Conway's game of life
2024-11-22 16:44:08 +00:00
2024-11-25 19:16:10 +00:00
* Made in America< / p > < / div > < div class = "bespoke-marp-note" data-index = "6" tabindex = "0" > < p > An alternative open source firmware for the Novation Launchpad Pro
2024-12-05 18:49:21 +00:00
Interesting, but Ideally, a library should work with any controller out of the box< / p > < / div > < div class = "bespoke-marp-note" data-index = "12" tabindex = "0" > < p > score contains:
2024-11-25 19:16:10 +00:00
Independent timelines,
nodal patchers,
waveform displays,
and widgets of all kind
2024-12-05 18:49:21 +00:00
Heavily rely on WIMP interactions< / p > < / div > < div class = "bespoke-marp-note" data-index = "13" tabindex = "0" > < p > edge and basal interactions
2024-11-25 19:16:10 +00:00
Accessibility: convert light lo cell height
or vibration
small screen in each cell
or dot matrix
or 14 segment displays
2024-11-22 16:44:08 +00:00
2024-11-25 19:16:10 +00:00
displaying characters requires at least 3x5 cell fonts
2024-12-05 18:49:21 +00:00
https://fontstruct.com/fontstructions/show/1371235/3x5-dot-matrix-1< / p > < / div > < div class = "bespoke-marp-note" data-index = "14" tabindex = "0" > < p > Impulse curve filmed performance
2024-11-24 23:15:43 +00:00
https://inv.nadeko.net/watch?v=k8N0iMYd9H8& t=0< / p > < / div > < script > / * ! ! L i c e n s e : h t t p s : / / u n p k g . c o m / @ m a r p - t e a m / m a r p - c l i @ 4 . 0 . 3 / l i b / b e s p o k e . j s . L I C E N S E . t x t * /
2024-12-13 14:43:10 +00:00
!function(){"use strict";function e(e){return e& & e.__esModule& & Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var t,n,r=(n||(n=1,t={from:function(e,t){var n,r=1===(e.parent||e).nodeType?e.parent||e:document.querySelector(e.parent||e),o=[].filter.call("string"==typeof e.slides?r.querySelectorAll(e.slides):e.slides||r.children,(function(e){return"SCRIPT"!==e.nodeName})),a={},i=function(e,t){return(t=t||{}).index=o.indexOf(e),t.slide=e,t},s=function(e,t){a[e]=(a[e]||[]).filter((function(e){return e!==t}))},c=function(e,t){return(a[e]||[]).reduce((function(e,n){return e& & !1!==n(t)}),!0)},l=function(e,t){o[e]& & (n& & c("deactivate",i(n,t)),n=o[e],c("activate",i(n,t)))},d=function(e,t){var r=o.indexOf(n)+e;c(e>0?"next":"prev",i(n,t))& & l(r,t)},u={off:s,on:function(e,t){return(a[e]||(a[e]=[])).push(t),s.bind(null,e,t)},fire:c,slide:function(e,t){if(!arguments.length)return o.indexOf(n);c("slide",i(o[e],t))&&l(e,t)},next:d.bind(null,1),prev:d.bind(null,-1),parent:r,slides:o,destroy:function(e){c("destroy",i(n,e)),a={}}}; return(t||[]).forEach((function(e){e(u)})),n||l(0),u}}),t),o=e(r);const a=document.body,i=(...e)=>history.replaceState(...e),s="",c="presenter",l="next",d=["",c,l],u="bespoke-marp-",f=`data-${u}`,m=(e,{protocol:t,host:n,pathname:r,hash:o}=location)=>{const a=e.toString();return`${t}//${n}${r}${a?"?":""}${a}${o}`},g=()=>a.dataset.bespokeView,p=e=>new URLSearchParams(location.search).get(e),v=(e,t={})=>{const n={location,setter:i,...t},r=new URLSearchParams(n.location.search);for(const t of Object.keys(e)){const n=e[t];"string"==typeof n?r.set(t,n):r.delete(t)}try{n.setter({...window.history.state??{}},"",m(r,n.location))}catch(e){console.error(e)}},h=(()=>{const e="bespoke-marp";try{return localStorage.setItem(e,e),localStorage.removeItem(e),!0}catch{return!1}})(),y=e=>{try{return localStorage.getItem(e)}catch{return null}},b=(e,t)=>{try{return localStorage.setItem(e,t),!0}catch{return!1}},w=e=>{try{return localStorage.removeItem(e),!0}catch{return!1}},x=(e,t)=>{const n="aria-hidden";t?e.setAttribute(n,"true"):e.removeAttribute(n)},k=e=>{e.parent.classList.add(`${u}parent`),e.slides.forEach((e=>e.classList.add(`${u}slide`))),e.on("activate",(t=>{const n=`${u}active`,r=t.slide,o=r.classList,a=!o.contains(n);if(e.slides.forEach((e=>{e.classList.remove(n),x(e,!0)})),o.add(n),x(r,!1),a){const e=`${n}-ready`;o.add(e),document.body.clientHeight,o.remove(e)}}))},$=e=>{let t=0,n=0;Object.defineProperty(e,"fragments",{enumerable:!0,value:e.slides.map((e=>[null,...e.querySelectorAll("[data-marpit-fragment]")]))});const r=r=>void 0!==e.fragments[t][n+r],o=(r,o)=>{t=r,n=o,e.fragments.forEach(((e,t)=>{e.forEach(((e,n)=>{if(null==e)return;const a=t< r | | t = ==r&&n<=o;e.setAttribute(`${f}fragment`,(a?"":"in")+"active");const i = `${f}current-fragment`;t===r&&n===o?e.setAttribute(i,"current"):e.removeAttribute(i)}))})),e.fragmentIndex=o;const a = {slide:e.slides[r],index:r,fragments:e.fragments[r],fragmentIndex:o};e.fire("fragment",a)};e.on("next",(({fragment:a=!0})= > {if(a){if(r(1))return o(t,n+1),!1;const a=t+1;e.fragments[a]& & o(a,0)}else{const r=e.fragments[t].length;if(n+1< r ) return o ( t , r-1 ) , ! 1 ; const a = e.fragments[t+1];a&&o(t+1,a.length-1)}})),e.on("prev",(({fragment:a=!0})= > {if(r(-1)& & a)return o(t,n-1),!1;const i=t-1;e.fragments[i]& & o(i,e.fragments[i].length-1)})),e.on("slide",(({index:t,fragment:n})=>{let r=0;if(void 0!==n){const o=e.fragments[t];if(o){const{length:e}=o;r=-1===n?e-1:Math.min(Math.max(n,0),e-1)}}o(t,r)})),o(0,0)},E=document,L=()=>!(!E.fullscreenEnabled& & !E.webkitFullscreenEnabled),S=()=>!(!E.fullscreenElement& & !E.webkitFullscreenElement),P=e=>{e.fullscreen=()=>{L()& & (async()=>{S()?(E.exitFullscreen||E.webkitExitFullscreen)?.call(E):((e=E.body)=>{(e.requestFullscreen||e.webkitRequestFullscreen)?.call(e)})()})()},document.addEventListener("keydown",(t=>{"f"!==t.key& & "F11"!==t.key||t.altKey||t.ctrlKey||t.metaKey||!L()||(e.fullscreen(),t.preventDefault())}))},_=`${u}inactive`,T=(e=2e3)=>({parent:t,fire:n})=>{const r=t.classList,o=e=>n(`marp-${e?"":"in"}active`);let a;const i=()=>{a& & clearTimeout(a),a=setTimeou
