JavaScript でアナログ時計を作ってみました。
前回のデジタル時計の続きです。
▼ p5.js 版
まずは、p5.js バージョンです。
↓p5js_analog-clock.js
簡単にできると思いましたが、時間とか時計は奥が深そうですね。
▼ canvas 版
次は、Canvas バージョンです。
ちょっと冗長な気もするけど、確実にできそうな方法を選択しました。
↓canvas_analog-clock.js
classとか使ったら、もっと単純になりそうです。
TouchDesignerの醍醐味は音と図形を連動できることだと思ってます。 私がTouchDesignerに惹かれたのは、この部分です。 ということで、音と図形の連動をやってみました。 こんな動画をつくりました。 ▼ 動画作成手順 まず、TouchDesignerで動画を作成します。 以下の手順で作成します。 ▼ ムービー ・[Circle TOP]で円をつくる ・[Transform CHOP]をつなげる ▼ サウンド ・[Audio File In]で音を取り込む（デフォルトの音を選んでます） ・[Audio Filter CHOP]の[Filter]で[Band Pass]を選択 ・[Math CHOP]の[Combine Channels]の[Maxinum]を選択 ・[Math CHOP]の[Range]の[To Range]を 0 ～ 100 にする ・[Null CHOP]をつなげる ▼ サウンドをスケールに反映する ・サウンドの[Null CHOP]をムービーの[Transform TOP]の Scale へつなげる ▼ 大きさを調整する ・背景用に[Constant CHOP]をつくる ・[Over TOP]をつくる ・[Over TOP]に[Transform TOP]と[Constant CHOP]をつなげる ・[Over TOP]の[Fixed Layer]を[Constant CHOP]に合わせる（この場合は Input2） 完成です。 ▼ mp4書き出し手順 これを書き出します。 ・[File]メニューから[Export Movie]を選択 ・サウンドの[Null CHOP]を[CHOP Audio]へドラッグ・アンド・ドロップ ・ムービーの[Null TOP]を[TOP Video]へドラッグ・アンド・ドロップ ・[Codec]の[MPEG4]を選択 ・[Filename]で保存先を選択 ・Render Movieの[Start]をクリック こんな感じです↓ これでMpeg4のファイルができていると思います。