owned this note
owned this note
Published
Linked with GitHub
# Hydra synth
There are five types of functions in hydra: [source](##Sources), [geometry](##Geometry), [color](##Color), [blend](##Blend), and [modulate](##Modulate). Hydra functions generally start with a [source](##Sources) function, followed by transformations to geometry and color, blending and modulation. See Getting Started for more information.
<!--<iframe style="width:120%;height:600px;border:none" src="https://hydra.ojack.xyz/api/#functions/repeatX/0">
</iframe>--->
## Sources
### osc
```javascript
osc(6, 0.05, 0.8).out()
// osc( frequency = 60, sync = 0.1, offset = 0 )
```
### noise
### voronoi
### shape
### gradient
### src
### solid
## Geometry
### rotate
### scale
### pixelate
### repeat
### repeatX
### repeatY
### kaleid
### scroll
### scrollX
### scrollY
## Color
### posterize
### shift
### invert
### contrast
### brightness
### luma
### thresh
### color
### saturate
### hue
### colorama
### sum
## Blend
You can use blend functions to combine multiple visual sources. `.blend()` combines the colors from two sources to create a third source.
...
## Modulate
While blend functions combine the colors from two visual sources, modulate functions use the colors from one source to affect the geometry of the second source. This creates a sort of warping or distorting effect. An analogy in the real world would be looking through a texture glass window. `modulate()` does not change color or luminosity but distorts one visual source using another visual source.
...
# Using External Sources
### initCam
```javascript
s0.initCam()
s0.initCam(2) // if you have many cameras, you can select one specifically
```
### initScreen
```javascript
s0.initScreen()
```
### initImage
```javascript
s0.initImage("https://www.somewebpage.org/urlto/image.jpg")
```
When running Hydra in Atom, or any other local manner, you can load local files referring to them by URI:
```javascript
s0.initImage("file:///home/user/Images/image.png")
```
supported formats: `.jpeg`, `.png`, `.bmp` as well as `.gif` and `.webp` (although animation won't work).
### initVideo
```javascript
s0.initVideo("https://www.somewebpage.org/urlto/video.mp4")
```
supported formats: `.mp4`, `.ogg`, `.webm`
### initStream
### init
# Multiple outputs
By default, hydra contains four separate virtual outputs that can each render different visuals, and can be mixed with each other to create more complex visuals. The variables `o0`, `o1`, `o2`, and `o3` correspond to the different outputs.
To see all four of the outputs at once, use the `render()` function. This will divide the screen into four, showing each output in a different section of the screen.
Using a different variable inside the `.out()` function renders the chain to a different output. For example, `.out(o1)` will render a function chain to graphics buffer `o1`.
```hydra
gradient(1).out(o0) // render a gradient to output o0
osc().out(o1) // render voronoi to output o1
voronoi().out(o2) // render voronoi to output o2
noise().out(o3) // render noise to output o3
render() // show all outputs
```
By default, only output `o0` is rendered to the screen, while the `render()` command divides the screen in four. Show a specific output on the screen by adding it inside of `render()`, for example `render(o2)` to show buffer `o2`.
```hydra
gradient(1).out(o0) // render a gradient to output o0
osc().out(o1) // render voronoi to output o1
voronoi().out(o2) // render voronoi to output o2
noise().out(o3) // render noise to output o3
render(o2) // show only output o2
```
### .out()
### render()
Note: in addition to using multiple outputs to combine visuals, you can also combine multiple sources within the same function chain, without rendering them to separate outputs.
```hydra
osc(10, 0.1, 1.2).blend(noise(3)).out(o0)
render(o0) // render output o0
```
# Sequencing and Interactivity
....
## Arrays
When you send an Array as an input, Hydra will automatically switch and jump from each element from the Array to the next one. When there are no more elements, it wraps all the way back to the beginning. Let's see it in action:
```hydra
osc([20,30,50,60],.1,[0,1.5])
.out()
```
### fast
Hydra adds a couple of methods to all Arrays to be used inside Hydra. `.fast` will control the speed at which Hydra takes elements from the Array. It receives a Number as argument, by which the global speed will be multiplied. So calling `.fast(1)` on an Array is the same as nothing. Higher values will generate faster switching, while lower than 1 values will be slower.
```hydra
bpm = 45
osc([20,30,50,60],.1,[0,1.5].fast(1.5)) // 50% faster
//.rotate([-.2,0,.2].fast(1)) // try different speeds for each array
.out()
```
### smooth
Interpolating between values
You can also interpolate between values instead of jumping from one to the other. That is, smoothly transition between values. For this you can use the `.smooth` method. It may take a Number argument (defaulted to 1) which controls the smoothness.
```hydra
bpm = 50
arr = [0,0.8,2]
osc(50,.1,arr.smooth())
.rotate(arr.fit(-Math.PI/4,Math.PI/4).smooth())
.out()
```
### ease
The default interpolation used by Hydra on an Array that called `.smooth` is linear interpolation. You can select a different easing function as follows:
```hydra
bpm = 50
arr = [0,0.8,2]
osc(50,.1,arr.ease('easeInQuad'))
.rotate(arr.fit(-Math.PI/4,Math.PI/4).ease('easeOutQuad'))
.out() // try other easing functions !
```
The following are the available easing functions:
* linear: no easing, no acceleration
* easeInQuad: accelerating from zero velocity
* easeOutQuad: decelerating to zero velocity
* easeInOutQuad: acceleration until halfway, then deceleration
* easeInCubic
* easeOutCubic
* easeInOutCubic
* easeInQuart
* easeOutQuart
* easeInOutQuart
* easeInQuint
* easeOutQuint
* easeInOutQuint
* sin: sinusoidal shape
*
### offset
Another one of the methods Hydra adds to Arrays, allows you to offset the timing at which Hydra will switch from one element of the Array to the next one. The method `.offset` takes a Number from 0 to 1.
```hydra
bpm = 45
osc([20,30,50,60],.1,[0,1.5].offset(.5)) // try changing the offset
.out()
```
### fit
Fitting the values of an Array within a range
Sometimes you have an Array whose values aren't very useful when used as input for a some Hydra function.
Hydra adds a `.fit` method to Arrays which takes a minimum and a maximum to which fit the values into:
```hydra
bpm = 120
arr = ()=> [1,2,4,8,16,32,64,128,256,512]
osc(50,.1,arr().fit(0,Math.PI))
.scale(arr().fit(1,2))
.out()
```
Array example:
```hydra
bpm = 40
src(o0)
.scale([1,1.02])
.layer(osc(9,.1,2).mask(shape(4,.3,0)))
.out(o0)
osc(30,.1,[0,1.5].fast(1.5))
.diff(shape(16,[0,.3],.1))
.out(o1)
osc()
.rotate([1,4,2,5,3].fit(0,3.14).smooth())
.out(o2)
sh = ()=> [.2,.5,.7,.8].ease('easeInQuart')
noise(2)
.shift(sh()
,sh().offset(1/3)
,sh().offset(2/3))
.out(o3)
render()
```
## Custom Functions
Each parameter can be defined as a function rather than a static variable. When Hydra takes a function as an argument, it will evaluate that function every time a new frame is rendered. The return of the function will be used as the value for that parameter during that frame render. So you can use a function to simply keep track of a value that you know will change over time, for example, mouse position (which we'll see later). Hydra has several globally-defined variables that are helpful in writing your own functions: mouse (keeps track of mouse position), width, height, and time
## mouse
```hydra
gradient()
.hue(()=>mouse.x/3000)
.scale(1,1,()=>mouse.y/2000)
.out(o0)
```
### width
### height
## time
When you use functions that can take numerical arguments, `time` will allow you to have their values evolve through... time. If you multiply time by some value it's as if time goes faster, while dividing while act as making time go slower. For example `Math.sin(time*4)` will go 4 times faster than `Math.sin(time)`.
```hydra
voronoi(5,.1,()=>Math.sin(time*4))
.out()
```
Those users more familiar with mathematics might see this as:
* `y(t) = t` : `()=>time`
* `y(t) = A sin(f t + ph)` : `()=>amplitude*Math.sin(freq*time + phase)`
We recommend getting familiar with some of the methods in the JS built-in `Math` object. Learn more about it [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math)
Further explanation in the [advanced guide](guides/advanced#functions).
## Audio
Audio-reactive functionality is available via an audio object accessed via "a". The editor uses https://github.com/meyda/meyda for audio analysis.
### show
To show the realtime audio analysis, run the following:
```javascript
a.show() // show what hydra's listening to
```
### hide
This will show a small graphic on the lower right corner of the screen. To hide, run:
```javascript
a.hide()
```
### fft
```javascript
noise(2)
.modulate(o0,()=>a.fft[1]*.5) // listening to the 2nd band
.out()
```
### setSmooth
```javascript
a.setSmooth(.8) // audio reactivity smoothness from 0 to 1, uses linear interpolation
```
### setCutoff
```javascript
a.setCutoff(4) // loudness from which to start listening to (maps to 0)
```
### setScale
```javascript
a.setScale(8) // loudness upper limit (maps to 0)
```
### setBins
```javascript
a.setBins(5) // amount of bins (bands) to separate the audio spectrum
```
# Configuring the synth
### setResolution
### speed
### bpm
### update
```hydra
toggle = 0; rotation = .01
src(o0)
.scale(1.017)
.rotate(()=>rotation)
.layer(
osc(10,.25,2)
.mask(shape(4,.2))
.mult(solid(0,0,0,0),()=>1-toggle)
)
.out()
frameCount = 0
update = (dt) => {
toggle = 0
if(frameCount % 120 == 0){
toggle = 1; rotation *= -1;
}
frameCount++
}
```
Further explanation in the [advanced guide](guides/advanced#using-the-update-function).
### hush
use `hush()` to reset hydra
```hydra
hush()
// fps, bpm and speed won't be reset to their defaults by calling hush
// their defaults are: fps = undefined, bpm = 30, speed = 1
```
### setFunction
# External Libraries
### loadScript
The `await loadScript()` function lets you load other packaged javascript libraries within the hydra editor. Any javascript code can run in the hydra editor.
Here is an example using Three.js from the web editor:
```javascript
await loadScript("https://threejs.org/build/three.js")
scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
renderer = new THREE.WebGLRenderer()
renderer.setSize(width, height)
geometry = new THREE.BoxGeometry()
material = new THREE.MeshBasicMaterial({color: 0x00ff00})
cube = new THREE.Mesh(geometry, material);
scene.add(cube)
camera.position.z = 1.5
// 'update' is a reserved function that will be run every time the main hydra rendering context is updated
update = () => {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
s0.init({ src: renderer.domElement })
src(s0).repeat().out()
```
And here is an example loading the Tone.js library:
```javascript
await loadScript("https://unpkg.com/tone")
synth = new Tone.Synth().toDestination();
synth.triggerAttackRelease("C4", "8n");
```
# Streaming using WebRTC
...
Google Drive
Gist
Clipboard
Sign in with Wallet
