add xy-workshop

14 files changed, 158 insertions, 0 deletions

diff --git a/root/articles/xy-workshop/01/text$html+frag.html b/root/articles/xy-workshop/01/text$html+frag.html
new file mode 100644
index 0000000..2441f62
--- /dev/null
+++ b/root/articles/xy-workshop/01/text$html+frag.html
@@ -0,0 +1,7 @@
+<div style="margin-top: 4em">
+  <h2>Oscilloscope Music and Games with Pure Data</h2>
+  <br />
+  <br />
+  <br />
+  <p>sol bekic, 2019</p>
+</div>
diff --git a/root/articles/xy-workshop/01b/text$markdown.md b/root/articles/xy-workshop/01b/text$markdown.md
new file mode 100644
index 0000000..22c1454
--- /dev/null
+++ b/root/articles/xy-workshop/01b/text$markdown.md
@@ -0,0 +1,12 @@
+who am i?
+=========
+
+my name is sol,  
+i like to program, build hardware and play with technology.
+
+- github: @s-ol
+- mastodon: @s-ol\@merveilles.town
+- twitter: @S0lll0s
+- links to all of those, email, and more info:  
+  https://s-ol.nu
+
diff --git a/root/articles/xy-workshop/01c/text$markdown.md b/root/articles/xy-workshop/01c/text$markdown.md
new file mode 100644
index 0000000..ba5718c
--- /dev/null
+++ b/root/articles/xy-workshop/01c/text$markdown.md
@@ -0,0 +1,5 @@
+what am i going to talk about?
+==============================
+Plonat Atek - E317 - B14 / Pavillon 6
+
+<iframe width="1220" height="630" frameborder="0" src="//www.youtube.com/embed/SIQAk9_nc-s"></iframe>
diff --git a/root/articles/xy-workshop/01c/video/URL -> youtube$video b/root/articles/xy-workshop/01c/video/URL -> youtube$video
new file mode 100644
index 0000000..bf07555
--- /dev/null
+++ b/root/articles/xy-workshop/01c/video/URL -> youtube$video
@@ -0,0 +1 @@
+https://www.youtube.com/watch?v=SIQAk9_nc-s
diff --git a/root/articles/xy-workshop/02/text$markdown.md b/root/articles/xy-workshop/02/text$markdown.md
new file mode 100644
index 0000000..3496b23
--- /dev/null
+++ b/root/articles/xy-workshop/02/text$markdown.md
@@ -0,0 +1,12 @@
+what am i going to talk about?
+==============================
+
+<br />
+
+- sound + scopes
+  - what is sound?
+  - what is an oscilloscope?
+- pd + the audiovisual
+  - osc~ + output~
+  - numbers boxes + sliders
+  - lissajous figures + sync
diff --git a/root/articles/xy-workshop/03/text$markdown.md b/root/articles/xy-workshop/03/text$markdown.md
new file mode 100644
index 0000000..c90491e
--- /dev/null
+++ b/root/articles/xy-workshop/03/text$markdown.md
@@ -0,0 +1,12 @@
+what is sound?
+==============
+<br />
+
+- *vibrations* in the air
+- movement of your ear drum
+- movement of a speaker membrane
+- numbers in a file on your computer
+
+what do they all have in common?  
+- something is *changing over time*  
+  - a wave!
diff --git a/root/articles/xy-workshop/04/text$markdown.md b/root/articles/xy-workshop/04/text$markdown.md
new file mode 100644
index 0000000..e07fbca
--- /dev/null
+++ b/root/articles/xy-workshop/04/text$markdown.md
@@ -0,0 +1,9 @@
+what is sound?
+==============
+
+waves are *something* changing over time:
+
+- in the air: pressure (in one spot)
+- ear drum and speakers: distance from normal position
+- audio cable: voltage over time
+- sound file: number over time
diff --git a/root/articles/xy-workshop/05/text$markdown.md b/root/articles/xy-workshop/05/text$markdown.md
new file mode 100644
index 0000000..256c654
--- /dev/null
+++ b/root/articles/xy-workshop/05/text$markdown.md
@@ -0,0 +1,12 @@
+what is sound?
+==============
+
+attributes of waves:
+
+| waves <div style="display: inline-block; width: 50px;"></div> | sounds <div style="display: inline-block; width: 10px;"></div> | |
+|-------------|--------------------|----------------------------------|
+| `amplitude` | `volume`           | how far does the wave fluctuate? |
+| `frequency` | `pitch`            | how often does the wave repeat?  |
+| `shape`     | `timbre`           | (literally just the shape)       |
+
+...let's look at + hear some examples!
diff --git a/root/articles/xy-workshop/06/text$markdown.md b/root/articles/xy-workshop/06/text$markdown.md
new file mode 100644
index 0000000..fa5b139
--- /dev/null
+++ b/root/articles/xy-workshop/06/text$markdown.md
@@ -0,0 +1,6 @@
+on computers, sound is stored as a list of `samples`:
+
+- `sample rate`: how many samples per second are recorded
+- `sample size` or `bit depth`: how accurate is each sample
+
+![](https://i0.wp.com/www.mobilebeat.com/wp-content/uploads/2017/05/Screen-Shot-2017-05-05-at-3.55.46-PM.png)
diff --git a/root/articles/xy-workshop/07/text$markdown.md b/root/articles/xy-workshop/07/text$markdown.md
new file mode 100644
index 0000000..518b9fb
--- /dev/null
+++ b/root/articles/xy-workshop/07/text$markdown.md
@@ -0,0 +1,6 @@
+what is an oscilloscope?
+========================
+
+- machine for measuring and visualizing electronic waves (voltage)
+
+![](https://www.electronics-notes.com/images/cathode-ray-tube-diagram-01.svg)
diff --git a/root/articles/xy-workshop/08/image/image$png.png b/root/articles/xy-workshop/08/image/image$png.png
new file mode 100644
index 0000000..ff82a9d
--- /dev/null
+++ b/root/articles/xy-workshop/08/image/image$png.png
diff --git a/root/articles/xy-workshop/08/text$markdown.md b/root/articles/xy-workshop/08/text$markdown.md
new file mode 100644
index 0000000..92ab316
--- /dev/null
+++ b/root/articles/xy-workshop/08/text$markdown.md
@@ -0,0 +1,4 @@
+what is an oscilloscope?
+========================
+
+![](/articles/xy-workshop/08/image/:image/png)
diff --git a/root/articles/xy-workshop/description: text$plain b/root/articles/xy-workshop/description: text$plain
new file mode 100644
index 0000000..c3fefe0
--- /dev/null
+++ b/root/articles/xy-workshop/description: text$plain
@@ -0,0 +1,2 @@
+workshop: oscilloscope music and games with pure data
+
diff --git a/root/articles/xy-workshop/text$moonscript -> fn -> mmm$dom.moon b/root/articles/xy-workshop/text$moonscript -> fn -> mmm$dom.moon
new file mode 100644
index 0000000..701a14c
--- /dev/null
+++ b/root/articles/xy-workshop/text$moonscript -> fn -> mmm$dom.moon
@@ -0,0 +1,70 @@
+import ReactiveVar, tohtml, fromhtml, text, elements from require 'mmm.component'
+import article, button, div, span from elements
+
+=>
+  index = ReactiveVar 1
+  slide = index\map (index) -> @children[index]
+
+  local view
+  view = div {
+    style:
+      position: 'relative'
+      'padding-top': '56.25%'
+
+    div {
+      style:
+        position: 'absolute'
+        display: 'flex'
+        'flex-direction': 'column'
+        top: 0
+        left: 0
+        right: 0
+        bottom: 0
+        padding: '1em'
+        background: '#eeeeee'
+        'box-sizing': 'border-box'
+
+      slide\map => @get 'mmm/dom'
+    }
+  }
+
+  local left, right, viewNode
+  if MODE == 'CLIENT'
+    left = (_, e) ->
+      e\preventDefault!
+      index\transform (a) -> math.max 1, a - 1
+
+    right = (_, e) ->
+      e\preventDefault!
+      index\transform (a) -> math.min #@children, a + 1
+
+    viewNode = tohtml view
+    viewNode.tabIndex = 1
+    viewNode\addEventListener 'keydown', (_, e) ->
+      switch e.key
+        when 'r'
+          e\preventDefault!
+          size = viewNode.offsetHeight / 15
+          viewNode.style.fontSize = "#{size}px"
+
+        when 'ArrowLeft'
+          left _, e
+        when 'ArrowRight'
+          right _, e
+
+  tohtml with article!
+    \append div {
+      style:
+        display: 'flex'
+
+      button '<', onclick: left
+      ' '
+      span index\map (t) -> text t
+      ' '
+      button '>', onclick: right
+      div style: flex: '1'
+      button 'fullscreen', onclick: (_, e) ->
+        e\preventDefault!
+        viewNode\requestFullscreen!
+    }
+    \append view