ChatGPTの1周年とP5.js+Mediapipeを使用した手の指認識
ChatGPTの1周年について
2022年の11月30日にChatGPTがリリースされて1年が経過しました。この1年であらゆる環境にAIが活躍するようになり、世界が大きく変わった1年だったように思います。勿論このものすごいスピードでの変化は今も続いていますが、個人的にもChatGPTをはじめとするAIツールはいくつも試していますが、やはり1番利用しているのはChatGPTです。月3000円の有料課金は正直高いですが（2000円なら言う事なし！）、毎日使えば3000円以上の価値は十分にあると思います。逆に言うと月3000円を高いと思って使っていない人の方が断然多い訳で、そんな人たちと差を作るのなら今しかないとも思っています。様々な分野で活躍しますし、GPT-4はめちゃくちゃ賢いですから。絶対契約して毎日使うと人生が変わる気がしています。
P5.jsとMediapipeでの手の指認識について
今回はP5.jsとMediapipeで手の指認識をした話をさせてください。ChatGPTを使えば理解がメチャクチャ早くなる事例を含めての話です。
P5.js+Mediapipeを使いたかった訳
画像認識や手の認識には以前から興味があり、今回指の認識をしたいと思いました。高性能画像認識はGoogleが開発したMediapipe！これ本当にすごいですよね。P5.jsの前にRaspberry Pi 4で動かしていたのですが、処理が遅くて実用的ではありませんでした。そこで調べていくとGoogleのサンプル等をブラウザで試すとめちゃ軽い！JavaScriptの方がパフォーマンスが良いとわかったので、試してみる事に！
以下を参考にしました。
参考記事
P5.jsとindex.htmlとsketch.jsを記述する事で描画できるようになります。index.htmlの内容は、p5.jsとMediaPipe Hands APIを使用して、ブラウザでリアルタイムに手の追跡を行うウェブアプリケーションの基盤を構築するためのHTMLドキュメントです。主要な構成要素は以下の通りです：
- p5.jsライブラリの読み込み: クリエイティブコーディングに使われるJavaScriptライブラリで、描画やアニメーションのために利用されます。
- MediaPipeライブラリの読み込み: カメラ操作、UIコントロール、描画機能、そして手の追跡機能を提供するための複数のJavaScriptスクリプトが含まれています。
- スタイルシート: 外部のCSSファイルを参照し、ウェブページのスタイルを定義しています。
- ビデオ要素: カメラの映像を表示し、MediaPipeでの手の追跡に利用されるHTML要素です。
- JavaScriptスクリプト: p5.jsやMediaPipeを使った具体的な処理を記述するための外部スクリプトファイル（sketch.js）を読み込んでいます。
この構造により、ユーザーのブラウザ上でカメラを通じて手の動きを捉え、それをリアルタイムで画面上に描画するアプリケーションを実現しています。
sketch.jsによるMediaPipeの実装
const isFlipped = true;
let keypointsHand = [];
const videoElement = document.getElementsByClassName("input_video")[0];
videoElement.style.display = "none";
function onHandsResults(results) {
keypointsHand = results.multiHandLandmarks;
}
const hands = new Hands({
locateFile: (file) => {
return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;
},
});
hands.setOptions({
selfieMode: isFlipped,
maxNumHands: 1,
modelComplexity: 1,
minDetectionConfidence: 0.5,
minTrackingConfidence: 0.5,
});
hands.onResults(onHandsResults);
const camera = new Camera(videoElement, {
onFrame: async () => {
await hands.send({ image: videoElement });
},
width: 1280,
height: 720,
});
camera.start();
let videoImage;
function setup() {
const canvas = createCanvas(500, 400);
videoImage = createGraphics(320, 180);
}
function draw() {
clear();
background("rgba(100, 100, 255, 0.2)");
videoImage.drawingContext.drawImage(
videoElement,
0,
0,
videoImage.width,
videoImage.height
);
push();
if (isFlipped) {
translate(width, 0);
scale(-1, 1);
}
displayWidth = width;
displayHeight = (width * videoImage.height) / videoImage.width;
image(videoImage, 0, 0, displayWidth, displayHeight);
pop();
if (keypointsHand.length > 0) {
const indexTip = keypointsHand[0][8];
ellipse(indexTip.x * displayWidth, indexTip.y * displayHeight, 10);
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<video class="input_video"></video>
<canvas class="output_canvas" width="1280px" height="720px"></canvas>
</div>
</body>
</html>