add workshops section

32 files changed, 147 insertions, 21 deletions

diff --git a/root/$order b/root/$order
index 06bd279..15ac679 100644
--- a/root/$order
+++ b/root/$order
@@ -1,6 +1,7 @@
 about
 blog
 articles
+workshops
 games
 projects
 experiments
diff --git a/root/articles/$order b/root/articles/$order
index 66aad40..97f81e8 100644
--- a/root/articles/$order
+++ b/root/articles/$order
@@ -1,3 +1,2 @@
 mmmfs
-xy-workshop
 realities
diff --git a/root/articles/xy-workshop/description: text$plain b/root/articles/xy-workshop/description: text$plain
deleted file mode 100644
index c3fefe0..0000000
--- a/root/articles/xy-workshop/description: text$plain
+++ /dev/null
@@ -1,2 +0,0 @@
-workshop: oscilloscope music and games with pure data
-
diff --git a/root/games/plonat_atek/pictures/text$moonscript -> fn -> mmm$dom.moon b/root/games/plonat_atek/pictures/text$moonscript -> fn -> mmm$dom.moon
index dfa03eb..4938596 100644
--- a/root/games/plonat_atek/pictures/text$moonscript -> fn -> mmm$dom.moon
+++ b/root/games/plonat_atek/pictures/text$moonscript -> fn -> mmm$dom.moon
@@ -7,6 +7,7 @@ import embed from (require 'mmm.mmmfs.util') require 'mmm.dom'
       style: {
         height: '15em'
         margin: '0 .5em'
+        flex: '1 0 auto'
       }
     }
 
diff --git a/root/games/plonat_atek/text$markdown.md b/root/games/plonat_atek/text$markdown.md
index 63daec9..fe6879f 100644
--- a/root/games/plonat_atek/text$markdown.md
+++ b/root/games/plonat_atek/text$markdown.md
@@ -17,9 +17,12 @@ and the noise heard when the ball is lost is visible as a glitch on the oscillos
 
 <mmm-embed nolink path="video"></mmm-embed>
 
+## Awards and Exhibitions
+*Plonat Atek* was awarded first place in the *Innovation* category, 8th in *Audio* and 24th overall at the *Ludum Dare 38 Compo* in 2017.
+The project has been exhibited at *A MAZE. Berlin 2018* and *Maker Faire Rome 2019*.
+
 ## History
 *Plonat Atek* was originally developed in 48 hours for the *Ludum Dare 38 Compo* in June 2017.
-It was awarded first place in the *Innovation* category and was placed 8th in *Audio* and 24th overall.
 You can find the original submission [here][ld] and documentation on how to download and run the jam version on the [itch.io page][itch].
 
 Articles on the game accompanied by the video recording above have been published by [Hackaday][hackaday], [VICE Motherboard][motherboard] and others.
diff --git a/root/portfolio/text$moonscript -> mmm$dom.moon b/root/portfolio/text$moonscript -> mmm$dom.moon
index 4bbab69..5a1de7f 100644
--- a/root/portfolio/text$moonscript -> mmm$dom.moon
+++ b/root/portfolio/text$moonscript -> mmm$dom.moon
@@ -37,7 +37,7 @@ projects = {
         li text 'HLSL shader palette system'
       }
       href: 'https://vectronom.arte.tv'
-      media: embed_vid '/portfolio/vectronom/media:%20video$webm.webm'
+      media: embed_vid '/portfolio/vectronom/media:video/webm'
       tags: :cs, :professional, :js, :shader, :game
     }
     {
@@ -92,7 +92,7 @@ projects = {
         }
       }
       href: 'https://rise.tech'
-      media: embed_img '/portfolio/rise/media:%20image$png.png'
+      media: embed_img '/portfolio/rise/media:image/png'
       tags: :professional, :js, :tool
     }
     {
@@ -119,7 +119,7 @@ projects = {
         }
       }
       href: 'https://loremipsum.s-ol.nu/'
