diff --git a/layouts/partials/docs/inject/head.html b/layouts/partials/docs/inject/head.html index 73143b4..55f8a58 100644 --- a/layouts/partials/docs/inject/head.html +++ b/layouts/partials/docs/inject/head.html @@ -40,4 +40,4 @@ crossorigin="anonymous" > - \ No newline at end of file + \ No newline at end of file diff --git a/public/404.html b/public/404.html index 286a666..66276ef 100644 --- a/public/404.html +++ b/public/404.html @@ -13,9 +13,9 @@ 404 Page not found | hydra video synth - + - + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Contributing Code + + +
+ + + + + + +
+ + + +

+ 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 to load ‘bundle.js’ rather than ‘bundle.min.js’

+

Run development server

+
yarn dev
+
+ + + +
+ +
+ + +
+ Calendar + November 15, 2023 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/contributing_translation/index.html b/public/contributing_translation/index.html new file mode 100644 index 0000000..940ab6f --- /dev/null +++ b/public/contributing_translation/index.html @@ -0,0 +1,901 @@ + + + + + + + + + + + + + +Contributing Translation | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Contributing Translation + + +
+ + + + + + +
+ + + +

+ 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 + # +

+

hydra-documents are accessible at https://hydra.ojack.xyz/docs/ and the contents are hosted on GitHub. 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 so someone can make the edit!

