p5.jsとml5.jsで拓く、機械学習アートの新たな知覚：アルゴリズムの眼差しが創造する世界
p5.jsで描画することに慣れ、自在に形や色を操れるようになったとき、ふと、その先に広がる風景について考えることはないでしょうか。もし、このスケッチが自らの「眼」を持ち、私たちの世界を知覚し始めたら、どのようなアートが生まれるのだろうか、と。最新の機械学習技術を、どうすれば単なるインタラクションを超えた創造の対話へと昇華できるのか。本記事では、p5.jsと極めて親和性の高いライブラリ ml5.js を軸に、機械学習がもたらす「アルゴリズムによる知覚」の世界を探求し、その哲学的意味と、あなたの手でそれを実装するための第一歩を考察します。
はじめに：アルゴリズムの詩学と機械学習の出会い
コードが筆となり、ピクセルが絵の具となるクリエイティブコーディングの世界。私たちはこれまで、ルールと乱数を組み合わせ、予測不可能な美しさが立ち現れる瞬間、すなわち「創発」の神秘に魅了されてきました。それは、人間が設計したアルゴリズムという庭の中で、予期せぬ花が咲くのを待つような、静かな期待に満ちた営みでした。
しかし、機械学習の登場は、この庭の性質を根底から変えようとしています。もし、庭師であるアルゴリズム自身が、世界を見て、聞いて、学び、自ら庭の姿を変えていくとしたらどうでしょう。これは、単に新しいツールを手に入れること以上の意味を持ちます。それは、創造のプロセスにおける主体性の問い直しであり、人間とコードの関係性の再定義です。p5.jsが持つ「スケッチ」という、誰もが気軽に始められる表現の場に、機械学習という深淵な「知性」の種を蒔く。そのとき、私たちのキャンバスは、単なる描画領域から、世界を解釈し応答する、生きたインターフェースへと変貌を遂げるのです。
ml5.jsとは何か：コーディングアーティストのためのAIツールキット
この壮大なビジョンと、私たちの日常的なコーディングとを繋ぐ架け橋となるのが ml5.js です。公式サイト (ml5js.org) が掲げる「Friendly machine learning for the web」という言葉の通り、ml5.jsは、複雑怪奇に見える機械学習の世界への扉を、アーティストやデザイナー、教育者、そして私たちのような探求心旺盛なコーダーのために、広く開いてくれるライブラリです。
その心臓部には、Googleが開発するブラウザ向け機械学習ライブラリ TensorFlow.js がありますが、ml5.jsはその複雑な設定や数学的な背景知識を巧みに隠蔽（抽象化）してくれています。これにより、私たちはモデルの構造やテンソルの流れを意識することなく、まるでp5.jsの関数を呼び出すように、高度な機械学習モデルの恩恵を受けることができます。
例えば、画像に写っている物体を認識するモデルを使いたい場合、TensorFlow.js であればモデルの読み込み、入力データの整形、推論の実行、出力の解析といった一連の煩雑な手続きが必要です。しかしml5.jsを使えば、それは驚くほどシンプルになります。
// ml5.jsを使えば、わずか数行で画像分類器を準備できる
const classifier = ml5.imageClassifier('MobileNet', modelReady);
function modelReady() {
// モデルの準備ができたら、画像を分類する
classifier.classify(img, (err, results) => {
console.log(results);
});
}このコードの簡潔さは、ml5.jsの設計思想そのものを表しています。p5.jsの preload() や setup()、そしてイベントに応答するためのコールバック関数といったプログラミングスタイルに寄り添うように作られているため、既存のp5.jsスケッチに、機械学習という新たな「感覚器官」を後付けするように統合できるのです。
「知覚する」アルゴリズム：ml5.jsが創造する新たな表現の世界
では、ml5.jsという「感覚器官」は、私たちのスケッチにどのような新しい知覚をもたらすのでしょうか。それは、人間が世界を認識する方法をなぞるように、いくつかのカテゴリーに分けることができます。
視覚：カメラの向こう側を「理解」する
私たちの表現において最も根源的なメディアである「視覚」。ml5.jsは、ウェブカメラの映像や画像を、単なるピクセルの集合から意味のある情報へと変換します。
ImageClassifier: 画像に何が写っているかを「分類」します。カメラにリンゴを映せば「apple」というラベルを返し、その信頼度を数値で示します。この認識結果をトリガーに、画面の色彩を赤く変化させたり、リンゴの歴史に関するテキストを生成したりと、作品が現実世界のオブジェクトに意味的に応答するようになります。PoseNet/Handpose/FaceMesh: 人間の身体を「構造」として捉えます。カメラに映る人物の骨格、手の関節、顔のランドマークをリアルタイムで追跡し、その座標データを返します。これにより、身体の動きが直接的な描画の筆触となるダンスパフォーマンスや、表情に応じて変化するジェネラティブなポートレートなど、身体性とデジタル表現が深く結びついた作品が生まれます。ObjectDetector: 映像の中から特定の物体（人、車、犬など）を「検出」し、その位置を矩形で示します。街の風景を映し、検出された「人」の数に応じて音楽のテンポが変化したり、「車」にだけモザイク処理をかけたりと、映像の内容に基づいた動的な演出を可能にします。
聴覚と言語：音とテキストの「意味」を捉える
ml5.jsの知覚は、視覚に留まりません。
SoundClassifier: マイクから入力された音を分類します。鳥のさえずり、キーボードの打鍵音、話し声などを識別し、それぞれに異なる視覚的フィードバックを返すことができます。例えば、静寂を「無」の状態とし、聞こえてくる環境音に応じて世界が生成されていくような、サウンドスケープ作品を想像してみてください。Sentiment: テキストに含まれる「感情」を分析します。入力された文章がポジティブかネガティブかを判定し、その度合いを数値化します。ユーザーが打ち込む詩の内容によって、咲く花の色が暖色から寒色へと移り変わっていく。これは、言葉が持つ情緒的な力を、直接的にビジュアルへと翻訳する試みです。
これらの機能は、私たちのスケッチが、もはや閉じたアルゴリズムの世界で完結するのではなく、カメラやマイクを通じて現実世界へと開かれ、その文脈を「理解」し、対話する存在になる可能性を示唆しています。
人間と機械の共創：アルゴリズムの眼差しが問うアートの地平
機械学習をアートに導入することは、単に表現のツールセットを拡張すること以上の、より深い問いを私たちに投げかけます。アルゴリズムが獲得した「知覚」は、完璧なものではありません。そして、その「不完全さ」にこそ、新たな創造の萌芽が潜んでいるのかもしれません。
ImageClassifierが、風に流れる雲を「羊の群れ」と誤認識する瞬間。それは単なるエラーでしょうか。あるいは、私たち人間が忘れかけていた詩的な見立て、メタファーの再発見ではないでしょうか。機械の眼差しは、時に合理的で、時に非合理的な連想を呼び起こします。その偶然性や誤謬を受け入れ、作品の一部として編み込んでいくとき、アーティストはアルゴリズムの「共作者」となります。
また、PoseNetが私たちの身体を17のキーポイントの集合としてデータ化するとき、それは私たちの身体を冷徹に抽象化する行為です。しかし同時に、その抽象化された骨格データが描く線の軌跡は、マール・ポンティが論じたような「現象としての身体」とは異なる、もう一つの身体性を私たちに提示します。機械の眼差しを通じて、私たちは自らの身体を再発見するのです。
私たちが使う学習済みモデルは、その背景に膨大なデータセットを持っています。それは、ある意味で人類の視覚的経験の巨大なアーカイブとも言えます。そのフィルターを通して世界を知覚する作品を作ることは、集合的な記憶や無意識と対話するような行為です。このとき、作者のオリジナリティとは何か、そしてアートにおける「見る」という行為の本質は何かという、根源的な問いが浮かび上がってきます。
実践への扉：ml5.jsを始め、知覚を拡張するコードを書く
哲学的な思索は、具体的な実践へと繋がってこそ意味を持ちます。幸いなことに、ml5.jsをp5.jsのスケッチに導入するプロセスは、驚くほど直感的です。ここでは、ウェブカメラでリアルタイムに人の鼻の動きを追いかける、ごく簡単なPoseNetのスケッチを作成する手順を見てみましょう。
まず、index.htmlファイルを用意し、p5.jsとml5.jsのライブラリを読み込みます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>p5.js & ml5.js PoseNet</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>次に、sketch.jsにコードを記述します。
let video;
let poseNet;
let poses = [];
function setup() {
createCanvas(640, 480);
video = createCapture(VIDEO);
video.size(width, height);
// PoseNetモデルを初期化
poseNet = ml5.poseNet(video, modelReady);
// 新しいポーズが検出されるたびに 'poses' 配列を更新する
poseNet.on('pose', (results) => {
poses = results;
});
video.hide(); // p5.jsによって描画するため、元のHTML要素は隠す
}
function modelReady() {
console.log('Model Loaded!');
}
function draw() {
// 映像を反転させて表示（鏡のように）
translate(width, 0);
scale(-1, 1);
image(video, 0, 0, width, height);
// 検出されたすべてのポーズに対してループ処理
for (let i = 0; i < poses.length; i++) {
const pose = poses[i].pose;
if (pose.nose.confidence > 0.5) {
fill(255, 0, 0);
noStroke();
ellipse(pose.nose.x, pose.nose.y, 20, 20);
}
}
}このスケッチは、まずsetup()でカメラを起動し、ml5.poseNet()でモデルを準備します。モデルの準備が完了するとmodelReady関数が呼ばれます。そしてposeNet.on('pose', ...)の部分で、PoseNetが人のポーズを検出するたびに、その結果（骨格の各キーポイントの座標など）をposesという配列に格納するように設定します。
draw()ループの中では、poses配列にデータがあれば、その中から鼻 (nose) の座標を取得し、そこに赤い円を描画します。confidence（信頼度）が一定以上のときのみ描画することで、不確かな検出結果をフィルタリングしています。
たったこれだけのコードで、あなたのスケッチは人間の身体を「知覚」し、リアルタイムに反応する能力を手に入れました。ここから、鼻の軌跡で線を描かせたり、両手の距離に応じて音を鳴らしたりと、無限の表現へと繋げていくことができるのです。
終わりに：未来のキャンバスへ、問い続ける創造の旅
ml5.jsは、私たちクリエイティブコーダーに、機械学習という強力でありながらも哲学的深みを持つツールキットを与えてくれました。それは、単に効率的な制作や新しいインタラクションを実現するためだけのものではありません。むしろ、アルゴリズムという「他者」の眼差しを通じて、私たち自身の創造性、知覚、そして世界との関わり方そのものを問い直すための、思索の道具です。
機械が「見る」とはどういうことか。アルゴリズムが生み出す美しさに、作者の意図はどこまで介在するのか。人間と機械の共創が当たり前になる未来で、アートの価値はどこに見出されるのか。
これらの問いに、唯一の正解はありません。しかし、ml5.jsとp5.jsを使えば、私たちはその答えを、概念の海で漂流するのではなく、コードを書き、スケッチを動かし、具体的な作品として探求し続けることができます。この新しいキャンバスの上で、私たちは何を描き、何を問い、何を発見するのでしょうか。その旅は、今、始まったばかりです。
