add xy-workshop
s-ol
3 years ago
| 0 | <div style="margin-top: 4em"> | |
| 1 | <h2>Oscilloscope Music and Games with Pure Data</h2> | |
| 2 | <br /> | |
| 3 | <br /> | |
| 4 | <br /> | |
| 5 | <p>sol bekic, 2019</p> | |
| 6 | </div> |
| 0 | who am i? | |
| 1 | ========= | |
| 2 | ||
| 3 | my name is sol, | |
| 4 | i like to program, build hardware and play with technology. | |
| 5 | ||
| 6 | - github: @s-ol | |
| 7 | - mastodon: @s-ol\@merveilles.town | |
| 8 | - twitter: @S0lll0s | |
| 9 | - links to all of those, email, and more info: | |
| 10 | https://s-ol.nu | |
| 11 |
| 0 | what am i going to talk about? | |
| 1 | ============================== | |
| 2 | Plonat Atek - E317 - B14 / Pavillon 6 | |
| 3 | ||
| 4 | <iframe width="1220" height="630" frameborder="0" src="//www.youtube.com/embed/SIQAk9_nc-s"></iframe> |
| 0 | https://www.youtube.com/watch?v=SIQAk9_nc-s |
| 0 | what am i going to talk about? | |
| 1 | ============================== | |
| 2 | ||
| 3 | <br /> | |
| 4 | ||
| 5 | - sound + scopes | |
| 6 | - what is sound? | |
| 7 | - what is an oscilloscope? | |
| 8 | - pd + the audiovisual | |
| 9 | - osc~ + output~ | |
| 10 | - numbers boxes + sliders | |
| 11 | - lissajous figures + sync |
| 0 | what is sound? | |
| 1 | ============== | |
| 2 | <br /> | |
| 3 | ||
| 4 | - *vibrations* in the air | |
| 5 | - movement of your ear drum | |
| 6 | - movement of a speaker membrane | |
| 7 | - numbers in a file on your computer | |
| 8 | ||
| 9 | what do they all have in common? | |
| 10 | - something is *changing over time* | |
| 11 | - a wave! |
| 0 | what is sound? | |
| 1 | ============== | |
| 2 | ||
| 3 | waves are *something* changing over time: | |
| 4 | ||
| 5 | - in the air: pressure (in one spot) | |
| 6 | - ear drum and speakers: distance from normal position | |
| 7 | - audio cable: voltage over time | |
| 8 | - sound file: number over time |
| 0 | what is sound? | |
| 1 | ============== | |
| 2 | ||
| 3 | attributes of waves: | |
| 4 | ||
| 5 | | waves <div style="display: inline-block; width: 50px;"></div> | sounds <div style="display: inline-block; width: 10px;"></div> | | | |
| 6 | |-------------|--------------------|----------------------------------| | |
| 7 | | `amplitude` | `volume` | how far does the wave fluctuate? | | |
| 8 | | `frequency` | `pitch` | how often does the wave repeat? | | |
| 9 | | `shape` | `timbre` | (literally just the shape) | | |
| 10 | ||
| 11 | ...let's look at + hear some examples! |
| 0 | on computers, sound is stored as a list of `samples`: | |
| 1 | ||
| 2 | - `sample rate`: how many samples per second are recorded | |
| 3 | - `sample size` or `bit depth`: how accurate is each sample | |
| 4 | ||
| 5 |  |
| 0 | what is an oscilloscope? | |
| 1 | ======================== | |
| 2 | ||
| 3 | - machine for measuring and visualizing electronic waves (voltage) | |
| 4 | ||
| 5 |  |
Binary diff not shown
| 0 | what is an oscilloscope? | |
| 1 | ======================== | |
| 2 | ||
| 3 |  |
| 0 | import ReactiveVar, tohtml, fromhtml, text, elements from require 'mmm.component' | |
| 1 | import article, button, div, span from elements | |
| 2 | ||
| 3 | => | |
| 4 | index = ReactiveVar 1 | |
| 5 | slide = index\map (index) -> @children[index] | |
| 6 | ||
| 7 | local view | |
| 8 | view = div { | |
| 9 | style: | |
| 10 | position: 'relative' | |
| 11 | 'padding-top': '56.25%' | |
| 12 | ||
| 13 | div { | |
| 14 | style: | |
| 15 | position: 'absolute' | |
| 16 | display: 'flex' | |
| 17 | 'flex-direction': 'column' | |
| 18 | top: 0 | |
| 19 | left: 0 | |
| 20 | right: 0 | |
| 21 | bottom: 0 | |
| 22 | padding: '1em' | |
| 23 | background: '#eeeeee' | |
| 24 | 'box-sizing': 'border-box' | |
| 25 | ||
| 26 | slide\map => @get 'mmm/dom' | |
| 27 | } | |
| 28 | } | |
| 29 | ||
| 30 | local left, right, viewNode | |
| 31 | if MODE == 'CLIENT' | |
| 32 | left = (_, e) -> | |
| 33 | e\preventDefault! | |
| 34 | index\transform (a) -> math.max 1, a - 1 | |
| 35 | ||
| 36 | right = (_, e) -> | |
| 37 | e\preventDefault! | |
| 38 | index\transform (a) -> math.min #@children, a + 1 | |
| 39 | ||
| 40 | viewNode = tohtml view | |
| 41 | viewNode.tabIndex = 1 | |
| 42 | viewNode\addEventListener 'keydown', (_, e) -> | |
| 43 | switch e.key | |
| 44 | when 'r' | |
| 45 | e\preventDefault! | |
| 46 | size = viewNode.offsetHeight / 15 | |
| 47 | viewNode.style.fontSize = "#{size}px" | |
| 48 | ||
| 49 | when 'ArrowLeft' | |
| 50 | left _, e | |
| 51 | when 'ArrowRight' | |
| 52 | right _, e | |
| 53 | ||
| 54 | tohtml with article! | |
| 55 | \append div { | |
| 56 | style: | |
| 57 | display: 'flex' | |
| 58 | ||
| 59 | button '<', onclick: left | |
| 60 | ' ' | |
| 61 | span index\map (t) -> text t | |
| 62 | ' ' | |
| 63 | button '>', onclick: right | |
| 64 | div style: flex: '1' | |
| 65 | button 'fullscreen', onclick: (_, e) -> | |
| 66 | e\preventDefault! | |
| 67 | viewNode\requestFullscreen! | |
| 68 | } | |
| 69 | \append view |