+
    +
  1. Fork and clone the repository https://github.com/hydra-synth/hydra-docs
    2. +
  2. 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!
    3. +
  3. 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 :)
    4. +
  4. 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.
    5. +
  5. Feel free to add your name and contact to the translated file :)
    6. +
  6. 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 :(
    7. +
  7. Make a git commit and push it to your GitHub repository!
    8. +
  8. Create a pull request. We try our best to merge the edits as soon as possible!
    9. +
+

+ hydra-functions + # +

+

hydra-functions are accessible at https://hydra.ojack.xyz/api/ and the contents are hosted on GitHub. Currently, you need to manually build the javascript bundle.

+

stub:

+
    +
  1. Clone and fork the repository
    2. +
  2. npm install
    3. +
  3. edit here https://github.com/hydra-synth/hydra-functions/blob/main/locales.js
    4. +
  4. for examples, edit here https://github.com/hydra-synth/hydra-functions/blob/main/examples.js
    5. +
  5. npm run build
    6. +
  6. commit, push, PR
    7. +
+

+ hydra editor + # +

+

currently not supported

+
+ + + +
+ +
+ + +
+ Calendar + November 15, 2023 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/community/index.html b/public/docs/community/index.html index 48facc9..e3348fe 100644 --- a/public/docs/community/index.html +++ b/public/docs/community/index.html @@ -10,13 +10,13 @@ - + community | hydra video synth - + - + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + developing editor + + +
+ + + + + + +
+ + + +

+ Developing editor + # +

+

To run locally, you must have nodejs and npm installed. Install node and npm from: https://nodejs.org/en/.

+

First, clone the repository

+
git clone git@github.com:hydra-synth/hydra.git
+
+

enter the directory of the hydra source code:

+
cd hydra
+
+

+ Current main branch + # +

+

The current main branch uses browserify to bundle the script. While new features should be implemented in dev branch, if there is a hot fix needed in the current main branch, please follow this guide.

+

Once you have node and npm installed, you can install yarn globally by running the following from the command line:

+
npm install --global yarn
+
+

install dependencies:

+
yarn install
+
+

bundle JavaScript with browserify:

+
yarn build
+
+

run server

+
yarn serve
+
+

go to http://localhost:8000 in the browser. Congratulations! You built hydra-editor on your computer!

+

+ Where do these commands come from? + # +

+

Yarn commands are defined in package.json.

+

+ Development + # +

+

Make your new branch

+
git checkout -b my-awesome-feature
+
+

Edit the code. If you want to see changes in real time, you can use the watch script. After running yarn serve, open another terminal and run

+
yarn watch
+
+

Then every time you save code, it will automatically re-bundle the code.

+

+ Serving on your own server + # +

+

(stub)

+

+ Commit, push and pull request + # +

+

(stub)

+

+ dev branch + # +

+

New features should be implemented in dev branch. After entering the directory, checkout the branch

+
git checkout -b dev origin/dev
+
+

install dependencies:

+
npm install
+
+

run dev environment

+
npm run dev
+
+

Since we use vite in dev branch, we don’t need to bundle the code during development (vite takes care of bundling and serving while you code). When you want to publish the code, build the bundle:

+
npm run build
+
+

+ Connecting to server from dev/ local editor environment + # +

+

This repo only contains hydra editor frontend. You can connect to a backend server (https://github.com/hydra-synth/hydra-server) for signaling and gallery functionality. To do this, set up hydra-server from above. Then create a .env file in the root of the hydra directory. Add the url of your server as a line in the .env file as:

+
VITE_SERVER_URL=http://localhost:8000
+

(replace http://localhost:8000 with the url of your server)

+
+ + + +
+ +
+ + +
+ Calendar + November 20, 2023 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/extending-hydra/contributing/index.html b/public/docs/learning/extending-hydra/contributing/index.html new file mode 100644 index 0000000..bff670d --- /dev/null +++ b/public/docs/learning/extending-hydra/contributing/index.html @@ -0,0 +1,869 @@ + + + + + + + + + + + +Developing and contributing | hydra video synth + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Developing and contributing + + +
+ + + + + + +
+ + + +

+ Developing and Contributing + # +

+

In this guide, you will learn how to “compile” hydra, to test your own version, and to contribute to the original repository. This guide is for those who are familar with JavaScript to edit the code base. Knowledge of command line and front-end tools is preferred but we try to guide you step by step.

+

+ Understanding the structure + # +

+

Hydra consists of mainly 4 repositories:

+ +

hydra, or hydra-editor, is the webpage that comes with the editor. If you want to make changes in, e.g., the behavior of the editor, this is the right repository. We will look into detail in developing editor.

+

hydra-synth is the “engine” that processes your hydra code on the editor and produces GLSL (shader) code. We explain in detail in developing synth.

+

hydra-server is a backend program for signaling and storing the gallery. Note that you don’t need this for testing the editor. We explain in detail in developing backend server.

+

l10n is a collection of locale files, i.e., translations for the editor interface. If you want to contribute translations, please refer to this doc.

+

+ All contributors + # +

+

Thank you to everyone who contributed to the project, not only contributing the code, but including reporting bugs, organizing events, and making tutorials, etc! We would like to acknowledge everyone who contributes to make hydra better. Please submit your information here.

+
+ + + +
+ +
+ + +
+ Calendar + November 20, 2023 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/extending-hydra/contributing/index.xml b/public/docs/learning/extending-hydra/contributing/index.xml new file mode 100644 index 0000000..d63b401 --- /dev/null +++ b/public/docs/learning/extending-hydra/contributing/index.xml @@ -0,0 +1,47 @@ + + + + Developing and contributing on hydra video synth + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/contributing/ + Recent content in Developing and contributing on hydra video synth + Hugo -- gohugo.io + en + + developing backend server + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/contributing/server/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/contributing/server/ + Developing backend server # (stub) + + + + developing editor + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/contributing/editor/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/contributing/editor/ + Developing editor # To run locally, you must have nodejs and npm installed. Install node and npm from: https://nodejs.org/en/. +First, clone the repository +git clone git@github.com:hydra-synth/hydra.git enter the directory of the hydra source code: +cd hydra Current main branch # The current main branch uses browserify to bundle the script. While new features should be implemented in dev branch, if there is a hot fix needed in the current main branch, please follow this guide. + + + + developing hydra-synth + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/contributing/synth/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/contributing/synth/ + Developing synth # Clone the repository +git@github.com:hydra-synth/hydra-synth.git enter the folder +cd hydra-synth install the dependencies +npm install build +npm run build The bundled code is in dist/hydra-synth.js. +Trying on the browser # This repository does not come with the editor. However, you can use the simple example dist/index.html. To do so, install http-server +npm install --global http-server and serve dist folder +http-server dist go to http://localhost:8000 in the browser. You can either edit the hydra code in index. + + + + diff --git a/public/docs/learning/extending-hydra/contributing/server/index.html b/public/docs/learning/extending-hydra/contributing/server/index.html new file mode 100644 index 0000000..c7b9d9a --- /dev/null +++ b/public/docs/learning/extending-hydra/contributing/server/index.html @@ -0,0 +1,839 @@ + + + + + + + + + + + + + +developing backend server | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + developing backend server + + +
+ + + + + + +
+ + + +

+ Developing backend server + # +

+

(stub)

+
+ + + +
+ +
+ + +
+ Calendar + November 20, 2023 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/extending-hydra/contributing/synth/index.html b/public/docs/learning/extending-hydra/contributing/synth/index.html new file mode 100644 index 0000000..78f75c9 --- /dev/null +++ b/public/docs/learning/extending-hydra/contributing/synth/index.html @@ -0,0 +1,891 @@ + + + + + + + + + + + + + +developing hydra-synth | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + developing hydra-synth + + +
+ + + + + + +
+ + + +

+ Developing synth + # +

+

Clone the repository

+
git@github.com:hydra-synth/hydra-synth.git
+
+

enter the folder

+
cd hydra-synth
+
+

install the dependencies

+
npm install
+
+

build

+
npm run build
+
+

The bundled code is in dist/hydra-synth.js.

+

+ Trying on the browser + # +

+

This repository does not come with the editor. However, you can use the simple example dist/index.html. To do so, install http-server

+
npm install --global http-server
+
+

and serve dist folder

+
http-server dist
+
+

go to http://localhost:8000 in the browser. You can either edit the hydra code in index.html to try hydra functions, or open the developer console and type hydra code (e.g., osc().out()) and it will update the canvas. The former is useful for testing more complex examples including non-global mode, and the later is useful for quick testing.

+

For testing the integration with hydra-editor (of if you want to host your own hydra version on your server), please follow editor guide to host your own editor. Then, edit package.json in hydra (not hydra-synth) to use the local version of hydra-synth (assuming you have hydra and hydra-synth folders in the same folder)

+
"hydra-synth": "file:../hydra-synth",
+
+

Then in hydra, update the package

+
npm update hydra-synth
+
+

Now the editor is using your version of hydra-synth.

+
+ + + +
+ +
+ + +
+ Calendar + November 20, 2023 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/extending-hydra/custom-glsl/index.html b/public/docs/learning/extending-hydra/custom-glsl/index.html new file mode 100644 index 0000000..86d3388 --- /dev/null +++ b/public/docs/learning/extending-hydra/custom-glsl/index.html @@ -0,0 +1,830 @@ + + + + + + + + + + + + + +Custom Glsl | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Custom Glsl + + +
+ + + + + + +
+ + + +
+ + + +
+ +
+ + +
+ Calendar + November 20, 2023 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/extending-hydra/extending-hydra/index.html b/public/docs/learning/extending-hydra/extending-hydra/index.html new file mode 100644 index 0000000..1572629 --- /dev/null +++ b/public/docs/learning/extending-hydra/extending-hydra/index.html @@ -0,0 +1,1039 @@ + + + + + + + + + + + + + +Using hydra with other javascript libraries | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Using hydra with other javascript libraries + + +
+ + + + + + +
+ + + +

+ Using hydra with other javascript libraries + # +

+

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

+

+ p5 + hydra example + # +

+
// 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()
+

+ breakdown of p5.js functions in hydra + # +

+
p1 = new P5() // first, load p5 in instance mode
+

You can also specify some settings:

+
p1 = new P5({width: 512, height: 512, mode: 'P2D'})
+

Now the p5 canvas is overlaying the Hydra canvas. You can hide it by running:

+
p1.hide() // p1.show() to revert
+

And you may load it to a source to use p5’s canvas as one:

+
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:

+
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:

+
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.

+
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.

+
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.

+

+ THREE.js + # +

+

Here is an example using Three.js from the web editor:

+
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:

+
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:

+
await loadScript("https://www.somewebsite.com/url/to/hydra-script.js")
+

You can also suffer from CORS policy problems 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

+
+ + + +
+ +
+ + +
+ Calendar + November 20, 2023 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/extending-hydra/glsl/index.html b/public/docs/learning/extending-hydra/glsl/index.html new file mode 100644 index 0000000..d31db2d --- /dev/null +++ b/public/docs/learning/extending-hydra/glsl/index.html @@ -0,0 +1,1142 @@ + + + + + + + + + + + + + +Custom GLSL | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Custom GLSL + + +
+ + + + + + +
+ + + +

+ GLSL Guide + # +

+
+

+ Using custom GLSL functions + # +

+

Hydra is built using GLSL (a language for generating a program, or shader, that runs directly on the graphics card using WebGl). Each javascript function in hydra corresponds directly to a snippet of shader code. Hydra has a unique way of adding custom source and transform functions which we will explain here.

+

+ setFunction + # +

+

The Hydra API includes a function called setFunction which receives a specific type of JavaScript object. This object will have the properties name, type, inputs and glsl.

+
    +
  • name is a String with the name for the function
    • +
  • type is one of the available types of functions (‘src’, ‘color’, ‘coord’, ‘combine’, ‘combineCoord’)
    • +
  • inputs is an Array of objects each with it’s own name, type and default properties. They represent the arguments of the GLSL function.
    • +
  • glsl is a String with the glsl code.
    • +
+

+ Example + # +

+
setFunction({
+    name: 'myOsc',
+    type: 'src',
+    inputs: [
+        { name: 'freq', type: 'float', default: 20 }
+    ],
+    glsl: `
+        return vec4(sin((_st.x+time)*freq*vec3(0.1)),1.0);
+    `
+})
+

+ Types of GLSL functions and their arguments + # +

+

+ src + # +

+

A function with a specified type of src is one that generates visuals by its own. Just like osc or noise. They all have a vec2 argument called _st for the coordinate. And you can add any custom inputs as shown above. You must return a vec4.

+

+ color + # +

+

A color function receives a vec4 called _c0 that represents the color being affected by the transform. As any function you may add any extra inputs. You must return another vec4.

+
+ +
+ +

+ coord + # +

+

A coord function receives a vec2 called _st that represents the coordinate plane. You must return another vec2.

+
+ +
+ +

+ combine + # +

+

The functions of type combine receive 2 vec4 arguments, _c0 and _c1. The first one represents the texture being affected and the latter represents the texture being blended into the former. For example, when you use osc().mult(noise()), inside the definition of the function, _c0 represents the osc() and _c1 represents the noise() colors. You can think combine functions as blending modes. And as custom function you may add extra inputs as needed. You must return a vec4.

+
+ +
+ +

+ combineCoord + # +

+

combineCoord functions change the position of colors in the texture being affected given the colors of another texture. Think about the many modulate functions for example, since they are precisely this type. They receive a vec2 _st and a vec4 _c0. You must return a vec2.

+
+ +
+ +

+ Built in functions you can use + # +

+

The following functions are pre-defined for every Hydra generated shader, and in the same way that some built-in functions use them, you may too:

+

+ _luminance + # +

+
float _luminance(vec3 rgb){
+      const vec3 W = vec3(0.2125, 0.7154, 0.0721);
+      return dot(rgb, W);
+}
+

Returns the luminance of a given rgb color.

+

+ _rgb2Hsv + # +

+
vec3 _rgbToHsv(vec3 c){
+    vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
+    vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
+    vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
+
+    float d = q.x - min(q.w, q.y);
+    float e = 1.0e-10;
+    return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
+}
+

Transforms a color from the rgb to the hsv colorspace.

+

+ _hsv2Rgb + # +

+
vec3 _hsvToRgb(vec3 c){
+    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+

Transforms a color from the hsv colorspace back to rgb.

+
+ Note + # +
+

As of now there is no way to define “global” functions such as these ones just mentioned. But expect it soon!

+

+ Examples + # +

+

+ Chroma Key + # +

+

This example modifies color to replace green background with transparency (i.e., chroma keying). The GLSL code is ported from Inigo Quilez’s example.

+
setFunction({
+    name: 'chroma',
+    type: 'color',
+    inputs: [
+        ],
+    glsl: `
+        float maxrb = max( _c0.r, _c0.b );
+        float k = clamp( (_c0.g-maxrb)*5.0, 0.0, 1.0 );
+        float dg = _c0.g; 
+        _c0.g = min( _c0.g, maxrb*0.8 ); 
+        _c0 += vec4(dg - _c0.g);
+        return vec4(_c0.rgb, 1.0 - k);
+`})
+
+// s0.initCam()
+// src(s0).out(o0)
+solid(0,1,0).layer(shape(5,0.3,0.3).luma()).out(o0)
+osc(30, 0, 1).layer(src(o0).chroma()).out(o1)
+render()
+
+

+ GLSL Injection + # +

+

Since Hydra runs GLSL on the background, and everything you input into the parameters of the different functions ends up written on GLSL (be it literally or as a uniform), you can sort of hack Hydra (and totally break it) by sending strings of GLSL expressions as arguments:

+
+ +
+ +

The reason you can “totally break Hydra” here is that Hydra works with a modular flow. In order for it to work, when you do coordinate transforms after a bunch of interconnected textures, these transforms must apply to all coordinate references in the shader. If you inject values of the st coordinates in your arguments, Hydra has no way of applying any further transforms to them, therefore breaking the modularity.

+
+

+ Extensions + # +

+

+ Extra shaders + # +

+

There are some Hydra extensions that load many custom glsl functions, such as:

+ +

+ Extra Functionality + # +

+

The hydra-glsl extension allows you to write GLSL directly in your patches. For example:

+
glsl('vec4(sin(((_st.x*54.)+time*2.)*vec3(0.1,0.102,0.101)),1.0)')
+    .diff(o0)
+    .glslColor('vec4(c0.brg,1.)')
+    .glslCoord('xy*=(1.0/vec2(i0, i0)); return xy',.25)
+    .glslCombine('c0-c1',o1)
+    .glslCombineCoord('uv+(vec2(c0.r,c0.b)*0.1)',o1)
+    .out()
+
+

by geikha

+
+ + + +
+ +
+ + +
+ Calendar + November 20, 2023 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/extending-hydra/hydra-in-a-webpage/index.html b/public/docs/learning/extending-hydra/hydra-in-a-webpage/index.html new file mode 100644 index 0000000..809a732 --- /dev/null +++ b/public/docs/learning/extending-hydra/hydra-in-a-webpage/index.html @@ -0,0 +1,997 @@ + + + + + + + + + + + + + +Hydra in a Webpage | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Hydra in a Webpage + + +
+ + + + + + +
+ + + +

+ Hydra-Synth + # +

+

In addition to using hydra within the hydra web editor, it is also possible to use the hydra video-synth engine as a library within your own javascript projects.

+

hydra-synth is a javascript library containing the main logic of hydra packaged as a javascript module.

+

image of hydra in webpage

+

+ To include in a webpage (bundled version): + # +

+

Include the bundled version of hydra-synth in your html file:

+
<script src="https://unpkg.com/hydra-synth"></script>
+<script>
+      // create a new hydra-synth instance
+      var hydra = new Hydra({ detectAudio: false })
+      osc(4, 0.1, 1.2).out()
+</script>
+

You can see and remix a live example here: https://glitch.com/edit/#!/hydra-webpage

+

+ To use as a module: + # +

+

Download the module:

+
npm install --save hydra-synth
+

Include in your app:

+
import Hydra from 'hydra-synth'
+
+const hydra = new Hydra({ detectAudio: false })
+osc(4, 0.1, 1.2).out()
+

+ To use using cjs/require syntax: + # +

+
const Hydra = require('hydra-synth')
+

The rest of this README is about configuring hydra-synth. For broader hydra documentation and usage, see learning hydra

+

+ API: + # +

+
const hydra = new Hydra([opts])
+

create a new hydra instance

+

If opts is specified, the default options (shown below) will be overridden.

+
{
+  canvas: null, // canvas element to render to. If none is supplied, a canvas will be created and appended to the screen
+
+  width: // defaults to canvas width when included, 1280 if not
+
+  height: // defaults to canvas height when included, 720 if not
+
+  autoLoop: true, // if true, will automatically loop using requestAnimationFrame.If set to false, you must implement your own loop function using the tick() method (below)
+
+  makeGlobal: true, // if false, will not pollute global namespace (note: there are currently bugs with this)
+
+  detectAudio: true, // recommend setting this to false to avoid asking for microphone
+
+  numSources: 4, // number of source buffers to create initially
+
+  numOutputs: 4, // number of output buffers to use. Note: untested with numbers other than 4. render() method might behave unpredictably
+
+  extendTransforms: [] // An array of transforms to be added to the synth, or an object representing a single transform
+
+  precision: null  // force precision of shaders, can be 'highp', 'mediump', or 'lowp' (recommended for ios). When no precision is specified, will use highp for ios, and mediump for everything else.
+
+  pb = null, // instance of rtc-patch-bay to use for streaming
+}
+

+ Custom render loop + # +

+

You can use your own render loop for triggering hydra updates, instead of the automatic looping. To use, set autoLoop to false, and call

+
hydra.tick(dt)
+

where dt is the time elapsed in milliseconds since the last update

+

+ To develop: + # +

+
npm run dev
+

Sets up an example using hydra-synth that is automatically updated when source files are updated. It is possible to write test code by editing /example/index.js or by writing hydra code into the developer console.

+

+ Non-global mode + # +

+

If makeGlobal is set to false, buffers and functions can be accessed via the synth property of the hydra instance.

+
const h = new Hydra({ makeGlobal: false, detectAudio: false }).synth
+h.osc().rotate().out()
+

In non-global mode, it is important to start all hydra functions, buffers, and variables by referencing the instance of hydra synth you are currently using.e.g.

+
const h = new Hydra({ makeGlobal: false, detectAudio: false }).synth
+h.osc().diff(h.shape()).out()
+h.gradient().out(h.o1)
+h.render()
+

This also makes it possible to use more than one hydra canvas at once:

+
const h = new Hydra({ makeGlobal: false, detectAudio: false }).synth
+h.osc().diff(h.shape()).out()
+h.gradient().out(h.o1)
+h.render()
+
+const h2 = new Hydra({ makeGlobal: false, detectAudio: false }).synth
+h2.shape(4).diff(h2.osc(2, 0.1, 1.2)).out()
+

See https://glitch.com/edit/#!/multi-hydra for a working example of multiple hydra canvases, created by Naoto Hieda.

+

If you would like to keep the same syntax as hydra in non-global mode, consider destructuring the object further:

+
const { src, osc, gradient, shape, voronoi, noise, s0, s1, s2, s3, o0, o1, o2, o3, render } = hydra
+shape(4).diff(osc(2, 0.1, 1.2)).out()
+

hydra-ts is a fork of hydra-synth in Typescript maintained by @folz.

+

+ Known issues / troubleshooting + # +

+

+ Vite + # +

+

When using hydra with Vite, you might see the error

+

+ Autoplay on iOS + # +

+

from issue https://github.com/hydra-synth/hydra-synth/issues/137

+

It seems on mobile safari, videos won’t autoplay because of several reasons:

+ +
    <video style="position:static;top:1px;width:1px;height:1px" id="vid" autoplay loop muted playsinline crossorigin>
+      <source src="https://cdn.glitch.global/8df667c3-e544-4cbb-8c16-f604238e8d2e/paper.mov?v=1682418858521">
+    </video>
+
let v = document.getElementById("vid")
+v.addEventListener('loadeddata', () => {
+  s0.init({src: v})
+})
+

Here is a live example: https://glitch.com/edit/#!/hydra-video-autoplay-ios

+
+ + + +
+ +
+ + +
+ Calendar + November 20, 2023 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/extending-hydra/hydra-webpage.png b/public/docs/learning/extending-hydra/hydra-webpage.png new file mode 100644 index 0000000..7737b2e Binary files /dev/null and b/public/docs/learning/extending-hydra/hydra-webpage.png differ diff --git a/public/docs/learning/extending-hydra/index.html b/public/docs/learning/extending-hydra/index.html new file mode 100644 index 0000000..8336863 --- /dev/null +++ b/public/docs/learning/extending-hydra/index.html @@ -0,0 +1,829 @@ + + + + + + + + + + + +Extending Hydra | hydra video synth + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Extending Hydra + + +
+ + + + + + +
+ + + +
+ + + +
+ +
+ + +
+ Calendar + November 20, 2023 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/extending-hydra/index.xml b/public/docs/learning/extending-hydra/index.xml new file mode 100644 index 0000000..22ecd95 --- /dev/null +++ b/public/docs/learning/extending-hydra/index.xml @@ -0,0 +1,51 @@ + + + + hydra video synth + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/ + Recent content on hydra video synth + Hugo -- gohugo.io + en + + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/custom-glsl/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/custom-glsl/ + + + + + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/hydra-in-a-webpage/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/hydra-in-a-webpage/ + Hydra-Synth # In addition to using hydra within the hydra web editor, it is also possible to use the hydra video-synth engine as a library within your own javascript projects. +hydra-synth is a javascript library containing the main logic of hydra packaged as a javascript module. +To include in a webpage (bundled version): # Include the bundled version of hydra-synth in your html file: +&lt;script src=&#34;https://unpkg.com/hydra-synth&#34;&gt;&lt;/script&gt; &lt;script&gt; // create a new hydra-synth instance var hydra = new Hydra({ detectAudio: false }) osc(4, 0. + + + + Custom GLSL + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/glsl/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/glsl/ + GLSL Guide # Using custom GLSL functions # Hydra is built using GLSL (a language for generating a program, or shader, that runs directly on the graphics card using WebGl). Each javascript function in hydra corresponds directly to a snippet of shader code. Hydra has a unique way of adding custom source and transform functions which we will explain here. +setFunction # The Hydra API includes a function called setFunction which receives a specific type of JavaScript object. + + + + Using hydra with other javascript libraries + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/extending-hydra/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/extending-hydra/ + Using hydra with other javascript libraries # 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 is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! + + + + diff --git a/public/docs/learning/getting-started/index.html b/public/docs/learning/getting-started/index.html new file mode 100644 index 0000000..dcdc74e --- /dev/null +++ b/public/docs/learning/getting-started/index.html @@ -0,0 +1,1490 @@ + + + + + + + + + + + + + +Getting started | hydra video synth + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Getting started + + +
+ + + + + + +
+ + + +

+ Getting started with hydra + # +

+

This document is an introduction to making live visuals using Hydra. It covers the basics of writing code in the browser to generate and mix live video sources. No coding or video experience is necessary!

+

If you just want to start in 60 seconds you can also check:

+ +

This tutorial is meant to be used from within the hydra web editor. It is also interactive – you can directly modify the code in each code block to see how it affects the visuals.

+

+ Get to know the browser editor + # +

+

To get started, open the the hydra web editor in a separate window. Close the top window by clicking the [x] in the top right.

+

+

You will see some colorful visuals in the background with text on top in the top left of the screen. The text is code that generates the visuals behind it.

+

At the right up corner you will find a toolbar with these buttons: +

+
    +
  1. run all code Runs all code on the page (same as typing *ctrl+shift+enter)
    2. +
  2. upload to gallery upload a sketch to Hydra’s gallery and create a shorter URL
    3. +
  3. clear all resets the environment and clears text from the editor
    4. +
  4. show random sketch. Loads random sketch examples. Always it is a good way to learn Hydra by studying someone elses code.
    5. +
  5. make random change dices modify values automatically. Try it with some of the sketch examples.
    6. +
  6. show info window show overlay window with help text and links
    7. +
+

+ First line of code + # +

+

Use the clear all button drawing +to erase the previous sketch.

+

Then, type or paste the following in the editor:

+
osc().out()
+

Press the run button drawing to run this code and update the visuals on the screen. You should see some scrolling stripes appear in the background.

+
+ +
+ +

This creates a visual oscillator. Try modifying the parameters of the oscillator by putting a number inside the parentheses of osc(), for example osc(10).out().

+

Re-run the code by pressing the run button again, and seeing the visuals update. Try adding other values to control the oscillator’s frequency, sync, and color offset.

+
+ +
+ +

Trick: you can also use the keyboard shortcut ‘ctrl + shift + enter’ to have the same effect as the run button.

+

+ Adding transformations + # +

+

We can add another transformation to the oscillator from above, by adding the function rotate() after the oscillator:

+
+ +
+ +

As you can see, you have first an input source osc() and things that come after (rotate() and out()) are connected with a dot ‘.’ +In this sense, Hydra is inspired by modular synthesis. +Instead of connecting cables you connect different kinds of javascript functions.
+

+
+ source Sandin Image Processor + # +
+

You can continue adding transformations to this chain of functions. For example:

+
+ +
+ +

Repeat:

+
+ +
+ +

For more available sources and transformations, see the interactive function reference. +The logic is to start with a source (such as osc(), shape(), or noise()), and then add transformations to geometry and color (such as .rotate(), .kaleid(), .pixelate() ), and in the end always connect the chain of transformations to the output screen .out() .

+
+ +
+ +
+ +
+ +

+ What is an error? + # +

+

Sometimes, you will try to run a line of code, and nothing will happen. If you have an error you’ll notice text in red at the left-bottom on your screen. Something like ‘Unexpected token ‘.’ (in red) will appear. This doesn’t affect your code, but you won’t be able to continue coding until you fix the error. Usually it is a typing error or something related to the syntax.

+

+ What is a comment? + # +

+
// Hello I’m a comment line. I’m a text that won’t change your code. You can write notations, your name or even a poem here.
+

+ Save your sketch on the internet + # +

+

When you evaluate the entire code with the run button or with shift + ctrl + enter, Hydra automatically generates a URL that contains the last changes of your sketch. You can copy and paste the url from the URL bar to save it or share it with other people. You can also use the browser back and forward arrows to navigate to earlier versions of your sketch. +

+

+ 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:

+
s0.initCam()
+

This activates the webcam source inside a variable called s0, and you should see the light on your webcam light up. However, you will still not see the webcam image on the screen. In order to use the camera within a hydra sketch, you need to use it within the src() function.

+
+ +
+ +

Similar to adding transformations above, you can add transformations of color and geometry to the camera output, by adding functions to the chain:

+
+ +
+ +
+ +
+ +

If you have multiple webcams, you can access separate cameras by adding a number inside initCam, for example s0.initCam(1) or s0.initCam(2).

+

+ 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.

+
+ +
+ +

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.

+
+ +
+ +

Trick: try to create different sketches and switch them in your live performance or even combine them.

+
+ +
+ +

+ Blending multiple visual sources together + # +

+

You can use blend functions to combine multiple visual sources. .blend() combines the colors from two sources to create a third source.

+
+ +
+ +

Try adding transformations to the above sources (such as osc(10).rotate(0, 0.1).out(o1)) to see how it affects the combined image. You can also specify the amount of blending by adding a separate parameter to .blend(), for example .blend(o1, 0.9).

+

There are multiple blend modes in hydra, similar to blend modes you might find in a graphics program such as photoshop or gimp. See the function reference for more possibilities.

+
+ +
+ +

+ Modulation + # +

+

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 the same sources from above, we can use an oscillator to modulate or warp the camera image:

+
+ +
+ +

You can add a second parameter to the modulate() function to control the amount of warping: modulate(o1, 0.9). In this case, the red and green channels of the oscillator are being converted to x and y displacement of the camera image.

+

All geometry transformations have corresponding modulate functions that allow you to use one source to warp another source. For example, .modulateRotate() is similar to .rotate(), but it allows you to apply different amounts of rotation to different parts of the visual source. See the function reference for more examples.

+
+ +
+ +

+ More blending and modulating + # +

+

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.

+
+ +
+ +

This allows you to use many sources, blend modes, and modulation, all from within the same chain of functions.

+
+ +
+ +

Trick: use ctrl + shift + f from the web editor to auto-format your code

+

+ Modulating with the camera + # +

+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +

We have now covered all of the basic types of functions within hydra: source, geometry, color, blending, and modulation! See what you can come up with by mixing these together.

+

+ Have fun! + # +

+
+

by Flor de Fuego and Olivia Jack

+
+ + + +
+ +
+ + +
+ Calendar + November 20, 2023 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/guides/automatic-patches/index.html b/public/docs/learning/guides/automatic-patches/index.html new file mode 100644 index 0000000..d59f189 --- /dev/null +++ b/public/docs/learning/guides/automatic-patches/index.html @@ -0,0 +1,1143 @@ + + + + + + + + + + + + + +Iteration: automatically generate patches | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Iteration: automatically generate patches + + +
+ + + + + + +
+ + + +

+ Using iteration and conditionals to create patches + # +

+
+

by geikha

+
+ Note + # +
+

For this tutorial we’ll be assuming you’ve already learned by your own means what iteration and conditionals are in a programming context.

+

+ Iteration : automatically generate patches + # +

+

As you may know from regular programming, or other creative coding environments such as p5, iteration helps us repeat some operation(s) many times to achieve a specific goal. Maybe you would like to layer many similar objects but with slightly different values, and you want so many of them that writing each one manually isn’t desirable. Maybe you want to have some form of very specific feedbacks, etc. +Let’s jump straight into some examples.

+

+ for loops + # +

+

For loops that generate patches can be used inside or outside functions, but we will be sticking with the latter for convenience.

+

The typical structure of a patch-generating for loop is as follows:

+
someFunction = (iterations) => {
+	accumulator = osc(); // first part of the patch, a source
+  	for(i=1; i<iterations; i++){ // i is also called a "counter`
+    	accumulator.someTransform(i);
+    }
+  	return accumulator;
+}
+someFunction(5).out()
+

Of course this is just a useful example, and your code may end up looking very different depending on what crazy ideas you want to try. But let’s use this as a starting point. See how the use of a function allows us to reuse this iterative process with different parameters such as the amount of iterations. Also note how we start the counter variable i on the value 1 instead of the typical 0. Since 0 will usually null an effect, the result will be equal to the first value assigned our accumulator, so we can skip the 0 iteration altogether. For those not familiar with the abbreviation i++, this basically means i+=1, which means i = i+1.

+
+ Example: rotating + # +
+
+ +
+ +

Here we want to see how it would look like if we grab an oscillator of a given freq frequency, and calculate the diff between other rotated oscillators of the same frequency. To achieve that, we define our accumulator nest with the initial value of osc(freq,.02). Then, we define a step which will be how many radians the oscillator will rotate. We calculate this as a division of 2pi (a full 360° turn) by some div number. Then we iterate over nest, applying the diff and the effect respectively, and adding a step to our counter r each iteration.

+
+ Example: very specific feedback + # +
+
+ +
+ +
+ Example: layering varying circles + # +
+
+ +
+ +

Try adding or changing the transforms that happen to every nextCircle and see how drastically yet easily they can change the visuals. Specially using transforms like repeatX. +Still, always keep in mind while using iteration, that the more effects and iterations you add, the heavier the sketch will be to process.

+

+ .forEach, .map and .reduce + # +

+

Those familiar with more array focused programming languages such as Python or Haskell, or more functional structures even inside JavaScript, may be used to iterating using the forEach, map and/or reduce structures. Where given an Array, we use each value to alter something or to reduce the entire Array into a desired result. +Practically anything done with these functions can be done using for loops, so if you are new to these or you just don’t like how they look, then there really is no need for you to learn these, even if you’re super interested in iteration.

+
+ .forEach + # +
+

Structures using .forEach are quite useful for those who’d like to generate patches from predefined data. Here’s an example using the ASCII values of a given string:

+
+ +
+ +

Try changing the text, and remember not to use very long strings given they will be quite heavy to process.

+
+ .reduce + # +
+

Using .reduce is quite useful when you have an array of textures. Here’s a simple example:

+
+ +
+ +
+ .map + # +
+

Haters of state (non-political) will prefer .map any day over .forEach. Looking at the example for .forEach, we see were creating a texture and adding it to an accumulator for each element in the Array. We can separate the texture generating part of the code and the blending part using .map to get an array of textures and .reduce to blend them:

+
+ +
+ +

+ Conditionals + # +

+

Conditionals aren’t very useful on their own here, given all code execution on Hydra happens arbitrarily and manually via the interaction of the user. The only case you would want to use an if statement by its own while livecoding Hydra is that where you’d like some variable to change given some condition and only at the time of each code evaluation. But even still, you’ll see that putting any conditionals inside functions will be the most useful approach because of code reusability and readability. Let’s get to it.

+

+ Conditionals in functions + # +

+

We know from previous tutorials we can make our own functions to be used as arguments of Hydra sources and transforms, and how Hydra evaluates these functions each frame. Here’s an example where we use conditionals to have a hue change happen only during 3 seconds out of every 10 seconds:

+
+ +
+ +

Another common use of conditionals in programming is to avoid errors or undesired behaviors. Here’s a simple example where we wrap the square root function from the Math API into our own sqrt function which turns any negative input into positive:

+
+ +
+ +

+ The ternary operator + # +

+

Before we go forward and use both iteration and conditionals, we’d like to show you the ternary operator. This operator can simplify many conditional operations. The syntax is the following:

+
x = condition ? valueIfTrue : valueIfFalse;
+
+// which is the same as
+if(condition)
+    x = valueIfTrue
+else
+    x = valueIfFalse
+

Now we can simplify the hue change example into:

+
osc(20,.1,2.6)
+	.modulate(osc(20).rotate(Math.PI/2),.3)
+	.hue(()=> time%10<3 ? time/2 : 0)
+	.out()
+

+ Conditionals inside iterations + # +

+

Let’s go back to a previous example, the nest, where we wanted to do many diff using the same oscillator many times with different angles of rotation. Here’s a new version where we invert the colors of the first half of oscillators, and we apply colorama to the oscillator in every other iteration.

+
+ +
+ +

The first change you’ll notice is that now we’re calculating the angle of rotation r inside the iteration, and for that we now use a regular counter such as i. We can get the exact same angle of rotation as before via multiplying the counter by the step. We do this specifically because if we want to have something happen every other condition, we’ll need to know if the number of iteration we’re in is even or not. This is what happens at if(i%2==0). +However we still make use of r inside of the first conditional, if(r<Math.PI). This will result in about half of the oscillators to be inverted, given Math.PI is half a turn.

+
+
+ + + +
+ +
+ + +
+ Calendar + November 17, 2023 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/guides/color/index.html b/public/docs/learning/guides/color/index.html index 2b2eb5a..63392aa 100644 --- a/public/docs/learning/guides/color/index.html +++ b/public/docs/learning/guides/color/index.html @@ -14,9 +14,9 @@ Color | hydra video synth - + - + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Frames and Timing + + +
+ + + + + + +
+ + + +

+ frames and timing + # +

+

by geikha

+

+ Using the update function + # +

+

There’s a function in the Hydra API called update. This function runs at the beginning of every frame render right before the values for time and a.fft are calculated. If you are familiar with Processing or p5, you can think of update as Hydra’s equivalent to the draw function. +Using update can be very useful for creating generative visuals (generative in the sense of controlling visual elements with values that evolve through time either randomly or following certain rules). It can also be used to have a finer and/or connected control over parameters when compared to using simple arrow functions as arguments. +It is also worth noting that the function receives a dt argument, which contains the delta time elapsed between the rendering of the previous frame and the current one. You may or may not want to use this to control your visuals (most of the examples don’t use it, actually).

+

+ Examples + # +

+

+ Using update and time to have complex control of parameters through time + # +

+
+ +
+ +

The structure time % every < duration is super useful to make stuff happen every certain amount of seconds, for a given duration (also in seconds). +time % wavelength / wavelength can be interpreted as a sawtooth wave with a given wavelength. This would generate an ascending sawtooth going from 0 to 1 in the amount of time specified by whe wavelength. For a descending one you can write something like 1-(time % wavelength / wavelength). If you want values from 0 to wavelength just remove the division.

+

+ Adding a frame counter to make frame-specific actions + # +

+

Having something appear for only one frame can be super useful in many feedback-based sketches:

+
+ +
+ +

+ Randomly evolving values through time (Random walker) + # +

+
+ +
+ +

+ update vs Arrow functions + # +

+

Every function that you use as an argument is evaluated right before the current frame is about to be rendered. Which is the same thing that happens with the update function! This means, unless we use dt, everything we can do on update we can technically do on argument functions. It’s up for us to decide when one’s better than the other. If we are controlling many interconnected variables and procedures, most probably, an arrow function or a named function won’t be that nice to use. It’ll be confusing as to why a function which is supposed to represent a simple dynamic argument is doing so much stuff inside of itself. Maybe we could separate the different behaviors into many arrow functions. But if these functions were to feed from each other, this will yet again get confusing quite rapidly. Even then, there are many scenarios where an arrow function can do the same work as the update function with less code. For example, here’s a patch where a circle chases your mouse:

+
+ +
+ +
+ + + +
+ +
+ + +
+ Calendar + November 15, 2023 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/guides/how-to/index.html b/public/docs/learning/guides/how-to/index.html new file mode 100644 index 0000000..1854930 --- /dev/null +++ b/public/docs/learning/guides/how-to/index.html @@ -0,0 +1,855 @@ + + + + + + + + + + + +How to | hydra video synth + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + How to + + +
+ + + + + + +
+ + + +

+ how-to + # +

+
    +
  • record hydra output
    • +
  • Embed hydra in a website
    • +
  • Route audio
    • +
  • Use hydra offline in atom
    • +
  • Publish an extension
    • +
  • Contribute to documentation
    • +
  • Contribute to hydra code repository
    • +
  • Record a video
    • +
+
+ + + +
+ +
+ + +
+ Calendar + November 20, 2023 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/guides/how-to/index.xml b/public/docs/learning/guides/how-to/index.xml new file mode 100644 index 0000000..49d1aff --- /dev/null +++ b/public/docs/learning/guides/how-to/index.xml @@ -0,0 +1,31 @@ + + + + How to on hydra video synth + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/how-to/ + Recent content in How to on hydra video synth + Hugo -- gohugo.io + en + + Record hydra's output + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/how-to/record-hydra-output/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/how-to/record-hydra-output/ + Recording # Saving images from Hydra # You can press Ctrl+Shift+S to save a screenshot of your Hydra&rsquo;s canvas, as well as the code that generates the screenshot. You can also do this programmatically calling the function screencap() +Hydra&rsquo;s built-in recorder # You can very easily record a video evaluating the following commands: +vidRecorder.start() // run this to start recording vidRecorder.stop() // run this to stop recording and download video Videos recorded with this method are recorded and downloaded with the vp9 codec and webm filetype. + + + + Use hydra without showing the code + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/how-to/use-hydra-without-showing-code/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/how-to/use-hydra-without-showing-code/ + How can I livecode Hydra without showing the code over the visuals? # You can either: +Use Flok: # Open https://flok.cc/ and create a session with hydra as a target. Now that you have your own Hydra session, with its own URL (it automatically changes on your browser&rsquo;s nav bar), open it in one more tab. Enter the session in both tabs. You can disable Hydra on one of them if you want to (this would also lower resource demand). + + + + diff --git a/public/docs/learning/guides/how-to/record-hydra-output/index.html b/public/docs/learning/guides/how-to/record-hydra-output/index.html new file mode 100644 index 0000000..74392d7 --- /dev/null +++ b/public/docs/learning/guides/how-to/record-hydra-output/index.html @@ -0,0 +1,916 @@ + + + + + + + + + + + + + +Record hydra's output | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Record hydra's output + + +
+ + + + + + +
+ + + +

+ Recording + # +

+
+

+ Saving images from Hydra + # +

+

You can press Ctrl+Shift+S to save a screenshot of your Hydra’s canvas, as well as the code that generates the screenshot. You can also do this programmatically calling the function screencap()

+
+

+ Hydra’s built-in recorder + # +

+

You can very easily record a video evaluating the following commands:

+
vidRecorder.start() // run this to start recording
+
+vidRecorder.stop()  // run this to stop recording and download video
+

Videos recorded with this method are recorded and downloaded with the vp9 codec and webm filetype. However, they can also be quite low quality.

+
+

+ OBS + # +

+

OBS is the preferred recording method by most Hydra users. It’s a free and open source software for video recording and live streaming available on practically all platforms.

+

+ How to use OBS + # +

+
    +
  1. Download and open OBS
    2. +
  2. In the Controls pane on the right side, click on Settings
    3. +
  3. Go to the Output tab, then to the Recording pane and set your preferences. Then click on OK.
    4. +
  4. On the Sources pane, click on the + icon and select Window Capture. If you want to, give the new source a name and click OK
    5. +
  5. Set the Window to the browser your running Hydra on. Most users also prefer to unselect the Capture cursor setting. Click OK.
    6. +
  6. On the preview at the middle of the screen, select your source, right click and then click on Resize output (source size), select Yes.
    7. +
  7. Set your audio input’s volume (or mute it) on the Audio Mixer pane.
    8. +
  8. On the Controls pane, click Start Recording. When you want to stop, click Stop Recording.
    9. +
+

+ Trim the browser’s UI + # +

+

If you don’t want to record your browser’s UI, do the following:

+
    +
  1. Right click your source and click on Filters.
    2. +
  2. Click on the + icon on the lower left corner and select Crop/Pad. Click OK.
    3. +
  3. Set the values until your UI disappears. Sometimes you only need to set the Top value.
    4. +
  4. Click OK
    5. +
+

+ Note on window size + # +

+

If you want to set your browser’s window to a specific size, there are various add-ons on different browsers that allow you to do that. Remember you want to set the size of the view pane and not the whole window.

+
+

by geikha

+
+ + + +
+ +
+ + +
+ Calendar + November 20, 2023 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/guides/how-to/use-hydra-without-showing-code/index.html b/public/docs/learning/guides/how-to/use-hydra-without-showing-code/index.html new file mode 100644 index 0000000..6f0d6f3 --- /dev/null +++ b/public/docs/learning/guides/how-to/use-hydra-without-showing-code/index.html @@ -0,0 +1,877 @@ + + + + + + + + + + + + + +Use hydra without showing the code | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Use hydra without showing the code + + +
+ + + + + + +
+ + + +

+ How can I livecode Hydra without showing the code over the visuals? + # +

+

You can either:

+

+ Use Flok: + # +

+

Open https://flok.cc/ and create a session with hydra as a target. +Now that you have your own Hydra session, with its own URL (it automatically changes on your browser’s nav bar), open it in one more tab. +Enter the session in both tabs. You can disable Hydra on one of them if you want to (this would also lower resource demand). +On one of your tabs, press “Ctrl+Shift+H” to hide the code. +Now you can code on one tab and commands will also run on the other tab!

+

+ Use your browser’s dev tools console: + # +

+

Here’s a tutorial by Flor de Fuego about how to do this: +[EN] + +

+ +
+ +[ES] + +
+ +
+

+
+ + + +
+ +
+ + +
+ Calendar + November 17, 2023 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/guides/hydra-garden/index.html b/public/docs/learning/guides/hydra-garden/index.html new file mode 100644 index 0000000..c6f8622 --- /dev/null +++ b/public/docs/learning/guides/hydra-garden/index.html @@ -0,0 +1,834 @@ + + + + + + + + + + + + + +Hydra Garden | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Hydra Garden + + +
+ + + + + + +
+ + + +
+ + + +
+ +
+ + +
+ Calendar + November 20, 2023 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/guides/index.html b/public/docs/learning/guides/index.html index 34b79e2..21a650b 100644 --- a/public/docs/learning/guides/index.html +++ b/public/docs/learning/guides/index.html @@ -3,19 +3,19 @@ - + - + -guides | hydra video synth +Guides | hydra video synth - + - + + @@ -466,9 +827,9 @@

-
+
Calendar - April 5, 2023 + November 20, 2023
@@ -511,11 +872,9 @@

diff --git a/public/docs/learning/guides/index.xml b/public/docs/learning/guides/index.xml index c5427fc..6f2ceb2 100644 --- a/public/docs/learning/guides/index.xml +++ b/public/docs/learning/guides/index.xml @@ -1,13 +1,13 @@ - guides on hydra video synth + Guides on hydra video synth https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/ - Recent content in guides on hydra video synth + Recent content in Guides on hydra video synth Hugo -- gohugo.io en - Textures + Hydra Book: Textures https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/textures/ Mon, 01 Jan 0001 00:00:00 +0000 @@ -19,30 +19,61 @@ Oscillator # osc(freq,sync,offset) is one of the basic sources to create a textu - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/audio/ + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/color/ Mon, 01 Jan 0001 00:00:00 +0000 - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/audio/ - Audio Guide # 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&rsquo;t need to know what it is or how it achieves what it does to use it, but you need to understand the following: + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/color/ + - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/color/ + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/feedback/ Mon, 01 Jan 0001 00:00:00 +0000 - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/color/ + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/feedback/ - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/feedback/ + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/frames-and-timing/ Mon, 01 Jan 0001 00:00:00 +0000 - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/feedback/ + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/frames-and-timing/ + frames and timing # by geikha +Using the update function # There&rsquo;s a function in the Hydra API called update. This function runs at the beginning of every frame render right before the values for time and a.fft are calculated. If you are familiar with Processing or p5, you can think of update as Hydra&rsquo;s equivalent to the draw function. Using update can be very useful for creating generative visuals (generative in the sense of controlling visual elements with values that evolve through time either randomly or following certain rules). + + + + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/hydra-garden/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/hydra-garden/ + + Iteration: automatically generate patches + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/automatic-patches/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/automatic-patches/ + Using iteration and conditionals to create patches # by geikha +Note # For this tutorial we&rsquo;ll be assuming you&rsquo;ve already learned by your own means what iteration and conditionals are in a programming context. +Iteration : automatically generate patches # As you may know from regular programming, or other creative coding environments such as p5, iteration helps us repeat some operation(s) many times to achieve a specific goal. Maybe you would like to layer many similar objects but with slightly different values, and you want so many of them that writing each one manually isn&rsquo;t desirable. + + + + javascript for hydra users + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/javascript/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/javascript/ + JavaScript Guide # This guide is made for users who are new to JavaScript or coding in general and would like to dive into these topics. You don&rsquo;t need to fully understand what&rsquo;s here to use Hydra. If you&rsquo;re just starting with Hydra and you have no coding experience, we recommend you experiment with Hydra a bit before reading this. +Comments # // This is a one line comment Most programming languages have implemented in them a feature commonly referred as comments. + + diff --git a/public/docs/learning/guides/javascript/index.html b/public/docs/learning/guides/javascript/index.html new file mode 100644 index 0000000..19d778c --- /dev/null +++ b/public/docs/learning/guides/javascript/index.html @@ -0,0 +1,1339 @@ + + + + + + + + + + + + + +javascript for hydra users | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + javascript for hydra users + + +
+ + + + + + +
+ + + +

+ JavaScript Guide + # +

+

This guide is made for users who are new to JavaScript or coding in general and would like to dive into these topics. You don’t need to fully understand what’s here to use Hydra. If you’re just starting with Hydra and you have no coding experience, we recommend you experiment with Hydra a bit before reading this.

+

+ Comments + # +

+
// This is a one line comment
+

Most programming languages have implemented in them a feature commonly referred as comments. These are ways to write annotations into your code without having the machine interpret them as code. JavaScript, the scripting language that Hydra works on, has implemented comments in the same tradition as many other languages such as Java or C. You use // for single line comments, and you can use /* ... */ for multi-line comments.

+
/*
+    An example of a multi line commentary:
+    This sketch shows an oscillator:
+*/
+osc().out()
+

You can also write comments at the end of lines of code too, which is very useful while annotating what’s going on with your visuals sometimes:

+
noise(2,.5)
+	.diff(src(o0).rotate(Math.PI/4)) // rotating by 45°
+ 	.thresh(.5)
+	.color(1,.1,.3) // pink color
+	.out()
+

You will surely find useful sometimes to “comment in and out” some lines of code to see how it affects the visuals, or simply to understand what each line of code does. By adding a // at the start of a line you can comment it out and see how some sketch would look like without a given transform without having to delete the original line.

+
noise(2,.5)
+	.diff(src(o0).rotate(Math.PI/4)) // rotating by 45°
+ 	//.thresh(.5)
+	.color(1,.1,.3) // pink color
+	.out()
+
+

+ Variables + # +

+

Variables are spaces of memory in your computer that you reserve to store some value. Each variable you use will have a unique symbolic name. This definition may sound complicated, but you’ll see it’s really as intuitive as it can be. You may remember variables from mathematics being letters that represent some sort of number. This is precisely the same, you just choose some name and assign some number (or other type of information) to it.

+
+ +
+ +

In the previous example, freq is the name of the variable and 50 is its value.

+

Variable names can’t start with numbers, they start with letters and it’s conventional in JavaScript to start with a lowercase. When the name of your variable is more than one word, it’s also conventional to write them as such:

+
+ +
+ +

However this is just a convention, you may find other ways of naming your variables more useful. You may even like to use only one letter variables (such as x, y, etc), it’s faster to code but harder for others to understand. Find your own balance and style.

+

+ Global variables + # +

+

When you declare a variable in Hydra, it declares it for you on the global scope. You can imagine a scope as a piece of code that works on its own and has its own variables. However, the global scope is basically a bunch of variables and functions that can be accessed from anywhere (functions such as osc() are declared in the global scope so that you can use them by just calling them, no matter where, for example). +We can make it explicit that we want something on the global scope. In JavaScript, since it’s made to run on a browser, we do this by declaring variables on the window object (what is an object, you can find out below), which represents the browser’s window.

+
window.globalVariable = 21.4
+
+osc(globalVariable).out()
+

However, you can drop the window. part since the default behavior is the same:

+
globalVariable = 21.4
+
+osc(globalVariable).out()
+

If you see JavaScript code elsewhere you’ll surely see the keywords let or const. These define variables on their scope. So avoid them if you want to declare variables that can be freely used while livecoding.

+
let scopedVariable = 21.4
+// this will only work if evaluated on the same block
+osc(scopedVariable).out()
+

This knowledge will come in handy if you start coding functions for example, since each function has its own scope, and if you want to declare something on the global scope, you’ll have to be explicit about it.

+
+

+ Arrays + # +

+

Arrays are basically lists of values. Instead of declaring 100 variables to represent different values of the same concept you can just use a list of values. The key thing is these values are related, they will serve the same purpose somewhere in our code. If they are not related, using a list isn’t really useful, we’ll be just confusing ourselves thinking about where in the list did we put this or that other value. Here’s an example of an Array:

+
+ +
+ +

The example above isn’t that useful in a Hydra context, but we hope it illustrates the basics of how an Array is created and used. +Arrays in JavaScript (and in most programming languages) start counting their elements from 0 and not from 1. So if you want the first element of the rots Array, you need to call array[0] instead of array[1]! Same goes for every element. If you want the third element call array[2], and so on. Remember that nth element = array[n-1]

+

+ Arrays as sequences + # +

+

Arrays in Hydra can be used as inputs. Hydra takes the list of values and makes a sequence out of them:

+
+ +
+ +

You can learn more about dynamic inputs here.

+
+

+ Functions + # +

+

A function is similar to a variable in the sense that you’re going to give it its own name and call it multiple times later. The difference being that functions do not store values, they store pieces of code that -usually- return some value. +You can see them as little boxes where you put something in and they spit something out. +Functions will help you not to repeat your code multiple times, sometimes you’ll see you can write a function that spits out what you need instead of rewriting it many times.

+

+ Defining functions + # +

+

There are multiple ways to define functions in JavaScript, here’s an example of a function named sum that takes two numbers called a and b and returns (spits out) the sum of both numbers:

+
function sum(a,b){
+	return a+b;
+}
+
+sum = function(a,b){
+	return a+b;
+}
+
+sum = (a,b) => a+b
+

We’ll be sticking with the last form of defining functions, usually called ‘arrow function’. It is worth noting the first form it’s a bit like using let and const for variables, they work on their own scope.

+

+ Local variables in functions + # +

+

Talking about scope, you may want to define variables inside your functions, which are local to the functions and aren’t variables that should be used globally. Now the let keyword becomes useful.

+
sum = function(a,b){
+    let result = a+b;
+	return result;
+}
+
+sum = (a,b) => a+b
+

+ Functions that return a texture + # +

+
+ +
+ +

Now you may be thinking “Wait, shouldn’t this simply be a variable that stores that texture? If there’s no input what’s the use of having a function here?”. And in a way you would totally be right. Except for the fact that if you use a variable to store that shape, you’ll be always referring to the exact same object that represents that shape. If you use a variable circle and apply some transforms to it somewhere in your patch, and try to use circle again later, all the transforms that you applied will be there! Because you applied those to that object precisely. Also, even if you don’t apply any transforms, JavaScript can be very messy when referencing the same object multiple times in some situations. So, if you use a function, each time you call it a new object representing that texture will be created. +Another reason we would use a function in this example is that if we want to add some input to this function, well, it’s already a function so we can do it.

+

Let’s see how we could make the circle function more useful by adding parameters:

+
+ +
+ +

Now, each time we call the circle function we can specify a size and blur. We can also omit the blur and the function will use the default value specified next to it. +We also changed the scaling to an arrow function, which you may find surprising if you haven’t seen it before. When you use a function as an argument, Hydra will evaluate that function every time it renders a frame and use the return of that function in the rendering of that frame. In other words, functions can be used as dynamic inputs.

+

+ Using declared functions as inputs + # +

+

As we just mentioned, we can use arrow functions inside the arguments of a given source or transform for it to react in real time. If you have many arguments using the same arrow function, you may want to declare it and reuse its name:

+
+ +
+ +

+ Calling declared functions from other functions + # +

+

Sometimes you want to reuse a function but have something change about it. For example, maybe we want to make the scaling negative for the feedback in the last example. But calling -scaling doesn’t make sense, at least to JavaScript, since the negative of a function doesn’t exist. But the negative of its return does:

+
+ +
+ +
+ Note on functions with parameters + # +
+

You’ll also come across this if your function has parameters. For example:

+
scaling = (multiplier)=> (.9+(Math.sin(time*2)/3))*multiplier
+

Doing .scale(scaling) doesn’t make sense anymore, since you aren’t giving it its necessary input. And if you try to do .scale(scaling(-1)), Hydra will evaluate the function once and use its return as the input to scale, instead of using a function which is what we want for the visual to react to the changes in time. The solution is, again, a function that calls your function, such as .scale(()=>scaling(-1)). If for some reason you hate arrow functions, you could also try binding it doing .scale(scaling.bind(0,1)).

+

+ Higher-order functions + # +

+

Higher order functions just means functions that take other functions as arguments. These are useful when you want to make u new functions which take behavior from other functions. As an example, let’s visualize applying a sine function (with some tweaks) to itself:

+
+ +
+ +

That new ...args thing simply takes all the arguments sent to a function, we use it so we can call whatever function sent with as many arguments as it needs. +Take into account twice(myFunc,time) is the same as myFunc(myFunc(time)), and you may prefer to write the latter in many occasions. But you can also send an arrow function to twice, which could save you declaring a functions you may only want to use once, or writing the same declaration twice.

+
+

+ Objects + # +

+

You can imagine an object as a special variable, which instead of containing a value, it contains other variables and functions. The former are usually called properties of an object and the latter are methods of an object. +For example, if you ever use Hydra on instance mode, what you’ll come across is Hydra as a special object containing all the functions you know and love, instead of having them on the global scope.

+

Let’s see an example of how to declare and use an object with some properties:

+
+ +
+ +

And now let’s add a method:

+
+ +
+ +

There’s a new keyword that we hadn’t seen before here: this. The this keyword is used in methods (functions of an object) to refer to the object from which the method is called.

+

Objects can also be conceptualized as dictionaries, with keys and values. The keys would be the names of the properties (and methods) of the object and the values is what they store:

+
numbers = {
+	pi: 3.14159265359,
+	e: 2.71828182846,
+	golden: 1.61803398875
+}
+numbers['pi'] // another way we can call keys from an object
+

+ Useful properties in the window object + # +

+

The window object has lots of information about the environment that our visuals run on. You’ll see lots of Hydra sketches that make use of them, more commonly for example, the innerWidth and innerHeight properties. These properties store the respective width and height that the webpage occupies on your screen.

+

For example, we can calculate the ratio between height and width to have perfect squares on our sketches:

+
// this example will only work on the editor or atom-hydra
+screenRatio = innerHeight/innerWidth
+shape(4,.4).scale(1,screenRatio)
+	.out()
+

There’s also the less used screenX and screenY which will tell you the position of the window relative to the full screen. +Try to move your browser’s window with the following example:

+
+ +
+ +
+

+ The Math Object + # +

+

You have surely seen many examples in Hydra and in these tutorials that make use of mathematical functions such as the sine wave. You may have also noticed that each time one of them is used, they’re written as Math.somefunction(). The reason for this is that all these very useful functions are taken from a special object called Math that is present in practically every JavaScript implementation. +You can see the full list of functions and variables in the Math object clicking here.

+

+ Math.PI + # +

+

One of the most useful predefined variables that the Math API has is the value of pi (well, an approximation considering that pi has infinite decimals). Many Hydra functions take radians as arguments which you may know are usually represented using multiples of pi. For example, if you want to rotate a texture exactly half a pi (90 degrees), you can do it as such:

+
+ +
+ +
+

by geikha

+
+ + + +
+ +
+ + + + + + + + + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/guides/textures/index.html b/public/docs/learning/guides/textures/index.html index 105e851..75deecd 100644 --- a/public/docs/learning/guides/textures/index.html +++ b/public/docs/learning/guides/textures/index.html @@ -7,20 +7,20 @@ In this chapter, we discuss textures or patterns, separately from colors or movements. Most of the snippets have low saturation in order to separate textures from other effects. Oscillator # osc(freq,sync,offset) is one of the basic sources to create a texture. The first argument determines the frequency (i.e., how packed the stripes are), the second for the sync (i.e., the scroll speed), and the third for the offset, which adds color to the pattern."> - + - -Textures | hydra video synth + +Hydra Book: Textures | hydra video synth - + - + +

+ web editor + # +

+

key commands, comments, saving sketches, loading extensions and external libraries, publishing to the gallery

+

video synth basics # -

-

overview of hydra’s modular approach and main function types: sources, geometry, color, blending, and modulation

-

- external sources - # -

-

using webcams, images, videos, html canvas elements, and live streams inside a hydra sketch

-

- sequencing and interactivity - # -

-

Making dynamic and interactive sketches using arrays, custom functions, audio reactivity, mouse input, and MIDI controllers.

+

+

overview of hydra’s modular approach and main function types: sources, geometry, color, blending, and modulation.

+

+ external sources + # +

+

using webcams, images, videos, html canvas elements, and live streams inside a hydra sketch

-

- 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 - # -

-

a quick reference for common questions

-

+

+ sequencing & interactivity + # +

+

making dynamic and interactive sketches using arrays, custom functions, audio reactivity, mouse input, and MIDI controllers.

+ +

+ extending hydra + # +

+

using hydra with other javascript libraries such as P5.js, Tone.js, strudel. Writing custom GLSL functions, and using hydra in your own webpage.

+

guides # -

+

deeper dives into hydra topics written by members of the community.

@@ -468,9 +828,9 @@

-
+
Calendar - April 15, 2023 + November 20, 2023
diff --git a/public/docs/learning/index.xml b/public/docs/learning/index.xml index c351543..63d6ad3 100644 --- a/public/docs/learning/index.xml +++ b/public/docs/learning/index.xml @@ -7,55 +7,24 @@ Hugo -- gohugo.io en - getting started - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/getting-started-short/ - Mon, 01 Jan 0001 00:00:00 +0000 - - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/getting-started-short/ - Getting started # Play with gallery examples # The simplest way to get started with hydra is to play around with the example sketches in the web editor. -To get started, open the the hydra web editor in a separate window. Close the top window by clicking the [x] in the top right. -You will see some colorful visuals in the background with text on top. The text is code that generates the visuals behind it. - - - - video synth basics - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/video-synth-basics/ - Mon, 01 Jan 0001 00:00:00 +0000 - - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/video-synth-basics/ - Modular Video Synth Basics # Hydra is inspired by modular synthesis. Instead of connecting cables you connect different kinds of javascript functions. -source Sandin Image Processor # Press the run button to run this code and update the visuals on the screen. You should see some scrolling stripes appear in the background. -This creates a visual oscillator. Try modifying the parameters of the oscillator by putting a number inside the parentheses of osc(), for example osc(10). - - - - external sources: cameras, videos, streams - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/external-sources/ - Mon, 01 Jan 0001 00:00:00 +0000 - - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/external-sources/ - External Sources # 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: -s0.initCam() This activates the webcam source inside a variable called s0, and you should see the light on your webcam light up. However, you will still not see the webcam image on the screen. - - - - sequencing & interactivity - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/interactivity/ - Mon, 01 Jan 0001 00:00:00 +0000 + Getting started + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/getting-started/ + Tue, 04 Apr 2023 15:10:36 +0200 - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/interactivity/ - Sequencing and Interactivity # If you&rsquo;re coding in Hydra, you&rsquo;re constantly trying many values to input to the sources and transforms, and it&rsquo;s just a matter of time until you like how more than one looks, and you want to somehow switch between them. We&rsquo;ll be referring to this idea of arguments whose value change over time as dynamic arguments. And there are two main ways to achieve this in Hydra: Arrays and functions. + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/getting-started/ + Getting started with hydra # This document is an introduction to making live visuals using Hydra. It covers the basics of writing code in the browser to generate and mix live video sources. No coding or video experience is necessary! +If you just want to start in 60 seconds you can also check: +Getting started short version This tutorial is meant to be used from within the hydra web editor. - using the web editor + Using the web editor https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/web-editor/ Tue, 04 Apr 2023 15:10:36 +0200 https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/web-editor/ - Get to know the browser editor # To get started, open the the hydra web editor in a separate window. Close the top window by clicking the [x] in the top right. -You will see some colorful visuals in the background with text on top in the top left of the screen. The text is code that generates the visuals behind it. -At the right up corner you will find a toolbar with these buttons: run all code Runs all code on the page (same as typing *ctrl+shift+enter) upload to gallery upload a sketch to Hydra&rsquo;s gallery and create a shorter URL clear all resets the environment and clears text from the editor show random sketch. + Web editor # basics of the browser editor at https://hydra.ojack.xyz +key commands # CTRL-Enter: run a line of code CTRL-Shift-Enter: run all code on screen ALT-Enter: run a block CTRL-Shift-H: hide or show code CTRL-Shift-F: format code using Prettier CTRL-Shift-S: Save screenshot and download as local file. The CTRL-Shift-G: Share to twitter (if available). Shares to @hydra_patterns toolbar # At the right up corner you will find a toolbar with these buttons: run all code Runs all code on the page (same as typing *ctrl+shift+enter) upload to gallery upload a sketch to Hydra&rsquo;s gallery and create a shorter URL clear all resets the environment and clears text from the editor show random sketch. diff --git a/public/docs/learning/sequencing-and-interactivity/arrays/index.html b/public/docs/learning/sequencing-and-interactivity/arrays/index.html new file mode 100644 index 0000000..0633958 --- /dev/null +++ b/public/docs/learning/sequencing-and-interactivity/arrays/index.html @@ -0,0 +1,1167 @@ + + + + + + + + + + + + + +Arrays | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Arrays + + +
+ + + + + + +
+ + + +

+ Arrays + # +

+

+ Sequence your inputs + # +

+

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:

+
+ +
+ +

As you can see, the fact that both these Arrays have a different amount of values doesn’t matter, Hydra will take values from each element of any Array for the same amount of time by default.

+

The Arrays can be passed in any way, you may have a variable that stores an Array and use its name within your sketches (not recommended in some scenarios, more info below), you may create a function that returns Arrays and use that to automatically generate discrete sequences of values:

+
+ +
+ +

+ Changing the global bpm for Arrays + # +

+

To change how rapidly Hydra switches from element to element of all Arrays, you can change the bpm variable (meaning beats per minute) to any value you desire:

+
+ +
+ +

The default value for bpm is 30.

+

When livecoding visuals at the same time that music is playing, it can be useful to have a tapping metronome opened to keep track of the BPM being played and set this variable as such.

+

+ Changing the speed of a specific Array + # +

+

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.

+
+ +
+ +

+ Offsetting the timing of an Array + # +

+

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.

+
+ +
+ +

+ 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:

+
+ +
+ +

+ 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.

+
+ +
+ +

Try smoothing some of the above examples and see what happens!

+
+ Easing functions + # +
+

The default interpolation used by Hydra on an Array that called .smooth is linear interpolation. You can select a different easing function as follows:

+
+ +
+ +

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
    • +
+

+ Note on storing Arrays on variables / functions + # +

+

Storing an Array in a variable can lead to some trouble as soon as you apply some of the just-mentioned functions to it. Since Arrays are Objects, each time you call your variable, you’ll be calling the same Object. If you apply some speed via .fast or smoothness via .smooth somewhere in your patch, and then use the same variable, all the following uses of the Array will also have these effects applied to them. For example

+
+ +
+ +

+ Note on Arrays and textures + # +

+

Note that the following will not work:

+
solid(1,.5,0)
+	.diff([osc(),noise()])
+	.out()
+

Hydra can’t handle Arrays of textures. You can work around it in some ways:

+
+ +
+ +

Unfortunately, if you want to use many textures this solution doesn’t really apply.

+

Users of Hydra have come up with some experimental solutions which might come in handy in some scenarios, but they come with some drawbacks:

+
// blending method, heavy GPU load.
+// every element from the array will be rendered even if not shown.
+// allows for blending between elements.
+
+select = function(arr,l=0){
+	const clamp = (num, min, max) => Math.min(Math.max(num, min), max)
+	const blending = (l,i)=> (clamp(l-(i-1),0,1))
+	const isFunction = (typeof l === 'function')
+	return arr.reduce((prev,curr,i)=>
+		prev.blend(curr, isFunction ? ()=>blending(l(),i) : blending(l,i))
+	)
+}
+textures = [noise(), osc(), voronoi(), gradient()]
+select(textures,()=>Math.floor(mouse.x/innerWidth*4))
+    .out()
+
// re-compiling method, heavy CPU load. 
+// it reserves an output for the switching. 
+// can't blend between elements. 
+// each time an element switches the shader must be recompiled
+
+osc(20)
+  	.rotate()
+  	.modulate(o3,.2)
+	.out()
+
+textures = [noise(), osc(), voronoi(), shape()]
+index = 0
+tex = textures[index]
+update = (dt)=> {
+	if(time % (60 / bpm) * 1000 < dt){
+		index++; index %= textures.length;
+		tex = textures[index]
+		tex.out(o3)
+    }
+}
+
+

by geikha

+
+ + + +
+ +
+ + + + + + + + + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/sequencing-and-interactivity/audio/index.html b/public/docs/learning/sequencing-and-interactivity/audio/index.html new file mode 100644 index 0000000..ab5e5a4 --- /dev/null +++ b/public/docs/learning/sequencing-and-interactivity/audio/index.html @@ -0,0 +1,887 @@ + + + + + + + + + + + + + +Audio | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Audio + + +
+ + + + + + +
+ + + +

+ Audio reactivity + # +

+

FFT functionality is available via an audio object accessed via “a”. The editor uses https://github.com/meyda/meyda for audio analysis. +To show the fft bins,

+
a.show()
+

Set number of fft bins:

+
a.setBins(6)
+

Access the value of the leftmost (lowest frequency) bin:

+
a.fft[0]
+

Use the value to control a variable:

+
osc(10, 0, () => a.fft[0]*4)
+  .out()
+

It is possible to calibrate the responsiveness by changing the minimum and maximum value detected. (Represented by blur lines over the fft). To set minimum value detected:

+
a.setCutoff(4)
+

Setting the scale changes the range that is detected.

+
a.setScale(2)
+

The fft[] will return a value between 0 and 1, where 0 represents the cutoff and 1 corresponds to the maximum.

+

You can set smoothing between audio level readings (values between 0 and 1). 0 corresponds to no smoothing (more jumpy, faster reaction time), while 1 means that the value will never change.

+
a.setSmooth(0.8)
+

To hide the audio waveform:

+
a.hide()
+
a.setBins(5) // amount of bins (bands) to separate the audio spectrum
+
+noise(2)
+	.modulate(o0,()=>a.fft[1]*.5) // listening to the 2nd band
+	.out()
+
+a.setSmooth(.8) // audio reactivity smoothness from 0 to 1, uses linear interpolation
+a.setScale(8)    // loudness upper limit (maps to 0)
+a.setCutoff(0.1)   // loudness from which to start listening to (maps to 0)
+
+a.show() // show what hydra's listening to
+// a.hide()
+
+render(o0)
+
+ + + +
+ +
+ + + + + + + + + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/sequencing-and-interactivity/index.html b/public/docs/learning/sequencing-and-interactivity/index.html new file mode 100644 index 0000000..7d947b2 --- /dev/null +++ b/public/docs/learning/sequencing-and-interactivity/index.html @@ -0,0 +1,1039 @@ + + + + + + + + + + + +Sequencing & interactivity | hydra video synth + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Sequencing & interactivity + + +
+ + + + + + +
+ + + +

+ Sequencing and Interactivity + # +

+

If you’re coding in Hydra, you’re constantly trying many values to input to the sources and transforms, and it’s just a matter of time until you like how more than one looks, and you want to somehow switch between them. We’ll be referring to this idea of arguments whose value change over time as dynamic arguments. And there are two main ways to achieve this in Hydra: Arrays and functions.

+

+ Sequencing using Arrays + # +

+

+ Sequence your inputs + # +

+

When you send an Array as an input (indicated in javascript by []), 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:

+
+ +
+ +

+ changing the speed + # +

+

The arrays in hydra have a default bpm(beats-per-minute) of 30. You can change the speed of a specific array by adding .fast() at the end of the array. For example .fast(4) will make the above array run four times faster.

+
+ +
+ +

The speed of all arrays in a sketch can be changed using the bpm parameter of hydra synth.

+
bpm = 60
+
+ + + +

+ smooth() interpolation + # +

+

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.

+
+ +
+ +
+ +

+ Custom Functions + # +

+

Each numerical parameter in hydra can be defined as a function rather than a static variable. For example,

+
osc(function(){return 100 * Math.sin(time * 0.1)}).out()
+

modifies the oscillator frequency as a function of time. (Time is a global variable that represents the milliseconds that have passed since loading the page).

+

The above example can be written more concisely using es6 syntax:

+
osc(() => 100 * Math.sin(time * 0.1)).out()
+
+

Custom functions are especially useful for controlling hydra parameters using external inputs, such as the microphone, mouse, or midi control.

+ +
+

by geikha

+
+ + + +
+ +
+ + + + + + + + + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/sequencing-and-interactivity/index.xml b/public/docs/learning/sequencing-and-interactivity/index.xml new file mode 100644 index 0000000..eebbc62 --- /dev/null +++ b/public/docs/learning/sequencing-and-interactivity/index.xml @@ -0,0 +1,54 @@ + + + + Sequencing & interactivity on hydra video synth + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/sequencing-and-interactivity/ + Recent content in Sequencing & interactivity on hydra video synth + Hugo -- gohugo.io + en + + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/sequencing-and-interactivity/arrays/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/sequencing-and-interactivity/arrays/ + Arrays # Sequence your inputs # 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&rsquo;s see it in action: +As you can see, the fact that both these Arrays have a different amount of values doesn&rsquo;t matter, Hydra will take values from each element of any Array for the same amount of time by default. + + + + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/sequencing-and-interactivity/audio/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/sequencing-and-interactivity/audio/ + Audio reactivity # FFT functionality is available via an audio object accessed via &ldquo;a&rdquo;. The editor uses https://github.com/meyda/meyda for audio analysis. To show the fft bins, +a.show() Set number of fft bins: +a.setBins(6) Access the value of the leftmost (lowest frequency) bin: +a.fft[0] Use the value to control a variable: +osc(10, 0, () =&gt; a.fft[0]*4) .out() It is possible to calibrate the responsiveness by changing the minimum and maximum value detected. + + + + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/sequencing-and-interactivity/midi/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/sequencing-and-interactivity/midi/ + MIDI # Hydra can be used with Web MIDI for an extra layer of control to your visuals. +Example script: browser console # At this time this requires some running of code on the browser console (Press F12 in Chrome to access). This page only considers MIDI Continuous Controllers (CC) but other types of data may be accessible. +This is a generic script that doesn&rsquo;t care what Midi Channel you&rsquo;re broadcasting on and maps a normalized value 0. + + + + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/sequencing-and-interactivity/mouse/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/sequencing-and-interactivity/mouse/ + 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 &amp; mouse.y # | 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. + + + + diff --git a/public/docs/learning/sequencing-and-interactivity/midi/index.html b/public/docs/learning/sequencing-and-interactivity/midi/index.html new file mode 100644 index 0000000..76d37b3 --- /dev/null +++ b/public/docs/learning/sequencing-and-interactivity/midi/index.html @@ -0,0 +1,914 @@ + + + + + + + + + + + + + +Midi | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Midi + + +
+ + + + + + +
+ + + +

+ MIDI + # +

+

Hydra can be used with Web MIDI for an extra layer of control to your visuals.

+

+ Example script: browser console + # +

+

At this time this requires some running of code on the +browser console (Press F12 in Chrome to access). This page only considers MIDI Continuous Controllers (CC) but other types of data may be accessible.

+

This is a generic script that doesn’t care what Midi Channel you’re broadcasting on and maps a normalized value 0.0-1.0 into an array named cc.

+

This portion should be ran in the console & will register Web MIDI & map the incoming CC data to a set of parameters. For simplicity, these +parameters are named to match the CC number. The CC values are normally in a range from 0-127, but we’ve also normalized them to be in a range of 0.0-1.0.

+
// register WebMIDI
+navigator.requestMIDIAccess()
+    .then(onMIDISuccess, onMIDIFailure);
+
+function onMIDISuccess(midiAccess) {
+    console.log(midiAccess);
+    var inputs = midiAccess.inputs;
+    var outputs = midiAccess.outputs;
+    for (var input of midiAccess.inputs.values()){
+        input.onmidimessage = getMIDIMessage;
+    }
+}
+
+function onMIDIFailure() {
+    console.log('Could not access your MIDI devices.');
+}
+
+//create an array to hold our cc values and init to a normalized value
+var cc=Array(128).fill(0.5)
+
+getMIDIMessage = function(midiMessage) {
+    var arr = midiMessage.data    
+    var index = arr[1]
+    //console.log('Midi received on cc#' + index + ' value:' + arr[2])    // uncomment to monitor incoming Midi
+    var val = (arr[2]+1)/128.0  // normalize CC values to 0.0 - 1.0
+    cc[index]=val
+}
+

+ Hydra script + # +

+

Now that these controls have been assigned to the cc[] array, we can start using them in Hydra. As we’ve normalized the values 0-1 we can use +as-is with most functions or quickly remap them with various math.

+
// example midi mappings - Korg NanoKontrol2 CCs
+
+// color controls with first three knobs
+noise(4).color( ()=>cc[16], ()=>cc[17], ()=>cc[18] ).out()
+
+// rotate & scale with first two faders
+osc(10,0.2,0.5).rotate( ()=>(cc[0]*6.28)-3.14 ).scale( ()=>(cc[1]) ).out()
+

+ MIDI extension + # +

+
+ + + +
+ +
+ + + + + + + + + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/sequencing-and-interactivity/mouse/index.html b/public/docs/learning/sequencing-and-interactivity/mouse/index.html new file mode 100644 index 0000000..ab078bf --- /dev/null +++ b/public/docs/learning/sequencing-and-interactivity/mouse/index.html @@ -0,0 +1,995 @@ + + + + + + + + + + + + + +Mouse | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Mouse + + +
+ + + + + + +
+ + + +

+ 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 + # +

+
+ +
+ +

| +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 + # +

+
+ +
+ +

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 + # +

+
+ +
+ +

Remember you can name these functions however you prefer.

+
+
+ +
+ +

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

+
+

by geikha

+
+ + + +
+ +
+ + + + + + + + + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/video-synth-basics/color/index.html b/public/docs/learning/video-synth-basics/color/index.html new file mode 100644 index 0000000..d009534 --- /dev/null +++ b/public/docs/learning/video-synth-basics/color/index.html @@ -0,0 +1,1263 @@ + + + + + + + + + + + + + +Color | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Color + + +
+ + + + + + +
+ + + +

+ Color + # +

+

+ posterize + # +

+

posterize( bins = 3, gamma = 0.6 )

+
+ +
+ +

+ shift + # +

+

shift( r = 0.5, g, b, a )

+
+ +
+ +

+ invert + # +

+

invert( amount = 1 )

+

Invert color.

+
+ +
+ +

+ contrast + # +

+

contrast( amount = 1.6 )

+

Larger amount value makes higher contrast.

+
+ +
+ +

+ brightness + # +

+

brightness( amount = 0.4 )

+
+ +
+ +

+ luma + # +

+

luma( threshold = 0.5, tolerance = 0.1 )

+
+ +
+ +

+ thresh + # +

+

thresh( threshold = 0.5, tolerance = 0.04 )

+
+ +
+ +

+ color + # +

+

color( r = 1, g = 1, b = 1, a = 1 )

+
+ +
+ +

+ saturate + # +

+

saturate( amount = 2 )

+
+ +
+ +

+ hue + # +

+

hue( hue = 0.4 )

+
+ +
+ +

+ colorama + # +

+

colorama( amount = 0.005 )

+

Shift HSV values.

+
+ +
+ +

+ sum + # +

+

sum( scale = 1 )

+

+ r + # +

+

r( scale = 1, offset )

+
+ +
+ +

+ g + # +

+

g( scale = 1, offset )

+
+ +
+ +

+ b + # +

+

b( scale = 1, offset )

+
+ +
+ +

+ a + # +

+

a( scale = 1, offset )

+
+ + + +
+ +
+ + + + + + + + + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/video-synth-basics/combine/index.html b/public/docs/learning/video-synth-basics/combine/index.html new file mode 100644 index 0000000..3a0d4c6 --- /dev/null +++ b/public/docs/learning/video-synth-basics/combine/index.html @@ -0,0 +1,1179 @@ + + + + + + + + + + + + + +Blend | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Blend + + +
+ + + + + + +
+ + + +

+ 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.

+
+ +
+ +

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.

+
+ +
+ +

Trick: try to create different sketches and switch them in your live performance or even combine them.

+
+ +
+ +

+ Blending multiple visual sources together + # +

+

You can use blend functions to combine multiple visual sources. .blend() combines the colors from two sources to create a third source.

+
+ +
+ +

Try adding transformations to the above sources (such as osc(10).rotate(0, 0.1).out(o1)) to see how it affects the combined image. You can also specify the amount of blending by adding a separate parameter to .blend(), for example .blend(o1, 0.9).

+

There are multiple blend modes in hydra, similar to blend modes you might find in a graphics program such as photoshop or gimp. See the function reference for more possibilities.

+
+ +
+ +

+ Available blend funcitons + # +

+

+ add + # +

+

add( texture, amount = 1 )

+

Add textures. +The texture parameter can be any kind of source, for +example a color, src, or shape.

+
+ +
+ +

+ sub + # +

+

sub( texture, amount = 1 )

+
+ +
+ +

+ layer + # +

+

layer( texture )

+

Overlay texture based on alpha value. +The texture parameter can be any kind of source, for +example a color, src, or shape.

+
+ +
+ +

+ blend + # +

+

blend( texture, amount = 0.5 )

+

Blend textures. +The texture parameter can be any kind of source, for +example a color, src, or shape.

+
+ +
+ +

+ mult + # +

+

mult( texture, amount = 1 )

+

Multiply images and blend with the texture by amount. +The texture parameter can be any kind of source, for +example a color, src, or shape.

+
+ +
+ +

+ diff + # +

+

diff( texture )

+

Return difference of textures. +The texture parameter can be any kind of source, for +example a color, src, or shape.

+
+ +
+ +

+ mask + # +

+

mask( texture )

+
+ +
+ +
+ + + +
+ +
+ + + + + + + + + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/video-synth-basics/combinecoord/index.html b/public/docs/learning/video-synth-basics/combinecoord/index.html new file mode 100644 index 0000000..5e34871 --- /dev/null +++ b/public/docs/learning/video-synth-basics/combinecoord/index.html @@ -0,0 +1,1394 @@ + + + + + + + + + + + + + +Modulate | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Modulate + + +
+ + + + + + +
+ + + +

+ Modulation + # +

+

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 the same sources from above, we can use an oscillator to modulate or warp the camera image:

+
+ +
+ +

You can add a second parameter to the modulate() function to control the amount of warping: modulate(o1, 0.9). In this case, the red and green channels of the oscillator are being converted to x and y displacement of the camera image.

+

All geometry transformations have corresponding modulate functions that allow you to use one source to warp another source. For example, .modulateRotate() is similar to .rotate(), but it allows you to apply different amounts of rotation to different parts of the visual source. See the function reference for more examples.

+
+ +
+ +

+ More blending and modulating + # +

+

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.

+
+ +
+ +

This allows you to use many sources, blend modes, and modulation, all from within the same chain of functions.

+
+ +
+ +

Trick: use ctrl + shift + f from the web editor to auto-format your code

+

+ Modulating with the camera + # +

+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +

+ Available modulate functions + # +

+

+ modulateRepeat + # +

+

modulateRepeat( texture, repeatX = 3, repeatY = 3, offsetX = 0.5, offsetY = 0.5 )

+

The texture parameter can be any kind of source, for +example a color, src, or shape.

+
+ +
+ +

+ modulateRepeatX + # +

+

modulateRepeatX( texture, reps = 3, offset = 0.5 )

+

The texture parameter can be any kind of source, for +example a color, src, or shape.

+
+ +
+ +

+ modulateRepeatY + # +

+

modulateRepeatY( texture, reps = 3, offset = 0.5 )

+

The texture parameter can be any kind of source, for +example a color, src, or shape.

+
+ +
+ +

+ modulateKaleid + # +

+

modulateKaleid( texture, nSides = 4 )

+

The texture parameter can be any kind of source, for +example a color, src, or shape. +See also: kaleid.

+
+ +
+ +

+ modulateScrollX + # +

+

modulateScrollX( texture, scrollX = 0.5, speed )

+

The texture parameter can be any kind of source, for +example a color, src, or shape. +See also: scrollX

+
+ +
+ +

+ modulateScrollY + # +

+

modulateScrollY( texture, scrollY = 0.5, speed )

+

The texture parameter can be any kind of source, for +example a color, src, or shape. +See also: scrollY

+
+ +
+ +

+ modulate + # +

+

modulate( texture, amount = 0.1 )

+

Modulate texture. +More about modulation at: https://lumen-app.com/guide/modulation/ +The texture parameter can be any kind of source, for +example a color, src, or shape.

+
+ +
+ +

+ modulateScale + # +

+

modulateScale( texture, multiple = 1, offset = 1 )

+

The texture parameter can be any kind of source, for +example a color, src, or shape. +See also: scale.

+
+ +
+ +

+ modulatePixelate + # +

+

modulatePixelate( texture, multiple = 10, offset = 3 )

+

The texture parameter can be any kind of source, for +example a color, src, or shape. +See also: pixelate

+
+ +
+ +

+ modulateRotate + # +

+

modulateRotate( texture, multiple = 1, offset )

+

The texture parameter can be any kind of source, for +example a color, src, or shape. +See also: rotate

+
+ +
+ +

+ modulateHue + # +

+

modulateHue( texture, amount = 1 )

+

Changes coordinates based on hue of second input. Based on: https://www.shadertoy.com/view/XtcSWM +The texture parameter can be any kind of source, for +example a color, src, or shape.

+
+ +
+ +
+ + + +
+ +
+ + + + + + + + + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/video-synth-basics/coord/index.html b/public/docs/learning/video-synth-basics/coord/index.html new file mode 100644 index 0000000..df9bdb5 --- /dev/null +++ b/public/docs/learning/video-synth-basics/coord/index.html @@ -0,0 +1,1140 @@ + + + + + + + + + + + + + +Geometry | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Geometry + + +
+ + + + + + +
+ + + +

+ Geometry + # +

+

+ rotate + # +

+

rotate( angle = 10, speed )

+

Rotate texture.

+
+ +
+ +

+ scale + # +

+

scale( amount = 1.5, xMult = 1, yMult = 1, offsetX = 0.5, offsetY = 0.5 )

+

Scale texture.

+
+ +
+ +

+ pixelate + # +

+

pixelate( pixelX = 20, pixelY = 20 )

+

Pixelate texture with pixelX segments and pixelY segments.

+
+ +
+ +

+ repeat + # +

+

repeat( repeatX = 3, repeatY = 3, offsetX, offsetY )

+
+ +
+ +

+ repeatX + # +

+

repeatX( reps = 3, offset )

+
+ +
+ +

+ repeatY + # +

+

repeatY( reps = 3, offset )

+
+ +
+ +

+ kaleid + # +

+

kaleid( nSides = 4 )

+

Kaleidoscope effect with nSides repetition.

+
+ +
+ +

+ scroll + # +

+

scroll( scrollX = 0.5, scrollY = 0.5, speedX, speedY )

+
+ +
+ +

+ scrollX + # +

+

scrollX( scrollX = 0.5, speed )

+
+ +
+ +

+ scrollY + # +

+

scrollY( scrollY = 0.5, speed )

+
+ +
+ +
+ + + +
+ +
+ + + + + + + + + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/video-synth-basics/external-sources/index.html b/public/docs/learning/video-synth-basics/external-sources/index.html new file mode 100644 index 0000000..598534d --- /dev/null +++ b/public/docs/learning/video-synth-basics/external-sources/index.html @@ -0,0 +1,1115 @@ + + + + + + + + + + + + + +External sources: webcam, video, canvas | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + External sources: webcam, video, canvas + + +
+ + + + + + +
+ + + +

+ External Sources + # +

+ +

+ 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. External sources in hydra are referenced using predefined objects s0, s1, s2, and s3. To initialize the webcam in s0, run the following code:

+
s0.initCam()
+

This activates the webcam source inside a variable called s0, and you should see the light on your webcam light up. However, you will still not see the webcam image on the screen. In order to use the camera within a hydra sketch, you need to use it within the src() function.

+
+ +
+ +

Similar to adding transformations above, you can add transformations of color and geometry to the camera output, by adding functions to the chain:

+
+ +
+ +
+ +
+ +

If you have multiple webcams, you can access separate cameras by adding a number inside initCam, for example s0.initCam(1) or s0.initCam(2).

+
+

+ Available source functions + # +

+

+ initCam() + # +

+

You can use a webcam’s video as such:

+
s0.initCam()
+
+s0.initCam(2) // if you have many cameras, you can select one specifically
+
+

+ initImage() + # +

+

Load an image into a source object:

+
// 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:

+
s0.initImage("file:///home/user/Images/image.png")
+

+ Supported image formats + # +

+

You can load .jpeg, .png, and .bmp as well as .gif and .webp (although animation won’t work).

+

+ initVideo() + # +

+

The syntax for loading video is the same as for loading image, only changing the function to loadVideo:

+
s0.initVideo("https://media.giphy.com/media/AS9LIFttYzkc0/giphy.mp4")
+src(s0).out()
+

+ Supported video formats + # +

+

You can load .mp4, .ogg and .webm videos.

+ +
+ +
+ +

+ Useful HTML Video properties + # +

+

You can access all of the HTML Video functions when a video is loaded to a Source via s0.src. Some useful properties are:

+
s0.src.playbackRate = 2 // double the speed at which the video plays
+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:

+
s0.initScreen()
+src(s0).out()
+
+ +
+ +
+ +

+ 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 as an input, or loading an existing resource as a source into hydra. Valid input types are documented in the regl texture documentation.

+

For example, the following code creates a canvas element and draws text to it, and then uses that canvas as a source in hydra:

+
+ +
+ +

use the dynamic parameter to indicate whether the source will be updated, or remain the same.

+

+ initStream() + # +

+
+ note: initStream() is currently broken in hydra editor due to server issues +
+ +

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 + # +

+

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.

+

You can see online sessions using the function pb.list(), which will return an Array of names.

+

+ Starting to stream + # +

+

Streaming is as simple as initiating the source as a stream and passing the name of the session you want to stream. For example:

+
s0.initStream('myfriendsverycoolsession')
+src(s0)
+    .out()
+
+

+ Extra parameters + # +

+

Any external sources loaded into Hydra are using regl’s texture constructor in the background. There are many properties you can set when loading a texture and Hydra and regl handle the important ones for you. But to set any of these properties you can pass an object containing them to any of the init functions. For example:

+
s0.initCam(0,{mag: 'linear'})
+

mag & min are the most used, since using linear interpolation will resize textures in a smooth way. The default for both is nearest.

+
+

+ Common problems + # +

+

+ CORS policy + # +

+

If you try to load images (or videos) from some websites (most of them, really), sometimes nothing shows up on the screen. Opening the browser’s console might reveal a message similar to this one:

+
Access to image at '...' from origin 'https://hydra.ojack.xyz' 
+has been blocked by CORS policy: 
+No 'Access-Control-Allow-Origin' header is present on the requested resource.
+

The CORS in CORS policy stands for ‘Cross-origin resource sharing’. This refers to the action of calling resources (such as images) from one website to another. For example, asking for an image hosted on other website from inside the Hydra editor. This error message is basically telling us “hey, the website you’re trying to ask for an image doesn’t allow other websites to use their resources, so i can’t let you have that picture”. +In order to circumvent this error, you can try re-uploading the images you want to use to some image hosting service that allows cross-origin sharing such as imgur, where you can also load short videos. You can also try to use websites which you know will allow cross-origin resource sharing such as Wikimedia Commons, which is great for video.

+

+ Loading video from YouTube, Vimeo, etc + # +

+

Some users may be tempted to try and load some video they liked on YouTube, for example, and run something suchlike:

+
s0.initVideo('https://www.youtube.com/watch?v=dQw4w9WgXcQ') // doesn't work
+

This will not work. The same goes for Vimeo and other video streaming services. When you use such an URL, it is not returning a video, it is returning the website where you can watch the video! The URL you pass to initVideo has to go directly to a video file. In other words, the URL should (usually) end in .mp4, .webm or .ogg. And, even if you did get a URL directly to the video with a tool such as youtube-dl, you’ll run into CORS problems.

+

+ Workaround + # +

+

The most common workarounds are:

+
    +
  • Run Hydra locally (on Atom for example) and load local video files
    • +
  • Have the video run on its own window and use initScreen to capture it
    • +
+
+ + + +
+ +
+ + + + + + + + + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/video-synth-basics/index.html b/public/docs/learning/video-synth-basics/index.html index 1661603..42999a2 100644 --- a/public/docs/learning/video-synth-basics/index.html +++ b/public/docs/learning/video-synth-basics/index.html @@ -3,24 +3,21 @@ - + - - - - - - -video synth basics | hydra video synth + + + + +Video Synth Basics | hydra video synth - + - + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Synth Settings + + +
+ + + + + + +
+ + + +

+ Synth Settings + # +

+

Functions and settings that affect overall hydra behavor and rendering.

+

+ render + # +

+

render( texture = all )

+
// default
+osc(30,0.1,1.5).out(o0)
+noise().out(o1)
+solid(1).out(o2)
+gradient().out(o3)
+render()
+

+ update + # +

+

update( )

+
+ +
+ +

+ setResolution + # +

+

setResolution( width, height )

+
// make the canvas small (100 pixel x 100 pixel)
+setResolution(100,100)
+osc().out(o0)
+

+ hush + # +

+

hush( )

+
// clear the buffers
+osc().out(o0)
+hush()
+

+ setFunction + # +

+

setFunction( options )

+
+ +
+ +

+ speed + # +

+

speed = 1

+
+ +
+ +

+ bpm + # +

+

bpm = 30

+
+ +
+ +

+ width + # +

+

width

+
+ +
+ +

+ height + # +

+

height

+
+ +
+ +

+ time + # +

+

time

+
+ +
+ +

+ mouse + # +

+

mouse = { x, y }

+
+ +
+ +
+ + + +
+ +
+ + + + + + + + + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/video-synth-basics/src/index.html b/public/docs/learning/video-synth-basics/src/index.html new file mode 100644 index 0000000..d6b9cdd --- /dev/null +++ b/public/docs/learning/video-synth-basics/src/index.html @@ -0,0 +1,1092 @@ + + + + + + + + + + + + + +Sources | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Sources + + +
+ + + + + + +
+ + + +

+ Source + # +

+

+ noise + # +

+

noise( scale = 10, offset = 0.1 )

+

Generate Perlin noise.

+
+ +
+ +

+ voronoi + # +

+

voronoi( scale = 5, speed = 0.3, blending = 0.3 )

+

Generate voronoi shapes.

+
+ +
+ +

+ osc + # +

+

osc( frequency = 60, sync = 0.1, offset )

+
+ +
+ +

+ shape + # +

+

shape( sides = 3, radius = 0.3, smoothing = 0.01 )

+
+ +
+ +

+ gradient + # +

+

gradient( speed )

+
+ +
+ +

+ src + # +

+

src( tex ) +Accepts a texture, such as external source (s0, s1, s2, s3) or an output (o0, o1, o2, o3)

+
+ +
+ +

+ solid + # +

+

solid( r, g, b, a = 1 )

+
+ +
+ +

+ prev + # +

+

prev( )

+

+ out + # +

+

out( texture = all )

+
+ +
+ +
+ + + +
+ +
+ + + + + + + + + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/learning/web-editor/index.html b/public/docs/learning/web-editor/index.html index 9d2f19f..4cbf5e9 100644 --- a/public/docs/learning/web-editor/index.html +++ b/public/docs/learning/web-editor/index.html @@ -3,24 +3,22 @@ - + - - + + - -using the web editor | hydra video synth + +Using the web editor | hydra video synth - + - + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+ + + Quick start + + +
+ + + + + + +
+ + + +

+ hello world + # +

+

start writing code in hydra! to get started:

+
    +
  1. +

    Go to https://hydra.ojack.xyz

    +
    2. +
  2. +

    Close the top window by clicking the [x] in the top right.

    +
    3. +
  3. +

    Change some numbers

    +
    4. +
  4. +

    Type “ctrl+shift+enter” to run the code (or use the triangle run button)

    +
    5. +
  5. +

    have fun! there is no “wrong” way to code in hydra :]

    +
    6. +
+

+ +

+ Next steps + # +

+

For more a more in-depth introductions see Getting Started: video synth basics. For an overview of available guides and resources, see learning.

+
+ + + +
+ +
+ + + + + + + + + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/public/docs/reference/index.html b/public/docs/reference/index.html index 1ef7244..73139e0 100644 --- a/public/docs/reference/index.html +++ b/public/docs/reference/index.html @@ -7,15 +7,16 @@ - - + + + + reference | hydra video synth - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Olivia Jack
Olivia Jack
💻 📝 🐛 🎨 📖 📋 💡 💵 🔍 🤔 🚇 🔌 💬 👀 📢 ⚠️ 🔧 🌍 ✅ 📹		Jamie Fenton
Jamie Fenton
💻 🤔 📹		Naoto Hieda
Naoto Hieda
📖 📋 💡 🤔 ✅		flordefuego
flordefuego
📖 📋 💡 🤔 ✅ 📹		Zach Krall
Zach Krall
📖 💻 ✅ 💡		Renzo Torr-
GEIKHA
🐛 💻 📋 💡 🤔 🔌 🌍		Bruce LANE
Bruce LANE
💻 💡 🤔
fangtasi
fangtasi
🌍		Haram Choi
Haram Choi
🌍		papaz0rgl
papaz0rgl
🌍		Artur Cabral
Artur Cabral
🌍		Rangga Purnama Aji
Rangga Purnama Aji
🌍		Jack Armitage
Jack Armitage
💻		Guy John
Guy John
💻
Christopher Beacham
Christopher Beacham
💻		Sam Thursfield
Sam Thursfield
💻		Dmitriy Khvatov
Dmitriy Khvatov
💻		Yancy Way
Yancy Way
💻		tpltnt
tpltnt
💻		Andrew Kowalczyk
Andrew Kowalczyk
💻		ethancrawford
ethancrawford
💻
Hamilton Ulmer
Hamilton Ulmer
💻		Josh Morrow
Josh Morrow
💻		Nobel Yoo
Nobel Yoo
💻		Pablito Labarta
Pablito Labarta
💻		Paul W. Rankin
Paul W. Rankin
💻		Timo Hoogland
Timo Hoogland
💻		Ramil Iksanov
Ramil Iksanov
💻
J. Francisco Raposeiras
J. Francisco Raposeiras
💻		Lars Fabian Tuchel
Lars Fabian Tuchel
💻		oscons
oscons
💻		Richard Nias
Richard Nias
💻		Luis Aguirre
Luis Aguirre
💻		Damián Silvani
Damián Silvani
💻		m. interrupt
m. interrupt
💻
Ámbar Tenorio-Fornés
Ámbar Tenorio-Fornés
💻 🤔
+ + + + @@ -452,9 +868,9 @@
-
+ @@ -495,7 +911,15 @@
- + diff --git a/public/index.xml b/public/index.xml index 8de0575..a82bd61 100644 --- a/public/index.xml +++ b/public/index.xml @@ -1,50 +1,103 @@ - hydra video synth portal on hydra video synth + hydra video synth: documentation portal on hydra video synth https://hydra.ojack.xyz/hydra-docs-v2/ - Recent content in hydra video synth portal on hydra video synth + Recent content in hydra video synth: documentation portal on hydra video synth Hugo -- gohugo.io en - about - https://hydra.ojack.xyz/hydra-docs-v2/docs/what-is-hydra/ - Mon, 01 Jan 0001 00:00:00 +0000 + Sources + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/video-synth-basics/src/ + Thu, 16 Nov 2023 00:00:00 +0000 - https://hydra.ojack.xyz/hydra-docs-v2/docs/what-is-hydra/ - What is Hydra? # 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 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. + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/video-synth-basics/src/ + Source # noise # noise( scale = 10, offset = 0.1 ) +Generate Perlin noise. +voronoi # voronoi( scale = 5, speed = 0.3, blending = 0.3 ) +Generate voronoi shapes. +osc # osc( frequency = 60, sync = 0.1, offset ) +shape # shape( sides = 3, radius = 0.3, smoothing = 0.01 ) +gradient # gradient( speed ) +src # src( tex ) Accepts a texture, such as external source (s0, s1, s2, s3) or an output (o0, o1, o2, o3) - getting started - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/getting-started-short/ + Quick start + https://hydra.ojack.xyz/hydra-docs-v2/docs/quick-start/ Mon, 01 Jan 0001 00:00:00 +0000 - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/getting-started-short/ - Getting started # Play with gallery examples # The simplest way to get started with hydra is to play around with the example sketches in the web editor. -To get started, open the the hydra web editor in a separate window. Close the top window by clicking the [x] in the top right. -You will see some colorful visuals in the background with text on top. The text is code that generates the visuals behind it. + https://hydra.ojack.xyz/hydra-docs-v2/docs/quick-start/ + hello world # start writing code in hydra! to get started: +Go to https://hydra.ojack.xyz +Close the top window by clicking the [x] in the top right. +Change some numbers +Type &ldquo;ctrl+shift+enter&rdquo; to run the code (or use the triangle run button) +have fun! there is no &ldquo;wrong&rdquo; way to code in hydra :] +Next steps # For more a more in-depth introductions see Getting Started: video synth basics. For an overview of available guides and resources, see learning. - community - https://hydra.ojack.xyz/hydra-docs-v2/docs/community/ - Mon, 01 Jan 0001 00:00:00 +0000 + Geometry + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/video-synth-basics/coord/ + Thu, 16 Nov 2023 00:00:00 +0000 - https://hydra.ojack.xyz/hydra-docs-v2/docs/community/ - community projects, libraries, and resources # + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/video-synth-basics/coord/ + Geometry # rotate # rotate( angle = 10, speed ) +Rotate texture. +scale # scale( amount = 1.5, xMult = 1, yMult = 1, offsetX = 0.5, offsetY = 0.5 ) +Scale texture. +pixelate # pixelate( pixelX = 20, pixelY = 20 ) +Pixelate texture with pixelX segments and pixelY segments. +repeat # repeat( repeatX = 3, repeatY = 3, offsetX, offsetY ) +repeatX # repeatX( reps = 3, offset ) + + + + Getting started + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/getting-started/ + Tue, 04 Apr 2023 15:10:36 +0200 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/getting-started/ + Getting started with hydra # This document is an introduction to making live visuals using Hydra. It covers the basics of writing code in the browser to generate and mix live video sources. No coding or video experience is necessary! +If you just want to start in 60 seconds you can also check: +Getting started short version This tutorial is meant to be used from within the hydra web editor. + + + + Using the web editor + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/web-editor/ + Tue, 04 Apr 2023 15:10:36 +0200 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/web-editor/ + Web editor # basics of the browser editor at https://hydra.ojack.xyz +key commands # CTRL-Enter: run a line of code CTRL-Shift-Enter: run all code on screen ALT-Enter: run a block CTRL-Shift-H: hide or show code CTRL-Shift-F: format code using Prettier CTRL-Shift-S: Save screenshot and download as local file. The CTRL-Shift-G: Share to twitter (if available). Shares to @hydra_patterns toolbar # At the right up corner you will find a toolbar with these buttons: run all code Runs all code on the page (same as typing *ctrl+shift+enter) upload to gallery upload a sketch to Hydra&rsquo;s gallery and create a shorter URL clear all resets the environment and clears text from the editor show random sketch. - video synth basics - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/video-synth-basics/ + Color + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/video-synth-basics/color/ + Thu, 16 Nov 2023 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/video-synth-basics/color/ + Color # posterize # posterize( bins = 3, gamma = 0.6 ) +shift # shift( r = 0.5, g, b, a ) +invert # invert( amount = 1 ) +Invert color. +contrast # contrast( amount = 1.6 ) +Larger amount value makes higher contrast. +brightness # brightness( amount = 0.4 ) +luma # luma( threshold = 0.5, tolerance = 0.1 ) +thresh # thresh( threshold = 0.5, tolerance = 0. + + + + reference + https://hydra.ojack.xyz/hydra-docs-v2/docs/reference/ Mon, 01 Jan 0001 00:00:00 +0000 - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/video-synth-basics/ - Modular Video Synth Basics # Hydra is inspired by modular synthesis. Instead of connecting cables you connect different kinds of javascript functions. -source Sandin Image Processor # Press the run button to run this code and update the visuals on the screen. You should see some scrolling stripes appear in the background. -This creates a visual oscillator. Try modifying the parameters of the oscillator by putting a number inside the parentheses of osc(), for example osc(10). + https://hydra.ojack.xyz/hydra-docs-v2/docs/reference/ + @@ -59,26 +112,17 @@ We welcome contributions! - external sources: cameras, videos, streams - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/external-sources/ - Mon, 01 Jan 0001 00:00:00 +0000 - - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/external-sources/ - External Sources # 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: -s0.initCam() This activates the webcam source inside a variable called s0, and you should see the light on your webcam light up. However, you will still not see the webcam image on the screen. - - - - sequencing & interactivity - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/interactivity/ + External sources: webcam, video, canvas + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/video-synth-basics/external-sources/ Mon, 01 Jan 0001 00:00:00 +0000 - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/interactivity/ - Sequencing and Interactivity # If you&rsquo;re coding in Hydra, you&rsquo;re constantly trying many values to input to the sources and transforms, and it&rsquo;s just a matter of time until you like how more than one looks, and you want to somehow switch between them. We&rsquo;ll be referring to this idea of arguments whose value change over time as dynamic arguments. And there are two main ways to achieve this in Hydra: Arrays and functions. + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/video-synth-basics/external-sources/ + External Sources # 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. External sources in hydra are referenced using predefined objects s0, s1, s2, and s3. To initialize the webcam in s0, run the following code: +s0.initCam() This activates the webcam source inside a variable called s0, and you should see the light on your webcam light up. - Textures + Hydra Book: Textures https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/textures/ Mon, 01 Jan 0001 00:00:00 +0000 @@ -89,23 +133,133 @@ Oscillator # osc(freq,sync,offset) is one of the basic sources to create a textu - using the web editor - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/web-editor/ - Tue, 04 Apr 2023 15:10:36 +0200 + developing backend server + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/contributing/server/ + Mon, 01 Jan 0001 00:00:00 +0000 - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/web-editor/ - Get to know the browser editor # To get started, open the the hydra web editor in a separate window. Close the top window by clicking the [x] in the top right. -You will see some colorful visuals in the background with text on top in the top left of the screen. The text is code that generates the visuals behind it. -At the right up corner you will find a toolbar with these buttons: run all code Runs all code on the page (same as typing *ctrl+shift+enter) upload to gallery upload a sketch to Hydra&rsquo;s gallery and create a shorter URL clear all resets the environment and clears text from the editor show random sketch. + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/contributing/server/ + Developing backend server # (stub) + + + + developing editor + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/contributing/editor/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/contributing/editor/ + Developing editor # To run locally, you must have nodejs and npm installed. Install node and npm from: https://nodejs.org/en/. +First, clone the repository +git clone git@github.com:hydra-synth/hydra.git enter the directory of the hydra source code: +cd hydra Current main branch # The current main branch uses browserify to bundle the script. While new features should be implemented in dev branch, if there is a hot fix needed in the current main branch, please follow this guide. + + + + developing hydra-synth + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/contributing/synth/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/contributing/synth/ + Developing synth # Clone the repository +git@github.com:hydra-synth/hydra-synth.git enter the folder +cd hydra-synth install the dependencies +npm install build +npm run build The bundled code is in dist/hydra-synth.js. +Trying on the browser # This repository does not come with the editor. However, you can use the simple example dist/index.html. To do so, install http-server +npm install --global http-server and serve dist folder +http-server dist go to http://localhost:8000 in the browser. You can either edit the hydra code in index. + + + + hydra meetup #8 is today! + https://hydra.ojack.xyz/hydra-docs-v2/posts/hydra-meetup-8/ + Tue, 21 Nov 2023 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/posts/hydra-meetup-8/ + Join us today at 15:00UTC for hydra meetup #8! There will be talks from hydra microgrant recipients Aida El-Oweidy, David Matunda, and Vagné L., as well as a chance for show and tell. +Signups at: https://hydra-meetup-8.glitch.me + + + + Blend + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/video-synth-basics/combine/ + Thu, 16 Nov 2023 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/video-synth-basics/combine/ + 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. + + + + Modulate + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/video-synth-basics/combinecoord/ + Thu, 16 Nov 2023 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/video-synth-basics/combinecoord/ + Modulation # 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 the same sources from above, we can use an oscillator to modulate or warp the camera image: + + + + Synth Settings + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/video-synth-basics/settings/ + Thu, 16 Nov 2023 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/video-synth-basics/settings/ + Synth Settings # Functions and settings that affect overall hydra behavor and rendering. +render # render( texture = all ) +// default osc(30,0.1,1.5).out(o0) noise().out(o1) solid(1).out(o2) gradient().out(o3) render() update # update( ) +setResolution # setResolution( width, height ) +// make the canvas small (100 pixel x 100 pixel) setResolution(100,100) osc().out(o0) hush # hush( ) +// clear the buffers osc().out(o0) hush() setFunction # setFunction( options ) +speed # speed = 1 + + + + + https://hydra.ojack.xyz/hydra-docs-v2/contributing_code/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/contributing_code/ + 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 to load &lsquo;bundle.js&rsquo; rather than &lsquo;bundle.min.js&rsquo; +Run development server +yarn dev + + + + + https://hydra.ojack.xyz/hydra-docs-v2/contributing_translation/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/contributing_translation/ + 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://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/custom-glsl/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/custom-glsl/ + - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/audio/ + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/hydra-in-a-webpage/ Mon, 01 Jan 0001 00:00:00 +0000 - https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/audio/ - Audio Guide # 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&rsquo;t need to know what it is or how it achieves what it does to use it, but you need to understand the following: + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/hydra-in-a-webpage/ + Hydra-Synth # In addition to using hydra within the hydra web editor, it is also possible to use the hydra video-synth engine as a library within your own javascript projects. +hydra-synth is a javascript library containing the main logic of hydra packaged as a javascript module. +To include in a webpage (bundled version): # Include the bundled version of hydra-synth in your html file: +&lt;script src=&#34;https://unpkg.com/hydra-synth&#34;&gt;&lt;/script&gt; &lt;script&gt; // create a new hydra-synth instance var hydra = new Hydra({ detectAudio: false }) osc(4, 0. @@ -126,5 +280,139 @@ At the right up corner you will find a toolbar with these buttons: run all code + + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/frames-and-timing/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/frames-and-timing/ + frames and timing # by geikha +Using the update function # There&rsquo;s a function in the Hydra API called update. This function runs at the beginning of every frame render right before the values for time and a.fft are calculated. If you are familiar with Processing or p5, you can think of update as Hydra&rsquo;s equivalent to the draw function. Using update can be very useful for creating generative visuals (generative in the sense of controlling visual elements with values that evolve through time either randomly or following certain rules). + + + + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/hydra-garden/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/hydra-garden/ + + + + + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/sequencing-and-interactivity/arrays/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/sequencing-and-interactivity/arrays/ + Arrays # Sequence your inputs # 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&rsquo;s see it in action: +As you can see, the fact that both these Arrays have a different amount of values doesn&rsquo;t matter, Hydra will take values from each element of any Array for the same amount of time by default. + + + + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/sequencing-and-interactivity/audio/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/sequencing-and-interactivity/audio/ + Audio reactivity # FFT functionality is available via an audio object accessed via &ldquo;a&rdquo;. The editor uses https://github.com/meyda/meyda for audio analysis. To show the fft bins, +a.show() Set number of fft bins: +a.setBins(6) Access the value of the leftmost (lowest frequency) bin: +a.fft[0] Use the value to control a variable: +osc(10, 0, () =&gt; a.fft[0]*4) .out() It is possible to calibrate the responsiveness by changing the minimum and maximum value detected. + + + + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/sequencing-and-interactivity/midi/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/sequencing-and-interactivity/midi/ + MIDI # Hydra can be used with Web MIDI for an extra layer of control to your visuals. +Example script: browser console # At this time this requires some running of code on the browser console (Press F12 in Chrome to access). This page only considers MIDI Continuous Controllers (CC) but other types of data may be accessible. +This is a generic script that doesn&rsquo;t care what Midi Channel you&rsquo;re broadcasting on and maps a normalized value 0. + + + + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/sequencing-and-interactivity/mouse/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/sequencing-and-interactivity/mouse/ + 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 &amp; mouse.y # | 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. + + + + community + https://hydra.ojack.xyz/hydra-docs-v2/docs/community/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/community/ + community projects, libraries, and resources # + + + + Custom GLSL + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/glsl/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/glsl/ + GLSL Guide # Using custom GLSL functions # Hydra is built using GLSL (a language for generating a program, or shader, that runs directly on the graphics card using WebGl). Each javascript function in hydra corresponds directly to a snippet of shader code. Hydra has a unique way of adding custom source and transform functions which we will explain here. +setFunction # The Hydra API includes a function called setFunction which receives a specific type of JavaScript object. + + + + Iteration: automatically generate patches + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/automatic-patches/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/automatic-patches/ + Using iteration and conditionals to create patches # by geikha +Note # For this tutorial we&rsquo;ll be assuming you&rsquo;ve already learned by your own means what iteration and conditionals are in a programming context. +Iteration : automatically generate patches # As you may know from regular programming, or other creative coding environments such as p5, iteration helps us repeat some operation(s) many times to achieve a specific goal. Maybe you would like to layer many similar objects but with slightly different values, and you want so many of them that writing each one manually isn&rsquo;t desirable. + + + + javascript for hydra users + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/javascript/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/javascript/ + JavaScript Guide # This guide is made for users who are new to JavaScript or coding in general and would like to dive into these topics. You don&rsquo;t need to fully understand what&rsquo;s here to use Hydra. If you&rsquo;re just starting with Hydra and you have no coding experience, we recommend you experiment with Hydra a bit before reading this. +Comments # // This is a one line comment Most programming languages have implemented in them a feature commonly referred as comments. + + + + Record hydra's output + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/how-to/record-hydra-output/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/how-to/record-hydra-output/ + Recording # Saving images from Hydra # You can press Ctrl+Shift+S to save a screenshot of your Hydra&rsquo;s canvas, as well as the code that generates the screenshot. You can also do this programmatically calling the function screencap() +Hydra&rsquo;s built-in recorder # You can very easily record a video evaluating the following commands: +vidRecorder.start() // run this to start recording vidRecorder.stop() // run this to stop recording and download video Videos recorded with this method are recorded and downloaded with the vp9 codec and webm filetype. + + + + Use hydra without showing the code + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/how-to/use-hydra-without-showing-code/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/guides/how-to/use-hydra-without-showing-code/ + How can I livecode Hydra without showing the code over the visuals? # You can either: +Use Flok: # Open https://flok.cc/ and create a session with hydra as a target. Now that you have your own Hydra session, with its own URL (it automatically changes on your browser&rsquo;s nav bar), open it in one more tab. Enter the session in both tabs. You can disable Hydra on one of them if you want to (this would also lower resource demand). + + + + Using hydra with other javascript libraries + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/extending-hydra/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/docs/learning/extending-hydra/extending-hydra/ + Using hydra with other javascript libraries # 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 is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! + + diff --git a/public/ja.search-data.min.a8e362a7364d3d13b9c88022d829cd70e05d23f620298e2daad59b50bf75169a.json b/public/ja.search-data.min.a8e362a7364d3d13b9c88022d829cd70e05d23f620298e2daad59b50bf75169a.json new file mode 100644 index 0000000..9218450 --- /dev/null +++ b/public/ja.search-data.min.a8e362a7364d3d13b9c88022d829cd70e05d23f620298e2daad59b50bf75169a.json @@ -0,0 +1 @@ +[{"id":0,"href":"/hydra-docs-v2/ja/docs/what-is-hydra/","title":"about","section":"Docs","content":" Hydra - ハイドラ # ―それはネットワークド・ライブコーディング・ビジュアルのためのツールセット。アナログ・モジュラーシンセにインスピレーションを受け、ビジュアルをネット上でストリーミング、ルーティングしてリアルタイムに出力するためのツールです。\nHydra は複数のフレームバッファによりダイナミックにブラウザ間のビジュアルをミキシング、コンポジション、そしてコラボレーションすることができます。座標や色の変換はそれぞれの出力に関数をチェーンして重ねられます。\n注：実験的かつ開発中です。現在、 Chrome か Chromium かつ WebGL がサポートされた環境が必要です。 プル・リクエストは大歓迎です。またコメント、アイディア、バグなどは Issue にどうぞ =]\n詳細は使い方、使い方(PDF、スペイン語)、チュートリアルとサンプル、全ての関数のリスト、コミュニティ・メンバーによるスケッチ集、Hydra を開発するにあたった経緯（英語）をご覧ください。\n注：このレポジトリは Hydra のオンライン・エディタ用です。 Hydra の他の要素はそれぞれモジュールとして公開しています：\nhydra-synth: Hydra のシンセ・エンジン（npm モジュール atom-hydra: Atom 用 Hydra rtc-patch-bay: Hydra のネットワーキング・システム（npm モジュール） "},{"id":1,"href":"/hydra-docs-v2/ja/docs/learning/","title":"使い方","section":"Docs","content":" 使い方 # https://hydra.ojack.xyz を開いて、\nCTRL-Enter: 現在の行を実行 CTRL-Shift-Enter: スクリーン上のすべてのコードを実行 ALT-Enter: （空行にはさまれた）ブロックを実行 CTRL-Shift-H: コードを非表示・表示 CTRL-Shift-F: Prettier によりフォーマット CTRL-Shift-S: スクリーンショットを取って画像ファイルとしてダウンロード CTRL-Shift-G: twitter の @hydra_patterns に保存（現在は動作していません） コードはブラウザ上のエディタからでもコンソールからでも実行できます。\n使い始める前に、 @hydra_patterns からコミュニティ・メンバーのシェアしたパターンをご覧いただければイメージがつかめると思います。\n基本の関数 # オシレーターを周波数、シンク、 RGB オフセットのパラメータでレンダー：\nosc(20, 0.1, 0.8).out() オシレーターを 0.8 ラジアンだけ回転：\nosc(20, 0.1, 0.8).rotate(0.8).out() 上の関数の出力をピクセル化：\nosc(20, 0.1, 0.8).rotate(0.8).pixelate(20, 30).out() ウェブカメラの画像を表示：\ns0.initCam() // ソース・バッファ s0 をウェブカメラに初期化 src(s0).out() // ソース・バッファ s0 をレンダー カメラが複数接続されている場合は、インデックスを用いてカメラを指定できます：\ns0.initCam(1) // ソース・バッファ s0 をウェブカメラ(1)に初期化 ウェブカメラ・カレイドスコープ（万華鏡）：\ns0.initCam() // ソース・バッファ s0 をウェブカメラに初期化 src(s0).kaleid(4).out() // ウェブカメラをカレイドとして表示 複数のソースをかけ合わせることもできます：\nosc(10) .rotate(0.5) .diff(osc(200)) .out() デフォルトの環境では4つの出力バッファがあり、それぞれに別のビジュアルをレンダ―することができます。出力は変数 o0, o1, o2, o3 によりアクセスできます。\nバッファ o1 にレンダ―するには：\nosc().out(o1) render(o1) // o1 のコンテンツを表示 out() の引数として出力バッファが指定されていない場合、 o0 に結果がレンダーされます。 全てのレンダー・バッファを表示するには：\nrender() 出力バッファはそれからミキシングやコンポジションにより画面に表示するグラフィックを生成することができます。\ns0.initCam() // ソース・バッファ s0 をウェブカメラに初期化 src(s0).out(o0) // o0 のソースをウェブカメラのバッファに指定 osc(10, 0.2, 0.8).diff(o0).out(o1) // グラデーションを o0 の内容とコンポジションにして、出力バッファ o1 につなぐ render(o1) // o1 を画面に描画 コンポジション関数は blend(), diff(), mult(), add() 等で、四則演算により入力されたテクスチャとベース・テクスチャの色をかけ合わせることができます。フォトショップのブレンドモード（描画モード）のイメージです。\nmodulate(texture, amount) （texture: 入力テクスチャ、amount：度合) は入力テクスチャの赤、緑チャンネルに応じてベース・テクスチャの x, y 座標を変化させます。詳しくはこちら（英語）： https://lumen-app.com/guide/modulation/\nosc(21, 0).modulate(o1).out(o0) osc(40).rotate(1.57).out(o1) 動画をソースとして用いる：\ns0.initVideo(\u0026#34;https://media.giphy.com/media/AS9LIFttYzkc0/giphy.mp4\u0026#34;) src(s0).out() 画像をソースとして用いる：\ns0.initImage(\u0026#34;https://upload.wikimedia.org/wikipedia/commons/2/25/Hydra-Foto.jpg\u0026#34;) src(s0).out() 関数を引数として使う # Hydra の関数の引数は、固定した値ではなく関数として定義することもできます。例えば：\nosc(function(){return 100 * Math.sin(time * 0.1)}).out() この例ではオシレータの周波数を時間の関数として定義しています（time はグローバル変数で、ページがロードされてから経過した秒数を表します）。 ES6 文法を使えばさらに短く書けます：\nosc(() =\u0026gt; (100 * Math.sin(time * 0.1))).out() デスクトップのキャプチャ # ダイアログを表示してスクリーンやウインドウを入力テクスチャに指定することができます：\ns0.initScreen() src(s0).out() Connecting to remote streams # Any hydra instance can use other instances/windows containing hydra as input sources, as long as they are connected to the internet and not blocked by a firewall. Hydra uses webrtc (real time webstreaming) under the hood to share video streams between open windows. The included module rtc-patch-bay manages connections between connected windows, and can also be used as a standalone module to convert any website into a source within hydra. (See standalone camera source below for example.)\nTo begin, open hydra simultaneously in two separate windows. In one of the windows, set a name for the given patch-bay source:\npb.setName(\u0026#34;myGraphics\u0026#34;) The title of the window should change to the name entered in setName().\nFrom the other window, initiate \u0026ldquo;myGraphics\u0026rdquo; as a source stream.\ns0.initStream(\u0026#34;myGraphics\u0026#34;) render to screen:\ns0.initStream(\u0026#34;myGraphics\u0026#34;) src(s0).out() The connections sometimes take a few seconds to be established; open the browser console to see progress. To list available sources, type the following in the console:\npb.list() Using p5.js with hydra # // Initialize a new p5 instance It is only necessary to call this once p5 = new P5() // {width: window.innerWidth, height:window.innerHeight, mode: \u0026#39;P2D\u0026#39;} // 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 \u0026#34;setup()\u0026#34; 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 \u0026lt; 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 = () =\u0026gt; { 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.\nHere is an example using Three.js from the web editor:\nawait loadScript(\u0026#34;https://threejs.org/build/three.js\u0026#34;) 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 // \u0026#39;update\u0026#39; is a reserved function that will be run every time the main hydra rendering context is updated update = () =\u0026gt; { 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:\nawait loadScript(\u0026#34;https://unpkg.com/tone\u0026#34;) synth = new Tone.Synth().toDestination(); synth.triggerAttackRelease(\u0026#34;C4\u0026#34;, \u0026#34;8n\u0026#34;); Running locally # To run locally, you must have nodejs, yarn and npm installed. Install node and npm from: https://nodejs.org/en/\nInstall yarn from the command line\nnpm install --global yarn open terminal and enter directory\ncd hydra install dependencies:\nyarn install run server\nyarn serve go to https://localhost:8000 in the browser\nTo develop # Edit frontend/public/index.html to load \u0026lsquo;bundle.js\u0026rsquo; rather than \u0026lsquo;bundle.min.js\u0026rsquo;\nRun development server\nyarn dev Audio Responsiveness # FFT functionality is available via an audio object accessed via \u0026ldquo;a\u0026rdquo;. The editor uses https://github.com/meyda/meyda for audio analysis. To show the fft bins,\na.show() Set number of fft bins:\na.setBins(6) Access the value of the leftmost (lowest frequency) bin:\na.fft[0] Use the value to control a variable:\nosc(10, 0, () =\u0026gt; (a.fft[0]*4)) .out() It is possible to calibrate the responsiveness by changing the minimum and maximum value detected. (Represented by blur lines over the fft). To set minimum value detected:\na.setCutoff(4) Setting the scale changes the range that is detected.\na.setScale(2) The fft[] will return a value between 0 and 1, where 0 represents the cutoff and 1 corresponds to the maximum.\nYou can set smoothing between audio level readings (values between 0 and 1). 0 corresponds to no smoothing (more jumpy, faster reaction time), while 1 means that the value will never change.\na.setSmooth(0.8) To hide the audio waveform:\na.hide() MIDI (experimental) # MIDI controllers can work with Hydra via WebMIDI an example workflow is at /docs/midi.md .\nAPI # There is an updated list of functions at /docs/funcs.md.\nAs well as in the source code for hydra-synth.\nCHANGELOG # See CHANGELOG.md for recent changes.\nLibraries and tools used: # Regl: functional webgl glitch.io: hosting for sandbox signalling server codemirror: browser-based text editor simple-peer Inspiration: # Space-Time Dynamics in Video Feedback (1984). video and paper by Jim Crutchfield about using analog video feedback to model complex systems. Satellite Arts Project (1977) - Kit Galloway and Sherrie Rabinowitz Sandin Image Processor kynd - reactive buffers experiment Related projects: # Lumen app (osx application) Vsynth (package for MaxMSP) VEDA (VJ system within atom) The Force "}] \ No newline at end of file diff --git a/public/ja.search.min.c2139bc78d29a45c045eca333bef7e8e321ea1591850baa23a6d780828a20678.js b/public/ja.search.min.c2139bc78d29a45c045eca333bef7e8e321ea1591850baa23a6d780828a20678.js new file mode 100644 index 0000000..15f994a --- /dev/null +++ b/public/ja.search.min.c2139bc78d29a45c045eca333bef7e8e321ea1591850baa23a6d780828a20678.js @@ -0,0 +1 @@ +"use strict";(function(){const o="/hydra-docs-v2/ja.search-data.min.a8e362a7364d3d13b9c88022d829cd70e05d23f620298e2daad59b50bf75169a.json",i=Object.assign({encode:!1,tokenize:function(e){return e.replace(/[\x00-\x7F]/g,"").split("")}},{doc:{id:"id",field:["title","content"],store:["title","href","section"]}}),e=document.querySelector("#book-search-input"),t=document.querySelector("#book-search-results");if(!e)return;e.addEventListener("focus",n),e.addEventListener("keyup",s),document.addEventListener("keypress",a);function a(t){if(t.target.value!==void 0)return;if(e===document.activeElement)return;const n=String.fromCharCode(t.charCode);if(!r(n))return;e.focus(),t.preventDefault()}function r(t){const n=e.getAttribute("data-hotkeys")||"";return n.indexOf(t)>=0}function n(){e.removeEventListener("focus",n),e.required=!0,fetch(o).then(e=>e.json()).then(e=>{window.bookSearchIndex=FlexSearch.create("balance",i),window.bookSearchIndex.add(e)}).then(()=>e.required=!1).then(s)}function s(){for(;t.firstChild;)t.removeChild(t.firstChild);if(!e.value)return;const n=window.bookSearchIndex.search(e.value,10);n.forEach(function(e){const n=c("
    • "),s=n.querySelector("a"),o=n.querySelector("small");s.href=e.href,s.textContent=e.title,o.textContent=e.section,t.appendChild(n)})}function c(e){const t=document.createElement("div");return t.innerHTML=e,t.firstChild}})() \ No newline at end of file diff --git a/public/ja/404.html b/public/ja/404.html index 8a8dcd1..5f07215 100644 --- a/public/ja/404.html +++ b/public/ja/404.html @@ -13,9 +13,9 @@ 404 Page not found | hydra video synth - + - + + + + + + + + + + + + + + + + + +
    + + +
    +
    + +
    + + + 使い方 + + +
    + + + + + + +
    + + + +

    + 使い方 + # +

    +

    https://hydra.ojack.xyz を開いて、

    +
      +
    • CTRL-Enter: 現在の行を実行
      • +
    • CTRL-Shift-Enter: スクリーン上のすべてのコードを実行
      • +
    • ALT-Enter: （空行にはさまれた）ブロックを実行
      • +
    • CTRL-Shift-H: コードを非表示・表示
      • +
    • CTRL-Shift-F: Prettier によりフォーマット
      • +
    • CTRL-Shift-S: スクリーンショットを取って画像ファイルとしてダウンロード
      • +
    • CTRL-Shift-G: twitter の @hydra_patterns に保存（現在は動作していません）
      • +
    +

    コードはブラウザ上のエディタからでもコンソールからでも実行できます。

    +

    使い始める前に、 @hydra_patterns からコミュニティ・メンバーのシェアしたパターンをご覧いただければイメージがつかめると思います。

    +

    + 基本の関数 + # +

    +

    オシレーターを周波数、シンク、 RGB オフセットのパラメータでレンダー：

    +
    osc(20, 0.1, 0.8).out()
+

    オシレーターを 0.8 ラジアンだけ回転：

    +
    osc(20, 0.1, 0.8).rotate(0.8).out()
+

    上の関数の出力をピクセル化：

    +
    osc(20, 0.1, 0.8).rotate(0.8).pixelate(20, 30).out()
+

    ウェブカメラの画像を表示：

    +
    s0.initCam() // ソース・バッファ s0 をウェブカメラに初期化
+src(s0).out() // ソース・バッファ s0 をレンダー
+

    カメラが複数接続されている場合は、インデックスを用いてカメラを指定できます：

    +
    s0.initCam(1) // ソース・バッファ s0 をウェブカメラ(1)に初期化
+

    ウェブカメラ・カレイドスコープ（万華鏡）：

    +
    s0.initCam() // ソース・バッファ s0 をウェブカメラに初期化
+src(s0).kaleid(4).out() // ウェブカメラをカレイドとして表示
+

    複数のソースをかけ合わせることもできます：

    +
    osc(10)
+  .rotate(0.5)
+  .diff(osc(200))
+  .out()
+

    デフォルトの環境では4つの出力バッファがあり、それぞれに別のビジュアルをレンダ―することができます。出力は変数 o0, o1, o2, o3 によりアクセスできます。

    +

    バッファ o1 にレンダ―するには：

    +
    osc().out(o1)
+render(o1) // o1 のコンテンツを表示
+

    out() の引数として出力バッファが指定されていない場合、 o0 に結果がレンダーされます。 +全てのレンダー・バッファを表示するには：

    +
    render()
+

    出力バッファはそれからミキシングやコンポジションにより画面に表示するグラフィックを生成することができます。

    +
    s0.initCam() // ソース・バッファ s0 をウェブカメラに初期化
+src(s0).out(o0) // o0 のソースをウェブカメラのバッファに指定
+osc(10, 0.2, 0.8).diff(o0).out(o1) // グラデーションを o0 の内容とコンポジションにして、出力バッファ o1 につなぐ
+render(o1) // o1 を画面に描画
+

    コンポジション関数は blend(), diff(), mult(), add() 等で、四則演算により入力されたテクスチャとベース・テクスチャの色をかけ合わせることができます。フォトショップのブレンドモード（描画モード）のイメージです。

    +

    modulate(texture, amount) （texture: 入力テクスチャ、amount：度合) は入力テクスチャの赤、緑チャンネルに応じてベース・テクスチャの x, y 座標を変化させます。詳しくはこちら（英語）： https://lumen-app.com/guide/modulation/

    +
    osc(21, 0).modulate(o1).out(o0)
+osc(40).rotate(1.57).out(o1)
+

    動画をソースとして用いる：

    +
    s0.initVideo("https://media.giphy.com/media/AS9LIFttYzkc0/giphy.mp4")
+src(s0).out()
+

    画像をソースとして用いる：

    +
    s0.initImage("https://upload.wikimedia.org/wikipedia/commons/2/25/Hydra-Foto.jpg")
+src(s0).out()
+

    + 関数を引数として使う + # +

    +

    Hydra の関数の引数は、固定した値ではなく関数として定義することもできます。例えば：

    +
    osc(function(){return 100 * Math.sin(time * 0.1)}).out()
+

    この例ではオシレータの周波数を時間の関数として定義しています（time はグローバル変数で、ページがロードされてから経過した秒数を表します）。 ES6 文法を使えばさらに短く書けます：

    +
    osc(() => (100 * Math.sin(time * 0.1))).out()
+

    + デスクトップのキャプチャ + # +

    +

    ダイアログを表示してスクリーンやウインドウを入力テクスチャに指定することができます：

    +
    s0.initScreen()
+src(s0).out()
+

    + Connecting to remote streams + # +

    +

    Any hydra instance can use other instances/windows containing hydra as input sources, as long as they are connected to the internet and not blocked by a firewall. Hydra uses webrtc (real time webstreaming) under the hood to share video streams between open windows. The included module rtc-patch-bay manages connections between connected windows, and can also be used as a standalone module to convert any website into a source within hydra. (See standalone camera source below for example.)

    +

    To begin, open hydra simultaneously in two separate windows. +In one of the windows, set a name for the given patch-bay source:

    +
    pb.setName("myGraphics")
+

    The title of the window should change to the name entered in setName().

    +

    From the other window, initiate “myGraphics” as a source stream.

    +
    s0.initStream("myGraphics")
+

    render to screen:

    +
    s0.initStream("myGraphics")
+src(s0).out()
+

    The connections sometimes take a few seconds to be established; open the browser console to see progress. +To list available sources, type the following in the console:

    +
    pb.list()
+

    + Using p5.js with hydra + # +

    +
    // 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.

    +

    Here is an example using Three.js from the web editor:

    +
    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:

    +
    await loadScript("https://unpkg.com/tone")
+
+synth = new Tone.Synth().toDestination();
+synth.triggerAttackRelease("C4", "8n");
+

    + 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 to load ‘bundle.js’ rather than ‘bundle.min.js’

    +

    Run development server

    +
    yarn dev
+

    + Audio Responsiveness + # +

    +

    FFT functionality is available via an audio object accessed via “a”. The editor uses https://github.com/meyda/meyda for audio analysis. +To show the fft bins,

    +
    a.show()
+

    Set number of fft bins:

    +
    a.setBins(6)
+

    Access the value of the leftmost (lowest frequency) bin:

    +
    a.fft[0]
+

    Use the value to control a variable:

    +
    osc(10, 0, () => (a.fft[0]*4))
+  .out()
+

    It is possible to calibrate the responsiveness by changing the minimum and maximum value detected. (Represented by blur lines over the fft). To set minimum value detected:

    +
    a.setCutoff(4)
+

    Setting the scale changes the range that is detected.

    +
    a.setScale(2)
+

    The fft[] will return a value between 0 and 1, where 0 represents the cutoff and 1 corresponds to the maximum.

    +

    You can set smoothing between audio level readings (values between 0 and 1). 0 corresponds to no smoothing (more jumpy, faster reaction time), while 1 means that the value will never change.

    +
    a.setSmooth(0.8)
+

    To hide the audio waveform:

    +
    a.hide()
+

    + MIDI (experimental) + # +

    +

    MIDI controllers can work with Hydra via WebMIDI an example workflow is at /docs/midi.md .

    +

    + API + # +

    +

    There is an updated list of functions at /docs/funcs.md.

    +

    As well as in the source code for hydra-synth.

    +

    + CHANGELOG + # +

    +

    See CHANGELOG.md for recent changes.

    +

    + Libraries and tools used: + # +

    +
      +
    • Regl: functional webgl
      • +
    • glitch.io: hosting for sandbox signalling server
      • +
    • codemirror: browser-based text editor
      • +
    • simple-peer
      • +
    +

    + Inspiration: + # +

    + + + +
    + + + +
    + +
    + + + + + + + + + +
    + + + + + + + + +
    + + + +
    + +
    + + + + +
    + + + + +
    + + + + + + + + + + + + + + + + diff --git a/public/ja/docs/learning/index.xml b/public/ja/docs/learning/index.xml new file mode 100644 index 0000000..cb2d03f --- /dev/null +++ b/public/ja/docs/learning/index.xml @@ -0,0 +1,10 @@ + + + + 使い方 on hydra video synth + https://hydra.ojack.xyz/hydra-docs-v2/ja/docs/learning/ + Recent content in 使い方 on hydra video synth + Hugo -- gohugo.io + ja + + diff --git a/public/ja/docs/what-is-hydra/index.html b/public/ja/docs/what-is-hydra/index.html index f42065c..f1b210a 100644 --- a/public/ja/docs/what-is-hydra/index.html +++ b/public/ja/docs/what-is-hydra/index.html @@ -24,10 +24,9 @@ about | hydra video synth - - + - + + + + + + + + + + + + + + + + + +
    + + +
    +
    + +
    + + + hydra meetup #8 is today! + + +
    + + + + + + +
    + + + + + + + +
    + +
    + + + + + + + + + +
    + + + + + + + + +
    + + + +
    + +
    + + + + +
    + + + + +
    + + + + + + + + + + + + + + + + diff --git a/public/posts/hydra-meetup-8/meetup.png b/public/posts/hydra-meetup-8/meetup.png new file mode 100644 index 0000000..d4d4956 Binary files /dev/null and b/public/posts/hydra-meetup-8/meetup.png differ diff --git a/public/posts/index.html b/public/posts/index.html index 1c41f20..abb57e2 100644 --- a/public/posts/index.html +++ b/public/posts/index.html @@ -12,9 +12,9 @@ blog | hydra video synth - + - + + + + + + + + + + + + + + + + + + +
    +
    +

    404

    +

    Page Not Found

    +

    + hydra video synth +

    +
    +
    + + + + + diff --git a/public/pt/categories/index.html b/public/pt/categories/index.html new file mode 100644 index 0000000..d7599e7 --- /dev/null +++ b/public/pt/categories/index.html @@ -0,0 +1,375 @@ + + + + + + + + + + + +Categories | hydra video synth + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + +
    +
    + +
    + + + Categories + + +
    + + + + + + +
    + + + + + + + + + +
    + +
    + + + + + +
    + + + + + + + + +
    + + + + + + +
    + + + + +
    + + + + + + + + + + + + + + + + diff --git a/public/pt/categories/index.xml b/public/pt/categories/index.xml new file mode 100644 index 0000000..f329489 --- /dev/null +++ b/public/pt/categories/index.xml @@ -0,0 +1,10 @@ + + + + Categories on hydra video synth + https://hydra.ojack.xyz/hydra-docs-v2/pt/categories/ + Recent content in Categories on hydra video synth + Hugo -- gohugo.io + pt + + diff --git a/public/pt/categories/page/1/index.html b/public/pt/categories/page/1/index.html new file mode 100644 index 0000000..63046bd --- /dev/null +++ b/public/pt/categories/page/1/index.html @@ -0,0 +1,10 @@ + + + + https://hydra.ojack.xyz/hydra-docs-v2/pt/categories/ + + + + + + diff --git a/public/pt/docs/index.html b/public/pt/docs/index.html new file mode 100644 index 0000000..b3a307c --- /dev/null +++ b/public/pt/docs/index.html @@ -0,0 +1,333 @@ + + + + + + + + + + + +Docs | hydra video synth + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + +
    +
    + +
    + + + Docs + + +
    + + + + + + +
    + + + +
    + + + +
    + +
    + + + + + +
    + + + + + + + + +
    + + + + + + +
    + + + + +
    + + + + + + + + + + + + + + + + diff --git a/public/pt/docs/index.xml b/public/pt/docs/index.xml new file mode 100644 index 0000000..7c1b4f8 --- /dev/null +++ b/public/pt/docs/index.xml @@ -0,0 +1,10 @@ + + + + Docs on hydra video synth + https://hydra.ojack.xyz/hydra-docs-v2/pt/docs/ + Recent content in Docs on hydra video synth + Hugo -- gohugo.io + pt + + diff --git a/public/pt/docs/learning/additional-topics/index.html b/public/pt/docs/learning/additional-topics/index.html new file mode 100644 index 0000000..733f689 --- /dev/null +++ b/public/pt/docs/learning/additional-topics/index.html @@ -0,0 +1,542 @@ + + + + + + + + + + + + + +Tópicos Adicionais | hydra video synth + + + + + + + + + + + + + + + + + + + + + + +
    + + +
    +
    + +
    + + + Tópicos Adicionais + + +
    + + + + + + +
    + + + +

    + Tópicos Adicionais + # +

    +

    + live coding: avaliar linhas ou blocos de código separado + # +

    +

    Pressione ctrl+enter para executar uma linha de código. +Pressione shift+ctrl+enter para avaliar um bloco de código. +Dica: podemos alternar entre diferentes linhas de código para uma performance de live coding.

    +
    osc().out() // executar esta primeira
+
+noise().mult(osc(10,0.1,10)).out() // experimente este
+

    + arrays + # +

    +

    Arrays (listas) em Hydra são uma coleção sequenciada de valores. Podem ser usadas para alterar vários parâmetros no tempo.

    +
    osc(10,0.1,[10,0,2,0.5]).out()
+
+shape([3,4,200,2]).out()
+

    + audio + # +

    +

    Faça visuais reativos a áudio. O sinal de áudio funciona como um parâmetro de entrada e podemos multiplicar este valor a fim de alterar a quantidade de mudanças.

    +
    osc(20,0.1, ()=>a.ff[0]*10).out()
+

    + funções glsl personalizadas: https://hydra-book.glitch.me/#/glsl (inglês) + # +

    +

    + do documento antigo: + # +

    +

    + Passando funções como variáveis + # +

    +

    Cada parâmetro pode ser definido como uma função ao invés de uma variável estática. Por exemplo,

    +
    osc(function(){return 100 * Math.sin(time * 0.1)}).out()
+

    modifica a frequência do oscilador em uma função do tempo (tempo é uma variável global que representa os segundos que passaram desde o carregamento da página). Isto pode ser escrito de forma mais concisa usando a sintaxe es6:

    +
    osc(() => (100 * Math.sin(time * 0.1))).out()
+

    + Captura da área de trabalho + # +

    +

    Abra um diálogo para selecionar uma aba de tela a ser usada como textura de entrada:

    +
    s0.initScreen()
+src(s0).out()
+

    + Conectando a streams remotos + # +

    +

    Qualquer instância de Hydra pode usar outras instâncias/janelas contendo Hydra como fontes de entrada, desde que estejam conectadas à internet e não bloqueadas por um firewall. Hydra usa a webrtc (webstreaming em tempo real) em segundo plano para compartilhar fluxos de vídeo entre janelas abertas. O módulo incluso rtc-patch-bay gerencia conexões entre janelas conectadas e também pode ser usado como um módulo autônomo para converter qualquer website em uma fonte dentro de Hydra (veja fonte de câmera autônoma abaixo, por exemplo).

    +

    Para começar, abra Hydra simultaneamente em duas janelas separadas. +Em uma das janelas, defina um nome para a fonte de patch-bay dada:

    +
    pb.setName("myGraphics")
+

    O título da janela deve mudar para o nome inserido em setName().

    +

    A partir da outra janela, inicie “myGraphics” como uma fonte de stream.

    +
    s0.initStream("myGraphics")
+

    renderize para a tela:

    +
    s0.initStream("myGraphics")
+src(s0).out()
+

    As conexões às vezes levam alguns segundos para serem estabelecidas; abra o console do navegador para ver o progresso. +Para listar as fontes disponíveis, digite o seguinte no console:

    +
    pb.list()
+

    + Usando p5.js com Hydra + # +

    +
    // Inicializa uma nova instância p5. Só é necessário chamar uma vez
+p5 = new P5() // {width: window.innerWidth, height:window.innerHeight, mode: 'P2D'}
+
+// desenha um retângulo no ponto 300, 100
+p5.rect(300, 100, 100, 100)
+
+// Note que P5 roda em modo instância, portanto, todas as funções precisam começar com a variável onde P5 foi inicializado (neste caso p5)
+// referência para P5: https://P5js.org/reference/ (inglês)
+// explicação do modo de instância: https://github.com/processing/P5.js/wiki/Global-and-instance-mode (inglês)
+
+// Durante o livecoding, a função "setup()" do P5.js basicamente não tem utilidade; qualquer coisa que for chamada em setup pode simplesmente ser chamada fora de qualquer função.
+
+p5.clear()
+
+for(var i = 0; i < 100; i++){
+  p5.fill(i*10, i%30, 255)
+  p5.rect(i*20, 200, 10,200)
+}
+
+// Para programar animações ao vivo, você pode redefinir a função de desenho do P5 da seguinte forma:
+// (um retângulo que segue o mouse)
+p5.draw = () => {
+  p5.fill(p5.mouseX/5, p5.mouseY/5, 255, 100)
+  p5.rect(p5.mouseX, p5.mouseY, 30, 150)
+}
+
+// Para usar P5 como entrada para Hydra, basta usar o canvas como fonte:
+s0.init({src: p5.canvas})
+
+// Depois, renderize o canvas
+src(s0).repeat().out()
+

    + Carregando scripts externos + # +

    +

    A função await loadScript() permite carregar outras bibliotecas empacotadas Javascript dentro do editor da Hydra. Qualquer código Javascript pode ser executado no editor Hydra.

    +

    Aqui está um exemplo usando o Three.js no editor web:

    +
    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)
+material = new THREE.MeshBasicMaterial({color: 0x00ff00})
+geometry = new THREE.BoxGeometry()
+cube = new THREE.Mesh(geometry, material);
+scene.add(cube)
+camera.position.z = 1.5
+
+// 'update' é uma função reservada que será executada toda vez que o contexto de renderização principal de Hydra for atualizado
+update = () => {
+  cube.rotation.x += 0.01;
+  cube.rotation.y += 0.01;
+  renderer.render( scene, camera );
+}
+
+s0.init({ src: renderer.domElement })
+
+src(s0).repeat().out()
+

    E aqui está um exemplo carregando a biblioteca Tone.js:

    +
    await loadScript("https://unpkg.com/tone")
+
+synth = new Tone.Synth().toDestination();
+synth.triggerAttackRelease("C4", "8n");
+

    + Responsividade a áudio + # +

    +

    A funcionalidade FFT está disponível por meio de um objeto de áudio acessado via “a”. O editor usa https://github.com/meyda/meyda para análise de áudio. Para mostrar os compartimentos fft,

    +
    a.show()
+

    Defina o número de compartimentos fft:

    +
    a.setBins(6)
+

    Acesse o valor do compartimento mais à esquerda (frequência mais baixa):

    +
    a.fft[0]
+

    Use o valor para controlar uma variável:

    +
    osc(10, 0, () => (a.fft[0]*4))
+  .out()
+

    É possível calibrar a responsividade alterando o valor mínimo e máximo detectado (representado por linhas de desfoque sobre o fft). Para definir o valor mínimo detectado:

    +
    a.setCutoff(4)
+

    Definir a escala altera o intervalo detectado.

    +
    a.setScale(2)
+

    fft[<índice>] retornará um valor entre 0 e 1, onde 0 representa o corte e 1 corresponde ao máximo.

    +

    Você pode definir a suavização entre as leituras de nível de áudio (valores entre 0 e 1). 0 corresponde a nenhuma suavização (mais saltos, tempo de reação mais rápido), enquanto 1 significa que o valor nunca mudará.

    +
    a.setSmooth(0.8)
+

    Para ocultar a onda de áudio:

    +
    a.hide()
+

    + MIDI (experimental) + # +

    +

    Controladores MIDI podem trabalhar com Hydra via WebMIDI. Um exemplo pode ser visto em /docs/midi.md.

    +

    Tradução por A1219 e Vagné L.

    +
    + + + +
    + +
    + + + + + + + + + +
    + + + + + + + + +
    + + + +
    + +
    + + + + +
    + + + + +
    + + + + + + + + + + + + + + + + diff --git a/public/pt/docs/learning/getting-started/index.html b/public/pt/docs/learning/getting-started/index.html new file mode 100644 index 0000000..bdfb2a0 --- /dev/null +++ b/public/pt/docs/learning/getting-started/index.html @@ -0,0 +1,1007 @@ + + + + + + + + + + + + + +Começando | hydra video synth + + + + + + + + + + + + + + + + + + + + + + + +
    + + +
    +
    + +
    + + + Começando + + +
    + + + + + + +
    + + + +

    + Começando + # +

    +

    Este documento é uma introdução à criação de visuais ao vivo usando o Hydra. Abrange o básico da escrita de código no navegador para gerar e combinar fontes de vídeo em tempo real. Nenhuma experiência com programação ou vídeo é necessária!

    +

    Quem quiser apenas começar em 60 segundos, também pode visitar:

    + +

    Este tutorial é pensado para ser usado dentro do editor web hydra. Também é interativo – podemos alterar o código em cada bloco para ver como isso afeta os visuais.

    +

    + Conhecendo o editor do navegador + # +

    +

    Para começar, abra o editor web hydra em uma janela separada. Feche a janela em destaque clicando no [x] no canto superior direito.

    +

    +

    Você verá alguns visuais coloridos em segundo plano com textos no canto superior esquerdo da tela. Este é o código que gera os visuais ao fundo.

    +

    No canto superior direito, você encontrará uma barra de ferramentas com estes botões: +

    +
      +
    1. Executar tudo executa todo o código na página (tecla de atalho *ctrl+shift+enter).
      2. +
    2. Fazer upload para a galeria envia o sketch para a galeria da Hydra e cria um curto URL.
      3. +
    3. Limpar editor redefine o ambiente e limpa o texto do editor.
      4. +
    4. Mostrar um sketch aleatório carrega exemplos de esboços aleatórios. Sempre é uma boa maneira de aprender Hydra estudando o código de outra pessoa.
      5. +
    5. Aplicar mudanças aleatórias modifica valores automaticamente. Experimente com alguns dos exemplos de esboço.
      6. +
    6. Mostrar janela de informação mostra uma janela em sobreposição com texto de ajuda e links
      7. +
    +

    + Primeira linha de código + # +

    +

    Use o botão clear all drawing +para apagar o sketch anterior.

    +

    Em seguida, digite ou cole o seguinte no editor:

    +
    osc().out()
+

    Aperte o botão run drawing para executar este código e atualizar os visuais. Você verá algumas listras rolando na tela.

    +
    + +
    + +

    Isso cria um oscilador visual. Tente modificar os parâmetros do oscilador colocando um número dentro dos parênteses de osc(), por exemplo osc(10).out().

    +

    Execute novamente o código pressionando o botão run novamente e vendo a atualização do visual. Tente adicionar outros valores para controlar os parâmetros frequency (frequência), sync (sincronização) e color offset (deslocamento de cor) do oscilador.

    +
    + +
    + +

    Dica: você também pode usar o atalho ‘ctrl + shift + enter’ para ter o mesmo efeito do botão executar.

    +

    + Adicionando transformações + # +

    +

    Podemos adicionar outra transformação ao oscilador acima, adicionando a função rotate() depois do oscilador:

    +
    + +
    + +

    Como você pode ver, temos primeiro uma fonte de entrada osc() ae as coisas que vêm depois (rotate() and out()) são conectadas com um ponto ‘.’ +Nesse sentido, Hydra é inspirado por síntese modular (inglês). +Em vez de conectar cabos, você conecta diferentes tipos de funções javascript.
    +

    +
    + fonte Sandin Image Processor + # +
    +

    Podemos continuar adicionando transformações a esta cadeia de funções. Por exemplo:

    +
    + +
    + +

    Repetir:

    +
    + +
    + +

    Para obter mais fontes e transformações disponíveis, consulte a referência interativa de funções (inglês). +A lógica é começar com uma source (fonte) (como osc(), shape(), ou noise()), e depois adicionar transformações a geometry (geometria) e color (cor) (como .rotate(), .kaleid(), .pixelate()), e no final sempre conecte a cadeia de transformações à tela de saída .out().

    +
    + +
    + +
    + +
    + +

    + O que é um erro? + # +

    +

    Às vezes, você tentará executar uma linha de código e nada acontecerá. Se você tiver um erro, notará um texto em vermelho na parte inferior esquerda da tela. Algo como ‘Unexpected token ‘.’ (em vermelho) aparecerá. Isso não afeta seu código, mas você não poderá continuar codificando até corrigir o erro. Geralmente é um erro de digitação ou algo relacionado à sintaxe.

    +

    + O que é um comentário? + # +

    +
    // Olá, sou uma linha de comentários. Eu sou um texto que não vai mudar o seu código. Você pode escrever anotações, seu nome ou até mesmo um poema aqui.
+

    + Salve seu esboço na internet + # +

    +

    Ao avaliar todo o código com o botão run ou com shift + ctrl + enter, o Hydra gera automaticamente uma URL que contém as últimas alterações do seu esboço. Podemos copiar e colar o url da barra de URL para salvá-lo ou compartilhá-lo com outras pessoas. É possível também usar as setas voltar e avançar do navegador para navegar para versões anteriores de seu esboço.

    +

    + Usando a webcam + # +

    +

    Além de usar fontes de dentro do Hydra (como osc() e shape()), podemos usar o Hydra para processar fontes de vídeo externas, como uma webcam. +Para inicializar a webcam, execute o seguinte código:

    +
    s0.initCam()
+

    Isso ativa a fonte da webcam dentro de uma variável chamada s0, e você deve ver a luz da sua webcam acender. No entanto, você ainda não verá a imagem da webcam na tela. Para usar a câmera em um esboço Hydra, você precisa usá-la dentro da função src().

    +
    + +
    + +

    Semelhante à adição de transformações acima, podemos adicionar transformações de cor e geometria à saída da câmera, adicionando funções à cadeia:

    +
    + +
    + +
    + +
    + +

    Caso tenha várias webcams, poderá acessá-las separadamente adicionando um número dentro de initCam, por exemplo s0.initCam(1) ou s0.initCam(2).

    +

    + Saídas múltiplas + # +

    +

    Por padrão, o Hydra contém quatro saídas virtuais separadas que podem renderizar visuais diferentes e ser misturadas entre si para criar visuais mais complexos. As variáveis o0, o1, o2 e o3 correspondem às diferentes saídas.

    +

    Para ver todas as quatro saídas de uma vez, use a função render(). Isso dividirá a tela em quatro, mostrando cada saída em uma seção diferente da tela.

    +

    +

    Usar uma variável diferente dentro da função .out() renderiza a cadeia para uma saída diferente. Por exemplo, .out(o1) renderizará uma cadeia de funções para o buffer gráfico o1.

    +
    + +
    + +

    Por padrão, apenas a saída o0 é renderizada na tela, enquanto o comando render() divide a tela em quatro. Mostre uma saída específica na tela adicionando-a dentro de render(), por exemplo, render(o2) para mostrar o buffer o2.

    +
    + +
    + +

    Dica: tente criar esboços diferentes e trocá-los em sua performance ao vivo ou até mesmo combiná-los.

    +
    + +
    + +

    + Combinando várias fontes juntas + # +

    +

    Podemos usar funções blend (mescla/mistura) para combinar várias fontes visuais. .blend() combina as cores de duas fontes para criar uma terceira fonte.

    +
    + +
    + +

    Tente adicionar transformações às fontes acima (como osc(10).rotate(0, 0.1).out(o1)) para ver como isso afeta a imagem combinada. Podemos também especificar a quantidade de mistura adicionando um parâmetro separado a .blend(), por exemplo .blend(o1, 0.9).

    +

    Há vários modos de mescla (inglês) em Hydra, semelhantes aos modos de mesclagem que você pode encontrar em um programa gráfico como Photoshop ou GIMP. Veja a referência de funções (inglês) para mais possibilidades.

    +
    + +
    + +

    + Modulação + # +

    +

    Enquanto funções blend combinam as cores de duas fontes visuais, as funções modulate (modulação) usam as cores de uma fonte para afetar a geometria da segunda fonte. Isso cria uma espécie de efeito de deformação ou distorção. Uma analogia no mundo real seria olhar através de uma janela de vidro texturizada. modulate() não altera cor ou luminosidade, mas distorce uma fonte visual usando outra fonte visual.

    +

    Usando as mesmas fontes acima, podemos usar um oscilador para modular ou distorcer a imagem da câmera:

    +
    + +
    + +

    Você pode adicionar um segundo parâmetro à função modulate() para controlar a quantidade de distorção: modulate(o1, 0.9). Neste caso, os canais vermelho e verde do oscilador estão sendo convertidos em deslocamento x e y da imagem da câmera.

    +

    Todas as transformações de geometria têm funções de modulação correspondentes que permitem usar uma fonte para distorcer outra fonte. Por exemplo, modulateRotate() é semelhante a rotate(), porém nos permite aplicar diferentes intensidades de rotação em diferentes partes da fonte visual. Veja a referência de funções para mais exemplos.

    +
    + +
    + +

    + Mais combinações e modulações + # +

    +

    Além de usar várias saídas para juntar imagens, podemos também pode combinar várias fontes dentro da mesma cadeia de funções, sem transformá-las em saídas separadas.

    +
    + +
    + +

    Isto permite utilizar muitas fontes, modos de combinação e modulação, tudo a partir da mesma cadeia de funções.

    +
    + +
    + +

    Dica: use ctrl + shift + f no editor web para formatar automaticamente seu código.

    +

    + Modulando com a câmera + # +

    +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +

    Cobrimos agora todos os tipos básicos de funções dentro de Hydra: source, geometry, color, blending, e modulation! Descubra onde você pode chegar combinando elas.

    +

    + Aproveite! + # +

    +

    Tradução por A1219 e Vagné L.

    +
    + + + +
    + +
    + + + + + + + + + +
    + + + + + + + + +
    + + + +
    + +
    + + + + +
    + + + + +
    + + + + + + + + + + + + + + + + diff --git a/public/pt/docs/learning/hydra-docs-v2.code-workspace b/public/pt/docs/learning/hydra-docs-v2.code-workspace new file mode 100644 index 0000000..31c0eb7 --- /dev/null +++ b/public/pt/docs/learning/hydra-docs-v2.code-workspace @@ -0,0 +1,11 @@ +{ + "folders": [ + { + "path": "../../.." + }, + { + "path": "../../../../geikha-docs" + } + ], + "settings": {} +} \ No newline at end of file diff --git a/public/pt/docs/learning/index.html b/public/pt/docs/learning/index.html new file mode 100644 index 0000000..d0e0f1a --- /dev/null +++ b/public/pt/docs/learning/index.html @@ -0,0 +1,346 @@ + + + + + + + + + + + +Learning | hydra video synth + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + +
    +
    + +
    + + + Learning + + +
    + + + + + + +
    + + + +
    + + + +
    + +
    + + + + + + + + + +
    + + + + + + + + +
    + + + + + + +
    + + + + +
    + + + + + + + + + + + + + + + + diff --git a/public/pt/docs/learning/index.xml b/public/pt/docs/learning/index.xml new file mode 100644 index 0000000..503c64b --- /dev/null +++ b/public/pt/docs/learning/index.xml @@ -0,0 +1,31 @@ + + + + hydra video synth + https://hydra.ojack.xyz/hydra-docs-v2/pt/docs/learning/ + Recent content on hydra video synth + Hugo -- gohugo.io + pt + + Começando + https://hydra.ojack.xyz/hydra-docs-v2/pt/docs/learning/getting-started/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/pt/docs/learning/getting-started/ + Começando # Este documento é uma introdução à criação de visuais ao vivo usando o Hydra. Abrange o básico da escrita de código no navegador para gerar e combinar fontes de vídeo em tempo real. Nenhuma experiência com programação ou vídeo é necessária! +Quem quiser apenas começar em 60 segundos, também pode visitar: +Getting started short version (inglês) Este tutorial é pensado para ser usado dentro do editor web hydra. + + + + Tópicos Adicionais + https://hydra.ojack.xyz/hydra-docs-v2/pt/docs/learning/additional-topics/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/pt/docs/learning/additional-topics/ + Tópicos Adicionais # live coding: avaliar linhas ou blocos de código separado # Pressione ctrl+enter para executar uma linha de código. Pressione shift+ctrl+enter para avaliar um bloco de código. Dica: podemos alternar entre diferentes linhas de código para uma performance de live coding. +osc().out() // executar esta primeira noise().mult(osc(10,0.1,10)).out() // experimente este arrays # Arrays (listas) em Hydra são uma coleção sequenciada de valores. Podem ser usadas para alterar vários parâmetros no tempo. + + + + diff --git a/public/pt/images/hydra.png b/public/pt/images/hydra.png new file mode 100644 index 0000000..3e811ce Binary files /dev/null and b/public/pt/images/hydra.png differ diff --git a/public/pt/index.html b/public/pt/index.html new file mode 100644 index 0000000..3b1a598 --- /dev/null +++ b/public/pt/index.html @@ -0,0 +1,394 @@ + + + + + + + + + + + + + | hydra video synth + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + +
    +
    + +
    + + + + + +
    + + + + + + +
    + + + +

    + O que é Hydra? + # +

    +

    hydra

    +

    Hydra é um sintetizador de vídeo para codificação ao vivo (livecoding) que funciona no navegador. É software livre e pode ser usado tanto por iniciantes como por profissionais. Você pode simplesmente abrir o hydra web editor em um laptop ou dispositivo móvel para começar.

    +

    Hydra é escrito em JavaScript e compila para WebGL por trás das cortinas. Sua sintaxe foi inspirada em sistemas analógicos e modulares de síntese de vídeo, onde são gerados visuais através da interconexão de sinais com diversas transformações.

    +

    + Hydra pode ser usado para: + # +

    +
      +
    • mesclar e adicionar efeitos a imagens de uma câmera, uma captura de tela, transmissões ao vivo ou vídeos
      • +
    • criar visuais generativos e áudio reativos e compartilhar na internet com outras pessoas
      • +
    • combinar com outras bibliotecas de JavaScript, como p5.js, Tone.js, THREE.js ou gibber
      • +
    • adicionar efeitos de vídeo interativos em um website
      • +
    • experimentar e aprender sobre retroalimentação de vídeo (feedback), fractais e outras operações visuais
      • +
    • transmitir vídeo entre navegadores e fazer jams online com outras pessoas
      • +
    +

    + Demais recursos e próximos passos + # +

    +

    Para mais instruções e informações, acesse: a documentação interativa em português, uma lista de funções hydra (inglês), a base de dados comunitária de projetos e tutoriais (inglês), uma galeria de sketches feitos por usuários e o código fonte no github.

    +

    Hydra é uma criação de olivia jack apoiada por uma comunidade de colaboradores. Se você gosta de usar o Hydra, considere por favor incentivar seu desenvolvimento contínuo.

    +

    Próximo: Começando

    +
    + + + +
    + +
    + + + + + + + + + +
    + + + + + + + + +
    + + + +
    + +
    + + + + +
    + + + + +
    + + + + + + + + + + + + + + + + diff --git a/public/pt/index.xml b/public/pt/index.xml new file mode 100644 index 0000000..6b3bd8e --- /dev/null +++ b/public/pt/index.xml @@ -0,0 +1,31 @@ + + + + hydra video synth + https://hydra.ojack.xyz/hydra-docs-v2/pt/ + Recent content on hydra video synth + Hugo -- gohugo.io + pt + + Começando + https://hydra.ojack.xyz/hydra-docs-v2/pt/docs/learning/getting-started/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/pt/docs/learning/getting-started/ + Começando # Este documento é uma introdução à criação de visuais ao vivo usando o Hydra. Abrange o básico da escrita de código no navegador para gerar e combinar fontes de vídeo em tempo real. Nenhuma experiência com programação ou vídeo é necessária! +Quem quiser apenas começar em 60 segundos, também pode visitar: +Getting started short version (inglês) Este tutorial é pensado para ser usado dentro do editor web hydra. + + + + Tópicos Adicionais + https://hydra.ojack.xyz/hydra-docs-v2/pt/docs/learning/additional-topics/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/pt/docs/learning/additional-topics/ + Tópicos Adicionais # live coding: avaliar linhas ou blocos de código separado # Pressione ctrl+enter para executar uma linha de código. Pressione shift+ctrl+enter para avaliar um bloco de código. Dica: podemos alternar entre diferentes linhas de código para uma performance de live coding. +osc().out() // executar esta primeira noise().mult(osc(10,0.1,10)).out() // experimente este arrays # Arrays (listas) em Hydra são uma coleção sequenciada de valores. Podem ser usadas para alterar vários parâmetros no tempo. + + + + diff --git a/public/pt/sitemap.xml b/public/pt/sitemap.xml new file mode 100644 index 0000000..57863b3 --- /dev/null +++ b/public/pt/sitemap.xml @@ -0,0 +1,109 @@ + + + + https://hydra.ojack.xyz/hydra-docs-v2/pt/docs/learning/getting-started/ + 2023-11-21T18:58:36+01:00 + + + + https://hydra.ojack.xyz/hydra-docs-v2/pt/ + 2023-11-21T18:58:36+01:00 + + + + + https://hydra.ojack.xyz/hydra-docs-v2/pt/docs/learning/ + 2023-11-21T18:58:36+01:00 + + + + + https://hydra.ojack.xyz/hydra-docs-v2/pt/categories/ + + + + + https://hydra.ojack.xyz/hydra-docs-v2/pt/docs/ + 2023-11-21T18:58:36+01:00 + + + + + https://hydra.ojack.xyz/hydra-docs-v2/pt/tags/ + + + + + https://hydra.ojack.xyz/hydra-docs-v2/pt/docs/learning/additional-topics/ + 2023-11-21T18:58:36+01:00 + + diff --git a/public/pt/tags/index.html b/public/pt/tags/index.html new file mode 100644 index 0000000..5001698 --- /dev/null +++ b/public/pt/tags/index.html @@ -0,0 +1,375 @@ + + + + + + + + + + + +Tags | hydra video synth + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + +
    +
    + +
    + + + Tags + + +
    + + + + + + +
    + + + + + + + + + +
    + +
    + + + + + +
    + + + + + + + + +
    + + + + + + +
    + + + + +
    + + + + + + + + + + + + + + + + diff --git a/public/pt/tags/index.xml b/public/pt/tags/index.xml new file mode 100644 index 0000000..70e48fc --- /dev/null +++ b/public/pt/tags/index.xml @@ -0,0 +1,10 @@ + + + + Tags on hydra video synth + https://hydra.ojack.xyz/hydra-docs-v2/pt/tags/ + Recent content in Tags on hydra video synth + Hugo -- gohugo.io + pt + + diff --git a/public/pt/tags/page/1/index.html b/public/pt/tags/page/1/index.html new file mode 100644 index 0000000..2225fba --- /dev/null +++ b/public/pt/tags/page/1/index.html @@ -0,0 +1,10 @@ + + + + https://hydra.ojack.xyz/hydra-docs-v2/pt/tags/ + + + + + + diff --git a/public/sitemap.xml b/public/sitemap.xml index 909bbb3..f0dc155 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -4,14 +4,21 @@ https://hydra.ojack.xyz/hydra-docs-v2/en/sitemap.xml - 2023-04-14T16:44:48-06:00 + 2023-11-21T18:58:36+01:00 https://hydra.ojack.xyz/hydra-docs-v2/ja/sitemap.xml - 2023-04-06T13:57:36+02:00 + 2023-11-20T16:19:06+01:00 + + + + + https://hydra.ojack.xyz/hydra-docs-v2/pt/sitemap.xml + + 2023-11-21T18:58:36+01:00 diff --git a/public/tags/grants/index.html b/public/tags/grants/index.html new file mode 100644 index 0000000..c3c74ee --- /dev/null +++ b/public/tags/grants/index.html @@ -0,0 +1,909 @@ + + + + + + + + + + + +grants | hydra video synth + + + + + + + + + + + + + + + + + + + + + + + +
    + + +
    +
    + +
    + + + grants + + +
    + + + + + + +
    + + + + +
    +

    + hydra meetup #8 is today! +

    +
    + November 21, 2023 + + + by olivia + +
    + + + + +
    + + meetup, + grants +
    + + + + + + +

    Join us today at 15:00UTC for hydra meetup #8! There will be talks from hydra microgrant recipients Aida El-Oweidy, David Matunda, and Vagné L., as well as a chance for show and tell. +Signups at: https://hydra-meetup-8.glitch.me +

    +
    + + + + + + +
    + +
    + + + + + +
    + + + + + + + + +
    + + + + + + +
    + + + + +
    + + + + + + + + + + + + + + + + diff --git a/public/tags/grants/index.xml b/public/tags/grants/index.xml new file mode 100644 index 0000000..b1aa2c6 --- /dev/null +++ b/public/tags/grants/index.xml @@ -0,0 +1,21 @@ + + + + grants on hydra video synth + https://hydra.ojack.xyz/hydra-docs-v2/tags/grants/ + Recent content in grants on hydra video synth + Hugo -- gohugo.io + en + Tue, 21 Nov 2023 00:00:00 +0000 + + hydra meetup #8 is today! + https://hydra.ojack.xyz/hydra-docs-v2/posts/hydra-meetup-8/ + Tue, 21 Nov 2023 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/posts/hydra-meetup-8/ + Join us today at 15:00UTC for hydra meetup #8! There will be talks from hydra microgrant recipients Aida El-Oweidy, David Matunda, and Vagné L., as well as a chance for show and tell. +Signups at: https://hydra-meetup-8.glitch.me + + + + diff --git a/public/tags/grants/page/1/index.html b/public/tags/grants/page/1/index.html new file mode 100644 index 0000000..33e4ba7 --- /dev/null +++ b/public/tags/grants/page/1/index.html @@ -0,0 +1,10 @@ + + + + https://hydra.ojack.xyz/hydra-docs-v2/tags/grants/ + + + + + + diff --git a/public/tags/index.html b/public/tags/index.html index fd883e6..5bbde63 100644 --- a/public/tags/index.html +++ b/public/tags/index.html @@ -13,9 +13,10 @@ - + + - + + + + + + + + + + + + + + + + + +
    + + +
    +
    + +
    + + + meetup + + +
    + + + + + + +
    + + + + +
    +

    + hydra meetup #8 is today! +

    +
    + November 21, 2023 + + + by olivia + +
    + + + + +
    + + meetup, + grants +
    + + + + + + +

    Join us today at 15:00UTC for hydra meetup #8! There will be talks from hydra microgrant recipients Aida El-Oweidy, David Matunda, and Vagné L., as well as a chance for show and tell. +Signups at: https://hydra-meetup-8.glitch.me +

    +
    + + + + + + +
    + +
    + + + + + +
    + + + + + + + + +
    + + + + + + +
    + + + + +
    + + + + + + + + + + + + + + + + diff --git a/public/tags/meetup/index.xml b/public/tags/meetup/index.xml new file mode 100644 index 0000000..65fc82f --- /dev/null +++ b/public/tags/meetup/index.xml @@ -0,0 +1,21 @@ + + + + meetup on hydra video synth + https://hydra.ojack.xyz/hydra-docs-v2/tags/meetup/ + Recent content in meetup on hydra video synth + Hugo -- gohugo.io + en + Tue, 21 Nov 2023 00:00:00 +0000 + + hydra meetup #8 is today! + https://hydra.ojack.xyz/hydra-docs-v2/posts/hydra-meetup-8/ + Tue, 21 Nov 2023 00:00:00 +0000 + + https://hydra.ojack.xyz/hydra-docs-v2/posts/hydra-meetup-8/ + Join us today at 15:00UTC for hydra meetup #8! There will be talks from hydra microgrant recipients Aida El-Oweidy, David Matunda, and Vagné L., as well as a chance for show and tell. +Signups at: https://hydra-meetup-8.glitch.me + + + + diff --git a/public/tags/meetup/page/1/index.html b/public/tags/meetup/page/1/index.html new file mode 100644 index 0000000..586f5d4 --- /dev/null +++ b/public/tags/meetup/page/1/index.html @@ -0,0 +1,10 @@ + + + + https://hydra.ojack.xyz/hydra-docs-v2/tags/meetup/ + + + + + +