Skip to content

Commit

Permalink
fixed broken links
Browse files Browse the repository at this point in the history
  • Loading branch information
ojack committed Nov 20, 2023
1 parent bbe4f2e commit 6c404dc
Show file tree
Hide file tree
Showing 17 changed files with 26 additions and 97 deletions.
32 changes: 18 additions & 14 deletions content/docs/learning/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,28 @@ draft: false
# learning

{{< columns >}}

## [getting started](getting-started)
step-by-step tutorial for starting to code with hydra
<!-- ### [getting started](../getting-started-short.md) -->
## [web editor](web-editor)
key commands, comments, saving sketches, loading extensions and external libraries, publishing to the gallery

## [video synth basics](video-synth-basics)
overview of hydra's [modular approach](video-synth-basics) and main function types: sources, geometry, color, blending, and modulation.
## [external sources](basic hydra functions/external-sources.md)
using [webcams](basic hydra functions/external-sources.md#using-the-webcam), [images](/external-sources/#initimage), [videos](external-sources/#initvideo), [html canvas elements](external-sources/#init), and [live streams](external-sources/#initstream) inside a hydra sketch
## [sequencing and interactivity](interactivity)
Making dynamic and interactive sketches using [arrays](interactivity/#sequencing-using-arrays), [custom functions](interactivity/#custom-functions), [audio reactivity](interactivity/#audio-reactivity), [mouse input](interactivity/#mouse-interactivity), and [MIDI controllers](interactivity/#midi).
overview of hydra's [modular approach](video-synth-basics) and main function types: [sources](video-synth-basics/src), [geometry](video-synth-basics/coord), [color](video-synth-basics/color), [blending](video-synth-basics/combine), and [modulation](video-synth-basics/combinecoord).
## [external sources](video-synth-basics/external-sources/)
using webcams, images, videos, html canvas elements, and live streams inside a hydra sketch
<--->

## [sequencing & interactivity](sequencing-and-interactivity)
making dynamic and interactive sketches using [arrays](sequencing-and-interactivity/#sequencing-using-arrays), [custom functions](sequencing-and-interactivity/#custom-functions), [audio reactivity](sequencing-and-interactivity/audio), [mouse input](sequencing-and-interactivity/mouse), and [MIDI controllers](sequencing-and-interactivity/midi).
<!-- ## [synth configuration]()
how to change the [speed](), [bpm](), and [resolution]() of a hydra instance, as well as write custom glsl functions -->
<--->
## [web editor](video-synth-basics/web-editor)
key commands, comments, saving sketches, loading extensions and external libraries, publishing to the gallery
## [extending hydra](extending-hydra)
using hydra with other javascript libraries such as P5.js, Tone.js, strudel. Loading libraries and extensions.
## [how-to](how-to)
a quick reference for common questions


## [extending hydra](extending-hydra/extending-hydra)
using hydra with other javascript libraries such as P5.js, Tone.js, strudel. Writing [custom GLSL functions](extending-hydra/glsl), and [using hydra in your own webpage](extending-hydra/hydra-in-a-webpage).

## [guides](guides)
deeper dives into hydra topics written by members of the community.
deeper dives into hydra topics written by members of the community.

{{< /columns >}}
2 changes: 2 additions & 0 deletions content/docs/learning/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -313,3 +313,5 @@ We have now covered all of the basic types of functions within hydra: ***source*

#### Have fun!

---
by Flor de Fuego and Olivia Jack
83 changes: 1 addition & 82 deletions content/docs/learning/sequencing-and-interactivity/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -157,85 +157,4 @@ speed = 0 // freezed


---

### Mouse interactivity

You can have your visuals react to the position of your mouse (or finger, in touch devices). Hydra has an object called `mouse` which stores and keeps track of the position of your mouse on the webpage.

#### mouse.x & mouse.y

```hydra
gradient()
.hue(()=>mouse.x/3000)
.scale(1,1,()=>mouse.y/1000)
.out()
```
|
You can refer to the pixel position of your mouse by calling `mouse.x` and `mouse.y`, each one corresponding to the horizontal and vertical coordinates respectively. When we say 'pixel position', this means that the values you'll find stored in both x and y are represented in pixels. So for `mouse.x`, this means the amount of pixels from the left edge of your window to the position of your mouse. For `mouse.y`, this means the amount of pixels between the top end of your screen and the position of your mouse.

Many times it will be most useful to use values relative to the size of the screen. And also to have values that exist between ranges more reasonable to the hydra functions you're using. For example [-0.5; 0.5] for scrollX and scrollY, [0; 2pi] for rotation, or [0; 1] for general purposes.

#### Note

All of the examples using mouse position to move stuff on the canvas won't work well here, since the canvas doesn't occupy the full size of the screen as in the editor. Take this into account when we use `mouse`, that the positions are relative to the full webpage and not the canvas. This also means that as you scroll down this guide the `y` value will get higher and higher.

#### Control anything with your mouse

On Hydra, most values used are pretty small. So it will be way more useful to have the position of the mouse as values from 0 and 1:

#### Getting values from 0 to 1

```hydra
x = () => mouse.x/width // 0→1
y = () => mouse.y/height // 0→1
osc()
.scale(()=>1+x()*2)
.modulate(noise(4),()=>y()/4)
.out()
```

You can simply multiply by `2*Math.PI` to change the range to [0; 2pi]

#### Make something follow your mouse

On Hydra, things are placed between 0.5 and -0.5 (left to right, top to bottom). In order for anything to follow your mouse, you'll need to get the position of your mouse between that range:

#### Getting values from 0 to ±0.5 from the center

```hydra
x = () => (-mouse.x/width)+.5 // 0.5→-0.5
y = () => (-mouse.y/height)+.5 // 0.5→-0.5
solid(255)
.diff(
shape(4,.1)
.scroll(()=>x(),()=>y())
)
.out()
```

Remember you can name these functions however you prefer.

---


```hydra
voronoi(5,.1,()=>Math.sin(time*4))
.out()
```

The `time` variable seen there is a variable pre-declared by Hydra, that stores how much time passed since Hydra started in seconds.

Functions used in Hydra don't need to be arrow functions, any no-argument function will do! Make sure your function is returning a Number to avoid errors.

### The time variable

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)`.

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)


by geikha
4 changes: 3 additions & 1 deletion content/docs/learning/sequencing-and-interactivity/arrays.md
Original file line number Diff line number Diff line change
Expand Up @@ -192,4 +192,6 @@ update = (dt)=> {
tex.out(o3)
}
}
```
```
---
by geikha
2 changes: 2 additions & 0 deletions content/docs/learning/sequencing-and-interactivity/mouse.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,3 +81,5 @@ Those users more familiar with mathematics might see this as:
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)


---
by geikha
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.

0 comments on commit 6c404dc

Please sign in to comment.