-      media: embed_img '/portfolio/lorem_ipsum/media:%20image$jpeg.jpg'
+      media: embed_img '/portfolio/lorem_ipsum/media:image/jpeg'
       tags: :professional, :js, :collab, :game
     }
     {
@@ -132,8 +132,8 @@ projects = {
         'communication via OSC/USB'
         'individually programmable daughterboards'
       }
-      href: '/projects/btrktrl'
-      media: embed_img '/projects/btrktrl/pcb_glamour_top/image$jpeg.jpg'
+      href: '/projects/btrktrl/'
+      media: embed_img '/projects/btrktrl/pcb_glamour_top/:image/jpeg'
       tags: :hardware, :tool, :cpp
     }
     {
@@ -144,8 +144,8 @@ projects = {
         'block-based language for MIDI-music reactivity'
         'implemented in openFrameworks/C++'
       }
-      href: '/projects/VJmidiKit'
-      media: embed_vid '/portfolio/VJmidiKit/media:%20video$mp4.mp4'
+      href: '/projects/VJmidiKit/'
+      media: embed_vid '/portfolio/VJmidiKit/media:video/mp4'
       tags: :tool, :cpp, :shader
     }
     {
@@ -156,8 +156,8 @@ projects = {
         'touch-panel UI and control software with node, electron and react'
         'interfaces with analog potentiometers, keypad matrix, switches'
       }
-      href: '/games/IYNX'
-      media: embed_img '/games/IYNX/pictures/ui_menu/image$jpeg.jpg'
+      href: '/games/IYNX/'
+      media: embed_img '/games/IYNX/pictures/ui_menu/:image/jpeg'
       tags: :collab, :game, :js, :hardware
     }
     {
@@ -169,8 +169,8 @@ projects = {
         'runs on a Raspberry Pi Zero in a custom case with hardware controls'
         "1st place in Innovation, LudumDare 38 Compo"
       }
-      href: '/games/plonat_atek'
-      media: embed_img '/games/plonat_atek/pictures/amaze/image$jpeg.jpg'
+      href: '/games/plonat_atek/'
+      media: embed_img '/games/plonat_atek/pictures/amaze/:image/jpeg'
       tags: :artistic, :game, :hardware
     }
     {
@@ -186,8 +186,8 @@ projects = {
           }
         }
       }
-      href: '/projects/iii-telefoni'
-      media: embed_img '/projects/iii-telefoni/heads/image$jpeg.jpg'
+      href: '/projects/iii-telefoni/'
+      media: embed_img '/projects/iii-telefoni/heads/:image/jpeg'
       tags: :artistic, :game, :js
     }
     {
@@ -199,7 +199,7 @@ projects = {
         "8 encoders with RGB lighting"
         "digtally controls a 8x8 switching matrix and 8 channels of volume modulation"
       }
-      media: embed_img '/portfolio/1u-mod/media:%20image$jpeg.jpg'
+      media: embed_img '/portfolio/1u-mod/media:image/jpeg'
       tags: :collab, :hardware, :cpp
     }
     {
@@ -213,8 +213,8 @@ projects = {
         li text 'client/server polymorphic UI framework'
         li text 'built-in server-side rendering and interactive editing support'
       }
-      -- href: '/articles/mmmfs'
-      media: embed_img '/portfolio/mmm/media:%20image$png.png'
+      href: '/articles/mmmfs/'
+      media: embed_img '/portfolio/mmm/media:image/png'
       tags: :tool, :lua
     }
     {
@@ -226,7 +226,7 @@ projects = {
         "interactive MIDI controls for the effect for performing it on stage"
       }
       href: 'https://chimpanzeebukkaque.bandcamp.com/releases'
-      media: embed_img '/portfolio/visualist/media:%20image$jpeg.jpg'
+      media: embed_img '/portfolio/visualist/media:image/jpeg'
       tags: :collab, :artistic, :cpp, :hardware, :shader
     }
   }
