202-p5.jsでモーション周期表を作ってみる
p5.jsでモーション周期表を作ってみる
武蔵野美術大学の赤嶺一希氏が2015年の卒業制作で制作した「モーション周期表 / Motion Periodic Table」という作品がある．これは基本的にAfter Effectsを使ったものだが，これをベースにして，色々なアニメーションをp5.jsを使って実装してみようと思う
https://gyazo.com/102a884ca06acd532ee362acefe167be
モーション周期表
このモーション周期表では元素のように01~18の族にカテゴリを分けている
https://gyazo.com/bd01e5c11811a60412ee85b37e175ee5
01族：オフセット、回転系
p5.js / Orbit / 軌道回転
p5.js / Offset / オフセット
p5.js / Vegas / ベガス
p5.js / Loop / ループ
p5.js / Tiler / タイラー
p5.js / Polar Coordinates / 極座標
02族：変形系
p5.js / LineWeight / 線幅
p5.js / Shape Transform / 図形変形
p5.js / Repeat Transform / 連続図形変形
p5.js / Shadow / 影
p5.js / Reshape / リシェープ
03族：時間操作系
p5.js / Easing / イージング
p5.js / Rhythm / リズム
p5.js / StepTime / 階段変化
p5.js / TimeDisplace / 時間置き換え
04-08族：特殊
p5.js / Tip Shape / 先端図形
p5.js / AudioWave / オーディオウェーブ
p5.js / Wave / 波
p5.js / Link / リンク
p5.js / Particle / パーティクル
p5.js / Grid / グリッド
p5.js / MaskWipe / マスクワイプ
p5.js / Shatter / シャター
p5.js / Card Dance / カードダンス
p5.js / SpinFade / スピンフェード
p5.js / Slide / スライド
p5.js / Find Edge / 輪郭検出
p5.js / Scribble / 落書き
p5.js / Blind / ブラインド
p5.js / LineSweep / 線をなぞる
09族：スクリプト系
p5.js / Text / テキスト
p5.js / Random / ランダム
p5.js / Sin / 三角関数
10族：ワープ系
p5.js / Bend / ベンド
p5.js / Wave Warp / 波形ワープ
p5.js / Twirl / ねじれ
11族：拡散系
p5.js / Scatter / 拡散
p5.js / Median / ミディアン
p5.js / Mosaic / モザイク
12-13族：ブラー、光系
p5.js / Opacity / 透明度
p5.js / Flare / フレア
p5.js / Cross Blur / クロスブラ―
p5.js / Blur / ブラー
p5.js / Depth of Field / 被写界深度
p5.js / MotionBlur / モーションブラー
p5.js / Glow / グロー
p5.js / Zoom Blur / ズームブラー
14族：移動系
p5.js / Move / 移動
p5.js / Symmetric Move / 対称移動
p5.js / RepeatMove / 連続移動
p5.js / WiggleMove / ウィグル移動
p5.js / Delay / 遅延
15族：回転系
p5.js / Rotate / 回転
p5.js / Symmetric Rotate / 対称回転
p5.js / RepeatRotate / 連続回転
p5.js / WiggleRotate / ウィグル回転
p5.js / Z-axisRotate / Z軸回転
16族：拡縮系
p5.js / Scale / 拡縮
p5.js / Symmetric Scale / 対称拡縮
p5.js / RepeatScale / 連続拡縮
p5.js / WiggleScale / ウィグル拡縮
p5.js / Dot / ドット
17族：トリミング系
p5.js / Trim Line / 線のトリミング
p5.js / Trim Circle / 図形のトリミング
p5.js / RepeatTrim / 連続伸縮
p5.js / Trim Pie / 円のトリミング
p5.js / FlowingLine / フローイングライン
18族：フラクタル系
p5.js / Fractal Noise / フラクタルノイズ
p5.js / Rough Edge / ラフエッジ
p5.js / Turbulent Displace / 乱流変位
p5.js / Noise / ノイズ
p5.js / WigglePath / 揺らぎのパス
p5.js / Thunder / 稲妻
似たようなものを作っている
https://gyazo.com/428df4e810833880cb7508552c5f0a13
Easing
Offset & Delay
Parenting
Transformation
Value change
Masking
Overlay
Cloning
Obscuration
Parallax
Dimensionality
Dolly & Zoom
分割
一体化
増減
残像
循環
視差
追従