【Cavalry 学習8】DNA螺旋アニメーション[1minute Wonders]
こちらから作ってみる。
● Creating a DNA Helix animation in Cavalry.
作りたいなと思ったものからやってみる。
カバー画像の右下に「Oscillator(発振器)」「Duplication(複製)」「Context(文脈)」とあるので、これらが学べる内容なのだろうか。
（発振器ってなに・・・？っていう心のつぶやきｗ）
さっそくはじめます。
オプションキーを押しながらクリックして、シーンに楕円を追加する。半径を50に変更する。
オプションキーを押しながらエンターキーを押して、両方の値を設定する。
Optionキーを押しながら値を変えると両方の値が同時に変化した。
位置(Position)に移動し、右クリックでビヘイビアを追加し、Xにオシレーターを設定する。値を-200から200に変更する。
Oscillatorの説明が何も無いｗｗ
ということで公式ドキュメント「三角波のパターンを使って図形を変形させ、影響を与える。」とある。https://docs.cavalry.scenegroup.co/nodes/behaviours/oscillator/
オシレーター（Oscillator）とは、そもそも音の元になる波形を作り出す発振器のこと。
波形を与える機能ってことで理解。。。
とりあえず触ってみた感じX位置の値を最小値-200/最大値200に設定したということだろう。
その後、楕円形状のスケールに移動して、ビヘイビアを追加する。XとYにオシレーターを設定し、このオシレーターのタイプをコサインに変更して、サインの反対にする。
最小値を0.5、最大値を1に設定する。
今度はOscillatorを楕円のサイズに適用。
Typeはサイン・コサイン・タンジェントの3つの選択肢があり、それぞれ波形が変わる
（数学が苦手すぎてこの単語を見るとアレルギーが・・・）
ちなみにこの状態で再生するとこんな感じ。
▼Typeを「Sine」にするとこんな感じで、くるくる回らずに言ったり来たりする動き
▼Typeを「Tangent」にすると痛そうな動きｗ
楕円をグループ化し、これをデュプリケーターに追加する。
デュプリケーターはその名の通り複製する機能なので、わかりやすい。
丸が9個になった。
分布をポイントに変更し、
DistrubutionをGridからPointにすると重なり合う感じになるのでデュプリケートする前の状態に戻ったように見えるが実際は丸が2つ重なっている、
カウントを2に設定する。右クリックして「シェイプのタイムオフセット」を選択し、値の配列を追加する。この配列に2番目の値を追加し、それを25に設定する。
ここで画面と同じにならなくなる。うーーーん。
▼チュートリアル
▼私の画面
と思ったけど、実際は時間軸があるんだと思って、タイムラインを動画と同じ42フレーム付近に動かしたら同じになったｗ
ちなみに値の配列〜シェイプのタイムオフセットの流れは何をしているの意味不明です。
これでコマンドキーとピリオドキーを押して「ポイント トゥ パス」を検索することができる。
ポイント トゥ パスを追加し、ポイントソースをサブメッシュに変更してデュプリケーターを追加する。これらのオブジェクトをすべてグループ化して、デュプリケーターに追加する。
Points to Pathはポイントからパスを生成するレイヤー。
ポイントソースのサブメッシュという概念は調べたけどよく分からず。
分布をリニアに変更し、方向を垂直に変更する。カウントを10に設定し、重ならないように間隔を広げる。「Shape Time Offset」を右クリックして「ビヘイビアを追加」を選択し、スタッガーを追加する。これを増やしてヘリックスが見えるようにする。
謎単語メモ
Shape Time Offset
Staggar
以上で完成だ。
この時点ではこんな感じ。
冗談だ。約束通り1分以内に何かを提供したいと思ったが、ここで終わらずにカラーリングをするつもりだ。
ここに作成したパレットがあり、説明欄からダウンロードできる。
この動画の概要欄から拡張子が[.pal]というファイルをダウンロードできる。
それをSwatchesの右上のメニュー→importでよみこむことができた。
パレットを選択してバーガーメニューから「パレットから配列を作成」を選ぶことで、配列を作成することができる。
この配列をポイント トゥ パスのストロークカラーに直接接続することができる。また、楕円形状の塗りの色にも接続することができる。ただし、そうすると、オブジェクトの一部が前後に交差しているという錯覚が線だけでなくオブジェクト自体の色のために壊れてしまう。
これを避けるために、各バーが同じ色になるように変更する。この色の配列に、2番目のデュプリケーターのインデックスを入力することで実現できる。元のインデックスをバイパスし、トップレベルのデュプリケーターに基づいた新しいカラーインデックスのみを割り当てるようにする。
この説明は正直何も意味がわからないｗ
これを行うには、インデックスコンテキストをこのカラー配列のインデックスに接続するだけだ。これで完成だ。
何か役立つものを得てもらえたら嬉しい。また次回会おう。
同じようにやったらとりあえず形だけはできた！！
Discussion