many updates

assets/_custom.scss

@@ -37,11 +37,12 @@ aside nav ul li {
 
 .book-menu a.active {
     color: #ef0981;
+    text-decoration: underline;
     font-size: 1.3rem;
 }
 
 .markdown a:visited {
-    color: #ef0981;
+    // color: #ef0981;
 }
 
 a {

config.toml

@@ -45,6 +45,7 @@ enableGitInfo = true
   # Used for 'Last Modified' and 'Edit this page' links.
   BookRepo = 'https://github.com/hydra-synth/hydra-docs-v2'
 
+  # BookTheme = 'dark'
   # (Optional, default 'commit') Specifies commit portion of the link to the page's last modified
   # commit hash for 'doc' page type.
   # Requires 'BookRepo' param.

content/_index.md

@@ -1,11 +1,26 @@
 ---
-title: hydra video synth portal
-type: docs
+title: "what is hydra"
+draft: false
+weight: 1
 ---
 
-WIP portal for hydra video synth. This will be a home for news and updates regarding hydra, as well as a hub for community resources and documentaiton.
+# What is Hydra?
+![hydra](images/hydra.png)
 
- For the main hydra website, see the [web editor](https://hydra.ojack.xyz). 
-
- To contribute, please [get in touch.]()
+Hydra is live code-able video synth and coding environment that runs directly in the browser. It is free and open-source, and made for beginners and experts alike. You can simply open the [hydra web editor](https://hydra.ojack.xyz) on a laptop or mobile device to get started.
 
+Hydra is written in JavaScript and compiles to WebGL under the hood. The syntax is inspired by analog modular synthesis, in which chaining or patching a set of transformations together generates a visual result.
+
+# About
+#### Hydra can be used: 
+- to mix and add effects to camera feeds, screenshares, live streams, and videos
+- to create generative and audio-reactive visuals, and share them online with others
+- in combination with other javascript libraries such as P5.js, Tone.js, THREE.js, or gibber
+- to add interactive video effects to a website
+- to experiment with and learn about video feedback, fractals, and pixel operations
+- to stream video between browsers and live-jam with others online
+
+#### Further resources and next steps
+For more information and instructions, see: [Getting Started](docs/getting-started-short.md), [a list of hydra functions](https://hydra.ojack.xyz/api/), [the community database of projects and tutorials](https://hydra.ojack.xyz/garden/), [a gallery of user-generated sketches](https://twitter.com/hydra_patterns), and [the source code on github](https://github.com/hydra-synth/hydra).
+
+Hydra was created by [olivia jack](https://ojack.xyz) and is supported by a community of contributers. If you enjoy using Hydra, please consider [supporting continued development](https://opencollective.com/hydra-synth).

content/docs/community.md

@@ -1,5 +1,5 @@
 ---
-weight: 3
+# weight: 3
 bookFlatSection: true
 title: "community"
 bookCollapseSection: false

content/docs/learning/getting-started-short.md → content/docs/getting-started-short.md

@@ -1,17 +1,29 @@
 ---
-title: "getting started"
+title: "hello world"
 draft: false
 author: "Flor and Olivia"
 weight: 1
 ---
-# Getting started
+# hello world
+start writing code in hydra! to get started:
+1. Go to https://hydra.ojack.xyz
 
-## Play with gallery examples
+2. Close the top window by clicking the `[x]` in the top right. 
+
+3. Change some numbers
+
+4. Type "ctrl+shift+enter" to run the code (or use the triangle run button)
+
+5. have fun! there is no "wrong" way to code in hydra :]
+
+
+![](https://i.imgur.com/ZfgVjJZ.gif)
+
+<!-- ## Play with gallery examples
 The simplest way to get started with hydra is to play around with the example sketches in the [web editor](https://hydra.ojack.xyz/).
 
 To get started, open the the [hydra web editor](https://hydra.ojack.xyz/) in a separate window.   Close the top window by clicking the [x] in the top right. 
 
-![](https://i.imgur.com/ZfgVjJZ.gif)
 
 You will see some colorful visuals in the background with text on top. The text is code that generates the visuals behind it. 
 
@@ -32,5 +44,8 @@ Use the triangle "run" button to run your code.
 Hint: you can also run the code by typing `ctrl+shift+enter`.
 
 ## Have fun!
-:) 
+:)  -->
+
+## Next steps
+For more a more in-depth introductions see [video synth basics](../learning/video-synth-basics). For an overview of available guides and resources, see [learning](../learning).
 

content/docs/learning/_index.md

@@ -10,21 +10,23 @@ bookCollapseSection: true
 
 {{< columns >}}
 
-### [getting started](getting-started-short) 
-### [video synth basics](video-synth-basics) 
-overview of hydra's [modular approach]() and main function types: [sources](), [geometry](), [color](), [blending](), and [modulation]()
-### [external sources](external-sources)
-using [webcams](), [images](), [videos](), [html canvas elements](), and [live streams]() inside a hydra sketch
-### [sequencing and interactivity](interactivity) 
-Making dynamic and interactive sketches using [arrays](), [custom functions](), [audio reactivity](), [mouse input](), and [MIDI controllers]().
+<!-- ### [getting started](../getting-started-short.md)  -->
+## [video synth basics](video-synth-basics) 
+overview of hydra's [modular approach](video-synth-basics) and main function types.
+## [external sources](external-sources)
+using [webcams](external-sources#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).
+## [synth configuration]()
+how to change the [speed](), [bpm](), and [resolution]() of a hydra instance, as well as write custom glsl functions
 <--->
-### [web editor](web-editor)
+## [web editor](web-editor)
 key commands, comments, saving sketches, loading extensions and external libraries, publishing to the gallery
-### [synth configuration]()
-how to change the [speed](), [bpm](), and [resolution]() of a hydra instance, as well as write custom glsl functions
-### [how-to](how-to) 
+## [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
-### [guides](guides)
+## [guides](guides)
 deeper dives into hydra topics written by members of the community.
 
 {{< /columns >}}

content/docs/learning/extending-hydra.md

@@ -0,0 +1,93 @@
+---
+title: "extending hydra"
+---
+# Extending hydra
+Hydra is written in javascript, and compatible with many other javascript libraries. The hydra web editor executes javascript directly in the browser, so it is possible to load many other libraries and scripts directly in the browser. 
+
+## p5.js
+
+### Using p5.js with the hydra web editor
+
+```javascript
+// Initialize a new p5 instance It is only necessary to call this once
+p5 = new P5() // {width: window.innerWidth, height:window.innerHeight, mode: 'P2D'}
+
+// draw a rectangle at point 300, 100
+p5.rect(300, 100, 100, 100)
+
+// Note that P5 runs in instance mode, so all functions need to start with the variable where P5 was initialized (in this case p5)
+// reference for P5: https://P5js.org/reference/
+// explanation of instance mode: https://github.com/processing/P5.js/wiki/Global-and-instance-mode
+
+// When live coding, the "setup()" function of P5.js has basically no use; anything that you would have called in setup you can just call outside of any function.
+
+p5.clear()
+
+for(var i = 0; i < 100; i++){
+  p5.fill(i*10, i%30, 255)
+  p5.rect(i*20, 200, 10,200)
+}
+
+// To live code animations, you can redefine the draw function of P5 as follows:
+// (a rectangle that follows the mouse)
+p5.draw = () => {
+  p5.fill(p5.mouseX/5, p5.mouseY/5, 255, 100)
+  p5.rect(p5.mouseX, p5.mouseY, 30, 150)
+}
+
+// To use P5 as an input to hydra, simply use the canvas as a source:
+s0.init({src: p5.canvas})
+
+// Then render the canvas
+src(s0).repeat().out()
+```
+
+## Loading external scripts
+The `await loadScript()` function lets you load other packaged javascript libraries within the hydra editor. Any javascript code can run in the hydra editor.
+
+## THREE.js
+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()
+```
+
+## Tone.js
+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");
+```
+
+## Custom libraries
+In the Hydra editor, you can load any external scripts, libraries or hydra-synth extensions using the following syntax at the top of your sketch:
+
+```javascript
+await loadScript("https://www.somewebsite.com/url/to/hydra-script.js")
+```
+
+
+You can also suffer from [CORS policy problems](./external_sources.md#cors-policy) if the script/package you're loading doesn't come from a CDN. If you want to load from a GitHub or GitLab repo, you can use special CDNs like `statically.io`.

content/docs/learning/external-sources.md

@@ -1,14 +1,14 @@
 ---
 title: "external sources: cameras, videos, streams"
 draft: false
-author: "Ritchse"
+author: "geikha"
 weight: 4
 ---
 
 # External Sources
-
+by [geikha](https://github.com/geikha) and [olivia](https://ojack.xyz)
 ## Using the webcam
-In addition to using sources from within hydra (such as `osc()` and `shape()`), you can use hydra to process external video sources such as a webcam. To initialize the webcam, run the following code:
+In addition to using sources from within hydra (such as `osc()` and `shape()`), you can use hydra to process external video sources such as a webcam. External sources in hydra are referenced using predefined objects `s0`, `s1`, `s2`, and `s3`.  To initialize the webcam in `s0`, run the following code:
 ```javascript
 s0.initCam()
 ```
@@ -38,7 +38,7 @@ If you have multiple webcams, you can access separate cameras by adding a number
 
 ---
 
-## initCam
+## initCam()
 
 You can use a webcam's video as such:
 
@@ -48,22 +48,20 @@ s0.initCam()
 s0.initCam(2) // if you have many cameras, you can select one specifically
 ```
 
-## initScreen
-
-You can capture your screen or specific windows or tabs to use as a video source:
 
-```javascript
-s0.initScreen()
-```
 
 ---
 
-## initImage
+## initImage()
 
-In order to load an image to load an image into a source object, the syntax is the following:
+Load an image into a source object:
 
 ```javascript
-s0.initImage("https://www.somewebpage.org/urlto/image.jpg")
+// load an image into a source object
+s0.initImage("https://upload.wikimedia.org/wikipedia/commons/2/25/Hydra-Foto.jpg")
+
+// show the image on the screen
+src(s0).out()
 ```
 
 When running Hydra in Atom, or any other local manner, you can load local files referring to them by URI:
@@ -76,12 +74,13 @@ s0.initImage("file:///home/user/Images/image.png")
 
 You can load `.jpeg`, `.png`, and `.bmp` as well as `.gif` and `.webp` (although animation won't work).
 
-## initVideo
+## initVideo()
 
 The syntax for loading video is the same as for loading image, only changing the function to `loadVideo`:
 
 ```javascript
-s0.initVideo("https://www.somewebpage.org/urlto/video.mp4")
+s0.initVideo("https://media.giphy.com/media/AS9LIFttYzkc0/giphy.mp4")
+src(s0).out()
 ```
 
 ### Supported formats
@@ -98,13 +97,43 @@ s0.src.currentTime = 10 // seek to the 10th second
 s0.src.loop = false // don't loop the video
 ```
 
+## initScreen()
+
+You can capture your screen or specific windows or tabs to use as a video source:
+
+```javascript
+s0.initScreen()
+src(s0).out()
+```
 ---
 
-## initStream : streaming between Hydra sessions
+## init()
+`init()` is a more generic function for loading any external source into hydra. This can be especially useful when you are using an [HTML canvas element](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) as an input, or loading an existing resource as a source into hydra. Valid input types are documented in the [regl texture documentation](http://regl.party/api#textures).
+
+For example, the following code creates a canvas element and draws text to it, and then uses that canvas as a source in hydra:
+```hydra
+myCanvas = document.createElement('canvas')
+ctx = myCanvas.getContext('2d')
+ctx.font = "30px Arial"
+ctx.fillStyle = "red";
+ctx.fillText("Hello World", 10, 50)   
+
+s0.init({ src: myCanvas, dynamic: false })
+
+src(s0).diff(osc(2, 0.1, 1.2)).out()
+```
+use the `dynamic` parameter to indicate whether the source will be updated, or remain the same. 
+
+## initStream()
+{{< hint danger >}}
+note: initStream() is currently broken in hydra editor due to server issues
+{{< /hint >}}
+
+streaming between Hydra sessions
 
 Hydra (the editor) also has built-in streaming. You can stream the output of your Hydra to someone else and vice-versa. This is done in a similar fashion to using images and videos, using external sources. But there are some extra steps for streaming:
 
-### The pb object
+###  The pb object
 
 On your Hydra editor, you can find a pre-defined object called `pb` (as in patch-bay). This object basically represents the connection of your Hydra editor instance to all others hosted on the same server. When you want to share your stream to someone else you'll have to give your Hydra session a name. Do this using the `pb.setName()` function and by passing in some string as the name. For example: `pb.setName('myverycoolsession')`. If you want someone else to stream to you, ask them to set a name as such and share it with you.