Documentation updates [WIP] #16
Conversation
|
|
||
| ## Reacting to audio | ||
|
|
||
| In order to achieve audio reactivity, Hydra makes use of a JavaScript library called Meyda and has a pre-defined object called `a` to access many of its features. Audio reactivity in Hydra is mainly achieved using an algorithm called Fast Fourier transform. You definitely don't need to know what it is or how it achieves what it does to use it, but you need to understand the following: |
There was a problem hiding this comment.
Remove comments about "what you need to know" or not know, etc.
|
|
||
| ### The audio spectrum | ||
|
|
||
| Sound travels through air as a wave, that's fairly common knowledge. This basically means that sound is nothing more than air pressure going up and down through time very fast in weird ways. But we don't experience sound simply as something that goes on and off like a light flickering, many of the sounds we are used to have some sort of frequency or repetition that we interpret as higher or lower pitch. |
There was a problem hiding this comment.
Move this explanation to the end; first explain the hydra functions
|
|
||
| ### Reacting to music | ||
|
|
||
| As we've seen, Hydra takes your microphone as an input, not your desktop audio. Those interested in using a music player or a DAW's output as an audio input will have to delve into virtual audio routing. Users with physical sound interfaces with multiple inputs and outputs might prefer physically routing an output to an input and set that input as the default microphone on Chrome. |
There was a problem hiding this comment.
Add more examples of audio-reactive sketches (could be links to the hydra editor)
There was a problem hiding this comment.
yes, i didn't take the time to add examples yet because they'd have to be links to the editor.
but i also wonder if there's a smart way of turning on the audio capture dynamically so that it only asks for microphone in this page.
i also experimented a bit trying to get docsify to load p5 only in the p5 guide
I'll keep experimenting tho !
| @@ -0,0 +1,227 @@ | |||
| # Embedding Hydra on a website | |||
| --- | |||
|
|
|||
There was a problem hiding this comment.
Add link to hydra-synth repo and to glitch example project
| ### HTML | ||
|
|
||
| To include the Hydra synth (bundled version) in your website, add the following script tag to your page's head. | ||
|
|
There was a problem hiding this comment.
Add how to use as node module 'npm install ' etc...
| @@ -0,0 +1,227 @@ | |||
| # Interactivity Guide | |||
| --- | |||
There was a problem hiding this comment.
sentence about what custom functions are. I think the mouse section should be in a broader section about custom functions / dynamic numbers (not sure what this should be called) and should be part of quick reference
There was a problem hiding this comment.
I think there should be one section that explains custom functions, time, audio, midi, and mouse inputs, and introduces arrays as a shorthand for custom functions. This should be in "Quick reference" as it is a core function of hydra. I say this because you need to understand the syntax of custom functions in order to work with mouse, interactivity. and audio. I usually explain it as something like..."anything that is a number can also be a number that changes over time. using variables and custom functions allows you to make sketches that change over time or in response to external inputs such as mouse, audio, midi, etc. "
I am not sure what the heading of this section should be though:
"Dynamic inputs"
"Interactivity"
"Variable inputs"
| --- | ||
|
|
||
| ## Saving images from Hydra | ||
|
|
| --- | ||
|
|
||
| ## Hydra's built-in recorder | ||
|
|
There was a problem hiding this comment.
remove this /// should be removed from hydra API :)
| ``` | ||
|
|
||
| ## Load images / videos / camera / screen | ||
|
|
There was a problem hiding this comment.
add "external sources" section from the guide here
| @@ -5,14 +5,14 @@ | |||
| class HydraApp extends Torus.StyledComponent { | |||
| init() { | |||
| this.canvas = document.createElement("CANVAS"); | |||
| this.canvas.width = 512; | |||
| this.canvas.height = 512; | |||
| this.canvas.width = 360; | |||
| * [Getting Started](/getting_started) | ||
| * [Quick Reference](/quick_reference) | ||
| --- | ||
| * Guides |
There was a problem hiding this comment.
Add sections from hydra book:
"Performing with hydra"
"Modulation"
"Color"
There was a problem hiding this comment.
yes! about this
i wanted to talk about it next time we met actually, but spilling some thoughts here:
guides I've written are definitely technical guides. i was thinking about how to add conceptual topics (as the ones from the hydra book), should we add them to the guides section? should there be a technical guides and a conceptual guides section? maybe there are better terms for both those sections?
excited to finish this first pass of the "technical guides" and get to the "conceptual guides" !! there's much to explore, hence the comment i made last time we met about how hydra is so unique and how exploring these sometimes obfuscated topics would be great to expand the docs and overall the bibliography around hydra
|
wondering which one you prefer: since on the editor Hydra is stylized in lowercase
|
Seeing if it is possible to add comments this way