diff --git a/root/workshops/$order b/root/workshops/$order
new file mode 100644
index 0000000..d74b9f3
--- /dev/null
+++ b/root/workshops/$order
@@ -0,0 +1,3 @@
+xy-music
+shaders
+creative-coding
diff --git a/root/workshops/creative-coding/description: text$plain b/root/workshops/creative-coding/description: text$plain
new file mode 100644
index 0000000..5b53cf4
--- /dev/null
+++ b/root/workshops/creative-coding/description: text$plain
@@ -0,0 +1 @@
+creative coding for web developers
diff --git a/root/workshops/creative-coding/text$markdown.md b/root/workshops/creative-coding/text$markdown.md
new file mode 100644
index 0000000..8d6bf76
--- /dev/null
+++ b/root/workshops/creative-coding/text$markdown.md
@@ -0,0 +1,34 @@
+# creative coding for web developers
+This is a workshop i am currently preparing.
+If you are interested in having this workshop be held at your institution,
+please contact me!
+
+## topics
+In this workshop I will introduce the topic of *creative coding*, present some
+inspiration and examples, as well as teach the basics of the JavaScript canvas
+API for creating artistic animations and other creative projects such as
+the following:
+
+<mmm-embed nolink path="../../projects/demoloops/toroid"></mmm-embed>
+<mmm-embed nolink path="../../projects/demoloops/twisted"></mmm-embed>
+
+* <mmm-link path="../../experiments/center_of_mass">experiment: aligning fonts by their center of mass</mmm-link>
+* <mmm-link path="../../experiments/parallax_panels">experiment: parallax SVG viewer</mmm-link>
+
+The workshop is designed to accompany an 'industry-focused' course in web development,
+and aims to deliver some wider perspective over the possibilities and creative use of
+technology to participants. The following topics are covered:
+
+- what is creative coding?
+- creative coding frameworks
+- the canvas API
+  - drawing basic shapes
+  - colors
+  - input events
+- animation
+  - `requestAnimationFrame`
+  - easing functions
+- online creative coding communities
+
+The exact topics and structure can be adjusted based on the course runtime and
+level of the participants' experience.
diff --git a/root/workshops/shaders/description: text$plain b/root/workshops/shaders/description: text$plain
new file mode 100644
index 0000000..d3e92b1
--- /dev/null
+++ b/root/workshops/shaders/description: text$plain
@@ -0,0 +1 @@
+(procedural) graphics with math and shaders
diff --git a/root/workshops/shaders/text$markdown.md b/root/workshops/shaders/text$markdown.md
new file mode 100644
index 0000000..cea0001
--- /dev/null
+++ b/root/workshops/shaders/text$markdown.md
@@ -0,0 +1,31 @@
+# (procedural) graphics with math and shaders
+This is a workshop i am currently preparing.
+If you are interested in having this workshop be held at your institution,
+please contact me!
+
+## topics
+In this workshop I will cover the principles and tricks behind procedural
+graphics and animations like the following examples:
+
+<mmm-embed nolink path="../../projects/demoloops/toroid"></mmm-embed>
+<mmm-embed nolink path="../../projects/VJmidiKit/boxy_dnb"></mmm-embed>
+<mmm-embed nolink path="../../projects/VJmidiKit/kaleidoscope"></mmm-embed>
+<mmm-embed nolink path="../../projects/demoloops/twisted"></mmm-embed>
+
+I plan to introduce the participants to the following topics:
+
+- what are procedural graphics?
+- what are shaders?
+- drawing a circle (with math)
+- transforming space
+  - moving, scaling, rotating
+  - mirroring, repeating, fractals
+  - bending space
+- procedural animation
+  - tweaking motion
+  - easing functions
+- signed distance fields and raymarching
+- basic lighting
+
+The exact topics and structure can be adjusted based on the course runtime and
+level of the participants' experience.
diff --git a/root/workshops/text$moonscript -> fn -> mmm$dom.moon b/root/workshops/text$moonscript -> fn -> mmm$dom.moon
new file mode 100644
index 0000000..372a96f
--- /dev/null
+++ b/root/workshops/text$moonscript -> fn -> mmm$dom.moon
@@ -0,0 +1,10 @@
+import div, h3, ul, li, p from require 'mmm.dom'
+import link_to from (require 'mmm.mmmfs.util') require 'mmm.dom'
+
+=>
+  div {
+    h3 link_to @
+    ul for child in *@children
+      desc = child\gett 'description: mmm/dom'
+      li (link_to child, desc)
+  }
diff --git a/root/workshops/title: text$plain b/root/workshops/title: text$plain
new file mode 100644
index 0000000..314277d
--- /dev/null
+++ b/root/workshops/title: text$plain
@@ -0,0 +1 @@
+workshops and teaching
diff --git a/root/workshops/xy-music/$order b/root/workshops/xy-music/$order
new file mode 100644
index 0000000..e4e7469
--- /dev/null
+++ b/root/workshops/xy-music/$order
@@ -0,0 +1 @@
+slides
diff --git a/root/workshops/xy-music/description: text$plain b/root/workshops/xy-music/description: text$plain
new file mode 100644
index 0000000..71ea88e
--- /dev/null
+++ b/root/workshops/xy-music/description: text$plain
@@ -0,0 +1 @@
+oscilloscope music and games with pure data
diff --git a/root/articles/xy-workshop/$order b/root/workshops/xy-music/slides/$order
index 4600622..4600622 100644
--- a/root/articles/xy-workshop/$order
+++ b/root/workshops/xy-music/slides/$order
diff --git a/root/articles/xy-workshop/01/text$html+frag.html b/root/workshops/xy-music/slides/01/text$html+frag.html
index 2441f62..2441f62 100644
--- a/root/articles/xy-workshop/01/text$html+frag.html
+++ b/root/workshops/xy-music/slides/01/text$html+frag.html
diff --git a/root/articles/xy-workshop/01b/text$markdown.md b/root/workshops/xy-music/slides/01b/text$markdown.md
index 22c1454..22c1454 100644
--- a/root/articles/xy-workshop/01b/text$markdown.md
+++ b/root/workshops/xy-music/slides/01b/text$markdown.md
diff --git a/root/articles/xy-workshop/01c/$order b/root/workshops/xy-music/slides/01c/$order
index 2b68b52..2b68b52 100644
--- a/root/articles/xy-workshop/01c/$order
+++ b/root/workshops/xy-music/slides/01c/$order
diff --git a/root/articles/xy-workshop/01c/text$markdown.md b/root/workshops/xy-music/slides/01c/text$markdown.md
index ba5718c..ba5718c 100644
--- a/root/articles/xy-workshop/01c/text$markdown.md
+++ b/root/workshops/xy-music/slides/01c/text$markdown.md
diff --git a/root/articles/xy-workshop/01c/video/URL -> youtube$video b/root/workshops/xy-music/slides/01c/video/URL -> youtube$video
index bf07555..bf07555 100644
--- a/root/articles/xy-workshop/01c/video/URL -> youtube$video
+++ b/root/workshops/xy-music/slides/01c/video/URL -> youtube$video
diff --git a/root/articles/xy-workshop/02/text$markdown.md b/root/workshops/xy-music/slides/02/text$markdown.md
index 3496b23..3496b23 100644
--- a/root/articles/xy-workshop/02/text$markdown.md
+++ b/root/workshops/xy-music/slides/02/text$markdown.md
diff --git a/root/articles/xy-workshop/03/text$markdown.md b/root/workshops/xy-music/slides/03/text$markdown.md
index c90491e..c90491e 100644
--- a/root/articles/xy-workshop/03/text$markdown.md
+++ b/root/workshops/xy-music/slides/03/text$markdown.md
diff --git a/root/articles/xy-workshop/04/text$markdown.md b/root/workshops/xy-music/slides/04/text$markdown.md
index e07fbca..e07fbca 100644
--- a/root/articles/xy-workshop/04/text$markdown.md
+++ b/root/workshops/xy-music/slides/04/text$markdown.md
diff --git a/root/articles/xy-workshop/05/text$markdown.md b/root/workshops/xy-music/slides/05/text$markdown.md
index 256c654..256c654 100644
--- a/root/articles/xy-workshop/05/text$markdown.md
+++ b/root/workshops/xy-music/slides/05/text$markdown.md
diff --git a/root/articles/xy-workshop/06/text$markdown.md b/root/workshops/xy-music/slides/06/text$markdown.md
index fa5b139..fa5b139 100644
--- a/root/articles/xy-workshop/06/text$markdown.md
+++ b/root/workshops/xy-music/slides/06/text$markdown.md
diff --git a/root/articles/xy-workshop/07/text$markdown.md b/root/workshops/xy-music/slides/07/text$markdown.md
index 518b9fb..518b9fb 100644
--- a/root/articles/xy-workshop/07/text$markdown.md
+++ b/root/workshops/xy-music/slides/07/text$markdown.md
diff --git a/root/articles/xy-workshop/08/$order b/root/workshops/xy-music/slides/08/$order
index 773b222..773b222 100644
--- a/root/articles/xy-workshop/08/$order
+++ b/root/workshops/xy-music/slides/08/$order
diff --git a/root/articles/xy-workshop/08/image/image$png.png b/root/workshops/xy-music/slides/08/image/image$png.png
index ff82a9d..ff82a9d 100644
--- a/root/articles/xy-workshop/08/image/image$png.png
+++ b/root/workshops/xy-music/slides/08/image/image$png.png
diff --git a/root/articles/xy-workshop/08/text$markdown.md b/root/workshops/xy-music/slides/08/text$markdown.md
index 92ab316..92ab316 100644
--- a/root/articles/xy-workshop/08/text$markdown.md
+++ b/root/workshops/xy-music/slides/08/text$markdown.md
diff --git a/root/articles/xy-workshop/text$moonscript -> fn -> mmm$dom.moon b/root/workshops/xy-music/slides/text$moonscript -> fn -> mmm$dom.moon
index 701a14c..701a14c 100644
--- a/root/articles/xy-workshop/text$moonscript -> fn -> mmm$dom.moon
+++ b/root/workshops/xy-music/slides/text$moonscript -> fn -> mmm$dom.moon
diff --git a/root/workshops/xy-music/text$markdown.md b/root/workshops/xy-music/text$markdown.md
new file mode 100644
index 0000000..3f4f09c
--- /dev/null
+++ b/root/workshops/xy-music/text$markdown.md
@@ -0,0 +1,41 @@
+# oscilloscope music and games with pure data
+
+<mmm-embed wrap="raw" path="../../games/plonat_atek/pictures/amaze" /></mmm-embed>
+
+This is a workshop I gave at [Maker Faire Rome 2019][mfr].
+For more information on my work on this topic, also see my Oscilloscope Game <mmm-link path="../../games/plonat_atek"></mmm-link>.
+
+## description
+
+> In this workshop we will learn how to view and listen to Oscilloscope Music, how it works, and how to create your own Oscilloscope Music using PureData.
+> Please bring a laptop and headphones to participate.
+> 
+> Oscilloscope Music is music produced in such a way, that when the stereo signal is applied to an Oscilloscope screen,
+> the same signals that are heard create a visual animation.
+> 
+> You can see some examples of Oscilloscope Music created by Jerobeam Fenderson here:
+> 
+> - https://www.youtube.com/watch?v=rtR63-ecUNo
+> - https://oscilloscopemusic.com/
+> 
+> In this workshop, we will cover the following:
+>
+> - What is Oscilloscope Music?
+> - How do Oscilloscopes work?
+> - How do Speakers and Audio Waves work?
+> - Simulating an Oscilloscope on your laptop
+> - Creating Oscilloscope Sounds using the PureData visual programming language
+> 
+> No special experience is required for this workshop.
+> Please bring a laptop and headphones!
+> If you are using an Operating System other than Windows and Mac OS X, please install "purr-data" before the workshop.
+
+## slides
+
+focus the slide area with the mouse and hit 'r' to adjust the content scaling.
+optimized for 1080p projectors.
+
+<mmm-embed wrap="raw" path="slides"></mmm-embed>
+
+[mfr]: https://2019.makerfairerome.eu/en/events-en/?ids=110
+