http://naotohieda.com/hydra-docs-v2/Recent content in hydra video synth portal on hydra video synthHugo -- gohugo.ioenhttp://naotohieda.com/hydra-docs-v2/docs/what-is-hydra/Mon, 01 Jan 0001 00:00:00 +0000http://naotohieda.com/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.http://naotohieda.com/hydra-docs-v2/docs/learning/getting-started-short/Mon, 01 Jan 0001 00:00:00 +0000http://naotohieda.com/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.http://naotohieda.com/hydra-docs-v2/docs/community/Mon, 01 Jan 0001 00:00:00 +0000http://naotohieda.com/hydra-docs-v2/docs/community/ community projects, libraries, and resources #http://naotohieda.com/hydra-docs-v2/docs/learning/video-synth-basics/Mon, 01 Jan 0001 00:00:00 +0000http://naotohieda.com/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).http://naotohieda.com/hydra-docs-v2/posts/hello-world/Wed, 05 Apr 2023 00:00:00 +0000http://naotohieda.com/hydra-docs-v2/posts/hello-world/WIP portal for hydra video synth. This will be a home for news and updates regarding hydra, as well as a hub for community resources and documentaiton. For the main hydra website, see the web editor. We welcome contributions!http://naotohieda.com/hydra-docs-v2/docs/learning/external-sources/Mon, 01 Jan 0001 00:00:00 +0000http://naotohieda.com/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.http://naotohieda.com/hydra-docs-v2/docs/learning/interactivity/Mon, 01 Jan 0001 00:00:00 +0000http://naotohieda.com/hydra-docs-v2/docs/learning/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.http://naotohieda.com/hydra-docs-v2/docs/learning/guides/textures/Mon, 01 Jan 0001 00:00:00 +0000http://naotohieda.com/hydra-docs-v2/docs/learning/guides/textures/Textures # by Naoto Hieda 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.http://naotohieda.com/hydra-docs-v2/docs/learning/web-editor/Tue, 04 Apr 2023 15:10:36 +0200http://naotohieda.com/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’s gallery and create a shorter URL clear all resets the environment and clears text from the editor show random sketch.