論文風の解説: 音声コマンドに基づくカラフルなパーティクルシステムの実装
概要
本研究では、音声コマンドをトリガーとして、視覚的に魅力的なカラフルなパーティクルシステムを生成するウェブアプリケーションの設計および実装について述べる。音声認識技術とCSSアニメーションを用いて、音声コマンド「hello」に応答して、画面中央からランダムな方向に向かって噴出するパーティクルを表示するシステムを構築した。
- 音声認識の設定
音声認識には、Web Speech APIを用いて、ブラウザ上で音声コマンドをリアルタイムで認識する。音声認識の初期設定において、以下のパラメータが設定されている：
recognition.lang : 'en-US'（英語の音声コマンドを認識）
recognition.interimResults : false（最終的な認識結果のみを取得）
recognition.continuous : true（音声認識を継続的に行う）
2. パーティクル生成のプロセス
パーティクル生成は、以下の手順で実施される：
中央位置の特定: 画面サイズは、particleContainer.clientWidth および particleContainer.clientHeight を用いて取得し、画面中央の座標を計算する：
2π の範囲でランダムに生成され、distance は50pxから250pxの範囲でランダムに設定される。
アニメーションの設定: パーティクルの移動は、CSSの transform プロパティを用いて、2秒間のアニメーションを設定する。パーティクルの透明度は、opacity プロパティによってアニメーションさせ、時間経過とともに0に近づける。
カラフルなパーティクル: 各パーティクルには、ランダムな色が設定される。この色は、getRandomColor 関数によって生成される16進カラーコードを用いて決定される。この関数は、ランダムなカラーコードを生成する：
ここで、randomHexDigit は0から15までのランダムな整数であり、カラーコードの各桁に対してランダムに設定される。
結論
本実装では、音声コマンドを用いてリアルタイムに視覚的なエフェクトを生成するシステムを構築した。音声認識とカラフルなパーティクルアニメーションの組み合わせにより、インタラクティブで視覚的に魅力的なユーザー体験を提供することができた。今後の研究では、音声認識の精度向上や、より複雑なパーティクルシステムの設計についても検討する予定である。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音声コマンドでカラフルなパーティクルを表示</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
}
#particle-container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.particle {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="particle-container"></div>
<script>
// カラフルな色を生成する関数
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// パーティクルを作成して表示
function createParticles() {
const particleContainer = document.getElementById('particle-container');
const containerWidth = particleContainer.clientWidth;
const containerHeight = particleContainer.clientHeight;
// 中央の座標
const centerX = containerWidth / 2;
const centerY = containerHeight / 2;
for (let i = 0; i < 50; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = centerX + 'px';
particle.style.top = centerY + 'px';
particle.style.backgroundColor = getRandomColor(); // ランダムな色を設定
particle.style.opacity = Math.random();
// パーティクルをコンテナに追加
particleContainer.appendChild(particle);
// ランダムな方向と距離で移動させる
const angle = Math.random() * 2 * Math.PI;
const distance = Math.random() * 200 + 50; // 50pxから250pxの距離
setTimeout(() => {
particle.style.transition = 'transform 2s, opacity 2s';
particle.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`;
particle.style.opacity = 0;
}, 10);
// アニメーション終了後にパーティクルを削除
setTimeout(() => {
particleContainer.removeChild(particle);
}, 2000);
}
}
// 音声認識の設定
function setupSpeechRecognition() {
// Web Speech APIの音声認識を使用
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'en-US'; // 英語を認識
recognition.interimResults = false; // 最終結果のみ取得
recognition.continuous = true; // 継続的にリスン
recognition.onresult = (event) => {
const transcript = event.results[event.results.length - 1][0].transcript.trim();
console.log('認識結果:', transcript);
if (transcript.toLowerCase() === 'hello') {
createParticles();
}
};
recognition.onerror = (event) => {
console.error('音声認識エラー:', event.error);
};
recognition.start();
}
// 初期化
setupSpeechRecognition();
</script>
</body>
</html>