Spherizeを使って角丸の正方形に緩和曲線をつける

最近流行りつつあるClubhouse(オタクには関係なさそう)
アイコンがクロソイド曲線(Wikipedia)、緩和曲線っぽい角丸のアイコンだったの見てAeで簡単にそれっぽいの作れるかなぁと思い、お手軽な作り方を考えたのでメモ

単純な角丸ではなく独特な緩やかなカーブの正方形が特徴のClubhouseのアイコン この画像目の端っこにいるとき一瞬はっぴいえんどの風街ろまんのジャケットに見える
画像はApp storeから


正方形のシェイプを作成
今回Sizeは300px RoundnessはSizeの1/4で75pxに設定

Distort > Spherizeを適用
日本語版だと「球面」 球体状の歪みを作れる標準エフェクト

RadiusをパスのSizeの60%程度の数値に変更(今回は180)

できた 曲線の丸みはRoundnessで調整


Center of Sphereを動かすとぐにゃぐにゃ動く
ディズニーシーみてーなパラメータ アニメーションつけてみても面白そう

transformから座標を動かすと形が崩れるため、transform>positionに紐付けるか、toComp()でシェイプパスの座標に紐付けると変形しません

toComp()を使った座標の紐付け方の参考: [エクスプレッション]グローバル座標とレイヤー座標を同時に使うには?

その他RoundnessやRadiusはSizeをエクスプレッションで割ったり掛けたりして一括で制御できるようにすると後々楽です


クロソイド曲線を使ったデザインはちょっと古い情報ですがAppleも採用してるらしいです(この辺から調べていくと別分野の専門的な文献が出てきて怖くなった)
アイコンからわかるAppleのデザインが優れている理由 曲線に違い

元々クロソイド曲線は鉄道や高速道路、ジェットコースターなどの軌道に使われる線とのことでした
ちょっとしたひと手間加えてみるだけで柔らかい印象が出るので良いですね
丸よりも丸みを感じる!? スーパー楕円の魅力とデザイン | Spinners Inc.