オシレータ
oscmodulate
すべての基本。正弦波の縞模様を別の縞で modulate（変調）すると、ただの縞がうねり出す。
Hydra でできること
アナログのビデオシンセサイザーに着想を得た、関数の連鎖（チェイン）で映像を組み立てる仕組みです。 サーバーも素材も要らず、ブラウザと GPU だけで完結します。
発生源を作る
osc / noise / voronoi / shape / gradient など、波・ノイズ・図形のソースを生成。
変形を重ねる
rotate / kaleid / modulate / pixelate などを . でつなぎ、座標と色を次々に変換。
合成する
blend / diff / add / mult / layer / mask で複数の映像を掛け合わせる。
外部入力で駆動
マイクの FFT や Webカメラ、マウス座標を関数 () => ... に渡して反応させる。
作例ギャラリー
すべて実際に今、あなたの端末の GPU で描画されています。気になった作例は「プレイグラウンドで開く」から、その場で書き換えられます。
万華鏡
kaleid対称
kaleid() で映像を放射状に折り返す。1行で対称模様が生まれる Hydra の真骨頂。
フィードバック
フィードバックsrc(o0)
出力 o0 を入力 src(o0) に戻し、自分自身を歪ませ続ける。無限に変化し続ける生命的な模様。
ボロノイ細胞
voronoimodulate
voronoi() の細胞構造を modulateScale で脈動させる。有機的なセル・アニメーション。
ノイズ流体
noisecontrast
パーリンノイズ同士を modulate でかき混ぜると、煙や液体のように流れ続ける。
ピクセル化
pixelateglitch
pixelate と modulatePixelate でブロック分解。デジタルなグリッチ表現も数行で。
幾何タイル
shaperepeat
shape() を repeat() で敷き詰め、回転とスクロールで動かす。整然としたモーショングラフィック。
トンネル
kaleidmodulateScale
kaleid を大きくし modulateScale で吸い込むと、奥へ続く無限トンネルに見える。
干渉縞
gradientdiff
gradient と osc を diff で差分合成し、modulateRotate でうねらせる。光の干渉のような揺らぎ。
マウスで動かす
mouse() =>
() => mouse.x のように関数を渡すと、カーソル位置で図形が変形する。プレイグラウンドで動かせる。
マルチ出力
o0-o3render()
o0〜o3 の4バッファに別々のスケッチを出力し、render() で4分割表示。映像合成環境としての一面。
カスタムGLSL
setFunctionGLSL
setFunction で独自の GLSL 変換 ripple() を定義。Hydra は組み込み関数だけでなく生シェーダまで拡張できる。
ライブコーディング
コードを書き換えると、500ミリ秒後に自動で映像へ反映されます。osc や rotate の数字を変えるだけでも、別世界の映像が生まれます。
待機中
音とカメラに反応する
Hydra は映像を作るだけでなく、外の世界を取り込めます。マイクとカメラの許可が必要です（映像は端末内で処理され、どこにも送信しません）。
マイク入力を FFT で解析し、周波数の強さでオシレータの周波数や万華鏡の枚数を駆動します。音楽を流すと映像が踊ります。
音に反応する
下のバーが各周波数帯（a.fft）の強さ。これが映像のパラメータを動かしています。
a.setBins(6) a.setSmooth(0.92) a.setScale(8) osc(() => 18 + a.fft[0] * 90, 0.08, 0.8) .kaleid(() => 3 + a.fft[2] * 6) .color(1.4, 0.4, 1.0) .rotate(0, 0.1) .modulateScale(osc(3), () => a.fft[1] * 0.7) .out()
Webカメラ映像をソース s0 として取り込み、万華鏡とフィードバックで加工します。鏡の中で自分が万華鏡になります。
カメラを取り込む
映像は端末内でのみ処理され、外部へ送信しません。
s0.initCam() src(s0) .kaleid(4) .modulate(osc(6, 0.1).rotate(0.4), 0.02) .color(1.2, 0.9, 1.4) .diff(src(o0).scale(1.01).rotate(0.01)) .out()