Zenn
Closed4

Cavalry 練習とメモ

#
animation
#
cavalry
#
motion
hrgwtrhrgwtr

線のなみなみを作る

STEP1

Scene Windowの Quick Addから Basic Line を追加する

Attribute Editorで Basic Lineの設定をする。今回は長さを横幅いっぱいに伸ばす

Deformers から Noise を追加する。
Noiseは名前の通りノイズを使えるようになります。今回はこのNoiseを使って線をうねうねさせます。そのままだと、X軸が動くだけなので、User Normalsにチェックを入れます。ホバーすると英語での説明が出て 「法線に沿って形状を変形します（Google翻訳）」 と出ます。 Basic Line のDivisionsが影響を受けます。ですので、うねうねの数をコントロールしたい時は、この値を変更します。
今回変更したNoiseの各値は、Minimum/MaximumとTime Scale、Loopです。最小/最大はそのままの意味で、得られる値の最小/最大です。TimeScaleはNoiseにTime （タイムラインの経過時間） を渡しているので、それのスケールです。これを変更するとうねうねのスピードを変更できます。
Loopは指定したLoop Lengthで、Noiseの値が１ループするようになります。ですので、Frame数と同じにしておくと、ループムービーが作れます。

次にもう一度 Deformers から Subdivide を追加します。Noiseは線の各頂点に対して影響するので、そのままだと直線的になってしまいます。なのでこのDeformerで滑らかにしています。
（別の方法もありそうな気がします）

STEP.2

デフォルトだとViewportの右上に有る、_Create a Duplicator_で Duplicator をタイムラインに追加します。
DuplicatorのAttributeからDistributionを Grid（グリッド） から Liner（直線） へ変更し、Countを適当な数にします。そうするとラインが縦に並びます。縦の並びの幅は、Sizeで指定する事が出来ます。

STEP.3

Quick Add からColor Arrayを追加します。
Color Arrayは名前の通り色情報の配列です。Color ArrayのAttributeから+Addをクリックして、色を追加します。タイムラインに配置された、Color Arrayの右にある丸ポチからドラッグして、_Basic LineのStrokeのStroke Color`へドラッグします。そうするとラインにColor Arrayで指定した色が、それぞれの線に着色されます。

以上で完成です。

粗いですが、webmで書き出したもの：

https://webm.red/MrRd

hrgwtrhrgwtr

使ってみての印象と

  • CavalryはAdobe系の様なクリエティブツールというより、ノードエディタに近い感覚でモーションを作ることが出来るツールです。
  • 画面の位置、見た目をマウスで調整する、というよりオブジェクトのプロパティを調整するイメージ
  • なので、クリエティブコーディングのGUIバージョンが一番近い印象です。
  • 項目が多いので最初何からすれば良いか少し戸惑う
    • なれるととても使いやすい
  • Lottieにも書き出せるので、実務にも使えそう

基本的なメモ

  • 無料でも全機能が使えるそうです
    • サブスクリプション方式（クリエティブツールとしては高くない気がする）
  • プロパティにBehaviorを追加するには、タイムラインに配置して繋げたり、Attributeのラベルを右クリックなどで繋げる事が出来る
  • まだ日本語の情報は少なめ。Cavalryと検索するとまだまだ騎兵隊が出てくる。
    • Youtubeが今の所一番わかり易い
hrgwtrhrgwtr

プログラムっぽく理解する

  • グリッドに配置したブロックの色を、時間軸で変更する

STEP.1

  1. Rectangle Toolでブロックを配置する。
  2. Duplicatorで複製する。DistributionはGridにして、CountとSizeで敷き詰める。

まだわかっていない点として、1000pxに10x10でブロックを配置したのですが、Countはx/yを10にし、Sizeを1000にしたのですが、そうするとCompositionからはみ出てしまいました。900にするとぴったり嵌りました。CavalryはCompositionもそうなのですが、原点（x:0/y:0）が中心になるようです。ですので、1000にすると端のブロックの中心が1000の位置に来てしまうので、半分だけはみ出したようになるのだと思います。

STEP.2

  1. Color Arrayを追加して、適当に色を設定する
  2. Color Arrayを最初に配置したRectangleのFill Colorに繋ぎます

STEP.3

  1. Mathを追加する
  2. FirstにDuplicatorのIndex Contextを繋ぐ
  3. SecondにFrameを繋ぐ（右クリックでAdd Behaviourから追加など）
  4. Operation をAddにする

足し算をしています。
ブロックの位置を示すIndex Contextに現在のFrameを足しています。

STEP.4

  1. Mathを追加する
  2. FirstにSTEP.3のResultを繋ぎます
  3. ResultをColor Arrayのindexに繋ぎます

微調整
そのままだと、Frame Rateの設定でカラーが切り替わります。
Frame Rate自体を変更しても良いですが、FrameのAttribute/Valueを変更しても調整出来ます。

まとめ
これでブロックがColor Arrayの順番に切り替わるモーションが出来ました。
RectangleのIndexを使うことでそれぞれのブロックで初期値が変えられるので、カラフルな画面になります。
Mathを使うあたりは、JSなどでプログラムをしている感覚に近かったです。

https://webm.red/vOLo

このスクラップは2021/10/05にクローズされました