福野泰介の一日一創

プログラミングサタデー、鯖江の小学生、高校生、高専生、大人に聞いた、鯖江に欲しいものは？

秘密基地、大きな動物、屋内プール、ディズニーランド、ユニバ、遊園地、キッザニア、VRパーク、ゲーセン、水族館、イオンモール、ラウンドワン。

確かにどれもできたら楽しそう！
せっかく作ってもみんな飽きてしまっては遺ってしまう、負の遺産。
そこでひとまず、ARやVRでシミュレーション！

描いた魚の絵が動き出す、水族館、そういえば福井高専の後輩が作ってた！

絵が好きな高専生が描いた魚の外形、小学生が塗り絵！かわいい！

まずはワイヤーフレームでユラユラさせる実験。

続いてテクスチャーを貼り付け、三角関数で動きを作ってできあがり！ mesh.animate = (t) => { // メッシュのジオメトリをリアルタイムで変更 const p = mesh.geometry.attributes.position; const a = p.array; for (let i = 0; i <= sw; i++) { const z = Math.cos(t / 100 + i * options.freq) * options.amp; a[2 + i * 3] = z; a[2 + i * 3 + (sw + 1) * 3] = z; } p.needsUpdate = true; // 場所設定 const th = mesh.th + t * options.speed; mesh.position.x = Math.cos(th) * mesh.r; mesh.position.z = Math.sin(th) * mesh.r; mesh.rotation.y = Math.atan2(mesh.position.x, mesh.position.z) - Math.PI; }; ChatGPTに聞いて作るのは便利ですが、検索と同様、古いバージョンと混ざってしまうのが難点。新しいライブラリを作って公式AIを作成し、なんでも聞ける環境を作るとよいかも。

「AR Aquarium」 src on GitHub
こどもシビックテックの成果物。ぜひQuestでARで見てください！

「ar-aquarium / fishes.csv」
CSVデータを変更するだけで、オリジナルなお魚を動かすことができます！