updates

content/_index.md

@@ -7,7 +7,7 @@ weight: 1
 # What is Hydra?
 ![hydra](images/hydra.png)
 
-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 a 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.
 

content/contributing_code.md

@@ -0,0 +1,30 @@
+# Contributing Code
+
+## Running locally
+To run locally, you must have nodejs, yarn and npm installed. Install node and npm from: https://nodejs.org/en/
+
+Install yarn from the command line
+```
+npm install --global yarn
+```
+open terminal and enter directory
+```
+cd hydra
+```
+install dependencies:
+```
+yarn install
+```
+run server
+```
+yarn serve
+```
+go to https://localhost:8000 in the browser
+
+## To develop
+Edit [frontend/public/index.html](frontend/public/index.html) to load 'bundle.js' rather than 'bundle.min.js'
+
+Run development server
+```
+yarn dev
+```

content/contributing_translation.md

@@ -0,0 +1,45 @@
+# Contributing Translation
+
+Everyone is welcome to contribute translations - such as improvement of the existing pages, writing original contents and adding a new language support :)
+
+## Type of Documents
+
+* **hydra-documents**: Guides and this document, which can be found at https://hydra.ojack.xyz/docs/
+* **hydra-functions**: the API reference, which can be found at https://hydra.ojack.xyz/api/
+* **hydra editor**: the main editor https://hydra.ojack.xyz/
+
+## hydra-documents
+
+hydra-documents are accessible at https://hydra.ojack.xyz/docs/ and the contents are hosted on [GitHub](https://github.com/hydra-synth/hydra-docs). In short, if you edit files on GitHub, they will be updated on the website (the first link).
+
+Here we assume you are familiar with Git. If you are not familiar with it and want to make suggestions, don't worry - for small changes like typo, feel free to use "Edit this file" button on GitHub or open an [issue](https://github.com/hydra-synth/hydra-docs/issues) so someone can make the edit!
+
+1. Fork and clone the repository https://github.com/hydra-synth/hydra-docs
+1. If the language you contribute is not supported at all, create a folder with language code (e.g., `/ja` for Japanese). At the moment we don't use region code (e.g., `fr-ca` for French Canadian) - but feel free to suggest if that is necessary!
+1. For translating articles existing in English (e.g., `getting_started.md`), create a file under the language folder with the same name (e.g., `/ja/getting_started.md`). For original contents, feel free to name it as you like :)
+1. Translate the document!  
+Tip 1: files are written in markdown format. It's important to keep the same structure as the English one (like `##` tag for headings). If you couldn't finish translating the whole file, leave remaining headings and texts in English so someone else or you can continue editing later.  
+Tip 2: code blocks should have `javascript` tag as seen in the files in English so that they will be rendered with an embedded editor.
+1. Feel free to add your name and contact to the translated file :)
+1. Add a hyperlink to the file to `/_sidebar.md` - the translated contents go under a bullet point of the language (e.g., `Japanese | 日本語`). Otherwise, your contributed file won't appear on the sidebar :(
+1. Make a git commit and push it to your GitHub repository!
+1. Create a [pull request](https://github.com/hydra-synth/hydra-docs/pulls). We try our best to merge the edits as soon as possible!
+
+
+## hydra-functions
+
+hydra-functions are accessible at https://hydra.ojack.xyz/api/ and the contents are hosted on [GitHub](https://github.com/hydra-synth/hydra-functions). Currently, you need to manually build the javascript bundle.
+
+stub:
+
+1. Clone and fork the repository
+1. `npm install`
+1. edit here https://github.com/hydra-synth/hydra-functions/blob/main/locales.js
+1. for examples, edit here https://github.com/hydra-synth/hydra-functions/blob/main/examples.js
+1. `npm run build`
+1. commit, push, PR
+
+
+## hydra editor
+
+currently not supported

content/docs/getting-started-short.md

@@ -47,5 +47,5 @@ Hint: you can also run the code by typing `ctrl+shift+enter`.
 :)  -->
 
 ## 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).
+For more a more in-depth introductions see [tutorial: hydra basics](../learning/video-synth-basics/getting-started). For an overview of available guides and resources, see [learning](../learning).
 

content/docs/learning/_index.md

@@ -12,15 +12,15 @@ bookCollapseSection: true
 
 <!-- ### [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.
+overview of hydra's [modular approach](video-synth-basics) and main function types: sources, geometry, color, blending, and modulation. 
 ## [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) 
+## [sequencing and interactivity](interactivity/_index.md) 
 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
+<!-- ## [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](video-synth-basics/web-editor.md)
 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. 

content/docs/learning/extending-hydra.md

@@ -2,11 +2,13 @@
 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
