JUNE 2024

担当範囲
Motion Graphic / Creative Coding / Illustration

制作期間
コーディング：1週間
イラスト：10日

使用したテックスタック
P5.js / Photoshop / toxiclibs.js

概要

複数のイラストで構成されたおもちゃを制作し、それぞれにアニメーションのためのシーケンスフレームを用意しました。フレームをループ再生することで、おもちゃに動きを与えています。さらに、各おもちゃのイラストには、toxiclibs.jsライブラリによってシミュレーションされた弾性メッシュにより制御され、画面内を物理的に動き回ります。これにより、アニメーションと物理的な動きが融合した二重の動的表現を実現しています。シーケンスフレームの作成時にはパース（遠近感）も意識しており、さらにイラストの重なり順によって2D空間内に奥行きを表現し、2D表現の中での3D的な空間構成もテーマの一つとなっています。

背景
本作は、toxiclibs.jsライブラリの研究を行っていた期間中に制作した作品のひとつです。私はもともとProcessingでtoxiclibsライブラリに触れ、弾性シミュレーションを活用してさまざまなビジュアル作品を制作してきました。その後、p5.jsを扱うようになり、Kyle Phillips氏によってJavaScriptに移植されたtoxiclibs.jsを知りました。JavaScript版はProcessing版とは構造にいくつか違いがあったため、約1ヶ月かけてtoxiclibs.jsを詳しく調査・検証しました。本作はその研究過程の中で生まれたものです。