Hydra 项目教程

Hydra 项目教程

hydra Livecoding networked visuals in the browser 项目地址: https://gitcode.com/gh_mirrors/hydra/hydra

1. 项目介绍

Hydra 是一个用于在浏览器中进行网络视觉实时编码的工具集。它受模拟模块化合成器的启发，探索使用网络流媒体在实时环境中路由视频源和输出的可能性。Hydra 使用多个帧缓冲区来动态混合、合成和协作连接的浏览器视觉流。通过链式函数，可以对每个输出应用坐标和颜色变换。

Hydra 目前仅支持 Chrome 或 Chromium 浏览器，并且需要在支持 WebGL 的机器上运行。项目处于实验阶段，欢迎开发者提交拉取请求以及在问题部分提供反馈、想法和错误报告。

2. 项目快速启动

2.1 安装与运行

1. 访问 Hydra 的在线版本：https://hydra.ojack.xyz。
2. 在浏览器中打开该链接，即可开始使用 Hydra。

2.2 基本操作

• CTRL-Enter: 运行一行代码。
• CTRL-Shift-Enter: 运行屏幕上的所有代码。
• ALT-Enter: 运行一个代码块。
• CTRL-Shift-H: 隐藏或显示代码。
• CTRL-Shift-F: 使用 Prettier 格式化代码。
• CTRL-Shift-S: 保存截图并下载为本地文件。
• CTRL-Shift-G: 分享到 Twitter（如果可用），分享到 @hydra_patterns。

2.3 示例代码

2.3.1 渲染一个振荡器

osc(20, 0, 1, 0, 8).out()

2.3.2 旋转振荡器

osc(20, 0, 1, 0, 8).rotate(0.8).out()

2.3.3 像素化输出

osc(20, 0, 1, 0, 8).rotate(0.8).pixelate(20, 30).out()

2.3.4 显示摄像头输出

s0.initCam() // 初始化摄像头
src(s0).out() // 渲染摄像头输出

3. 应用案例和最佳实践

3.1 实时视觉合成

Hydra 可以用于实时视觉合成，通过组合不同的视频源和效果，创建动态的视觉艺术作品。例如，可以将摄像头输入与振荡器生成的图案结合，创造出独特的视觉效果。

3.2 网络协作

Hydra 支持网络协作，多个用户可以通过互联网连接，共享和协作创作视觉内容。通过设置名称和使用 initStream 函数，用户可以将自己的视觉输出分享给其他 Hydra 实例。

3.3 与 p5.js 结合

Hydra 可以与 p5.js 结合使用，扩展其功能。通过将 p5.js 的画布作为 Hydra 的输入源，用户可以在 Hydra 中使用 p5.js 的绘图功能，进一步丰富视觉效果。

4. 典型生态项目

4.1 hydra-synth

hydra-synth 是 Hydra 的合成引擎，作为一个独立的 npm 模块发布。它提供了 Hydra 的核心功能，可以用于构建自定义的视觉合成工具。

4.2 atom-hydra

atom-hydra 是一个 Atom 编辑器插件，允许用户在 Atom 中使用 Hydra。它提供了代码高亮、自动补全等功能，方便用户在 Atom 中进行 Hydra 的开发和调试。

4.3 rtc-patch-bay

rtc-patch-bay 是 Hydra 的网络逻辑模块，作为一个独立的 npm 模块发布。它管理连接的窗口之间的视频流，并可以作为独立的模块使用，将任何网站转换为 Hydra 的输入源。

hydra Livecoding networked visuals in the browser 项目地址: https://gitcode.com/gh_mirrors/hydra/hydra