+[p5.js](https://p5js.org/) is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is pre-loaded on the Hydra editor with a wrapper that makes it easier to use inside the website. The wrapper is a class called `P5` (notice the upper-case P). A p5.js sketch can be used as a source within a hydra sketch, and vice versa.
 
-### Using p5.js with the hydra web editor
+### p5 + hydra example
 
 ```javascript
 // Initialize a new p5 instance It is only necessary to call this once
@@ -41,6 +43,97 @@ s0.init({src: p5.canvas})
 // Then render the canvas
 src(s0).repeat().out()
 ```
+### breakdown of p5.js functions in hydra
+```javascript
+p1 = new P5() // first, load p5 in instance mode
+```
+
+You can also specify some settings:
+
+```javascript
+p1 = new P5({width: 512, height: 512, mode: 'P2D'})
+```
+
+Now the p5 canvas is overlaying the Hydra canvas. You can hide it by running:
+
+```javascript
+p1.hide() // p1.show() to revert
+```
+
+And you may load it to a source to use p5's canvas as one:
+
+```javascript
+s0.init({src: p1.canvas})
+```
+
+### p5.setup()
+
+When live coding, the `setup()` function of p5 has basically no use; anything that you would have called in setup() you can simply call outside of any function. For example:
+
+```javascript
+p1.noStroke()
+p1.fill(255, 0, 100)
+```
+
+### p5.draw()
+
+Now, to set a `draw` loop simply use all the functions and variables you are used to on global p5 from the variable you're using:
+
+```javascript
+p1.draw = () => {
+    p1.fill(p1.mouseX/5, p1.mouseY/5, 255, 100)
+    p1.rect(p1.mouseX, p1.mouseY, 30, 30)
+}
+```
+
+### Livecoding
+
+You can technically call any p5 function while livecoding. So you can draw anything onto screen on evaluation instead of using the `draw` loop.
+
+```javascript
+p1.clear()
+
+for(let i = 0; i < 50; i++)
+    p1.rect(20, 20, p1.width/50*i, p1.height/50*i)
+```
+
+### Using Hydra's render loop
+
+You can stop p5's own looping and do your p5 actions inside Hydra's render loop via the `update` function. This will synchronize p5's and Hydra's frame renders.
+
+```javascript
+p1.noLoop();
+
+p1.clear()
+p1.colorMode(p1.HSB)
+p1.stroke(0)
+p1.strokeWeight(1)
+
+src(o0)
+	.scale(1.05)
+	.blend(src(o0).brightness(-.02),.4)
+	.modulateHue(o0,100)
+	.layer(s0)
+  	.out()
+
+p1.draw = () => {
+  	if(p1.random() < 0.01) p1.clear()
+    p1.fill(time*100%200, 70, 100)
+    p1.rect(p1.random()*p1.width, p1.abs(p1.sin(time*2))*p1.height, 50, 50)
+}
+
+update = (dt)=> {
+    p1.redraw();
+}
+```
+
+You could also use shape drawing functions such as `rect` directly inside `update`, but you'll need to take into account the coordinate system won't be reset automatically if modified, like when using `draw`. So you'll have to reset it manually by putting actions between `push()` and `pop()`. This would also stop the `frameCount` increment. 
+
+### Note on using different frame rates
+
+There are many situations where you can save resources by using a very low frame rate on p5 and a high one on Hydra or vice-versa. For example, if you want to place random shapes on the p5 canvas every second, you can set p5's `frameRate` to 1 and leave Hydra's fps undefined.
+
+TO DO: add example of using hydra as texture in p5
 
 ## 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.
@@ -91,3 +184,6 @@ 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`.
+
+----
+contributors: geikha, olivia

content/docs/learning/guides/_index.md

@@ -2,12 +2,17 @@
 bookCollapseSection: true
 weight: 7
 title: "guides"
+draft: false
 ---
 
-## guides
+<!-- ## deeper dives
 Deeper dives into hydra topics written by members of the hydra community. 
 
-#### Foreword
+* [Javascript for hydra users](javascript) by geikha
+* [Generatively spawn patches](automatic-patches) by geikha
+* [Precise control of frames and timing](automatic-patches) by geikha
+* [Hydra Book: Textures](textures) by Naoto Hieda -->
+<!-- #### Foreword
 * why is it called hydra?
 * live coding community and open-source sofware
 #### Hydra techniques
@@ -24,10 +29,10 @@ Deeper dives into hydra topics written by members of the hydra community.
 * hydra + p5
 * hydra + THREE.js
 * hydra + AFrame
-#### Live performance
+#### Live performance -->
 
-#### Developing and Contributing
+<!-- #### Developing and Contributing
 * [overview](contributing)
 * [hydra-synth](contributing/synth)
 * [hydra-editor](contributing/editor)
-* [hydra-server](contributing/server)
+* [hydra-server](contributing/server) -->

content/docs/learning/guides/audio.md

@@ -1,5 +1,11 @@
+---
+title: audio
+draft: true
+---
+
 # Audio Guide
 ---
+by geikha
 
 ## Reacting to audio