![](https://img.sabae.cc/data/203503/b6c4e734-e517-457f-874a-47a285256155.jpg)
プログラミングサタデー、鯖江の小学生、高校生、高専生、大人に聞いた、鯖江に欲しいものは?
![](https://img.sabae.cc/data/203503/7d402ea9-ecb8-4ab6-a600-be906f2ff202.jpg)
秘密基地、大きな動物、屋内プール、ディズニーランド、ユニバ、遊園地、キッザニア、VRパーク、ゲーセン、水族館、イオンモール、ラウンドワン。
確かにどれもできたら楽しそう!
せっかく作ってもみんな飽きてしまっては遺ってしまう、負の遺産。
そこでひとまず、ARやVRでシミュレーション!
描いた魚の絵が動き出す、水族館、そういえば福井高専の後輩が作ってた!
![](https://img.sabae.cc/data/203503/51800bcc-172d-4b8e-821e-2cbf7bc13c6c.jpg)
絵が好きな高専生が描いた魚の外形、小学生が塗り絵!かわいい!
![](https://img.sabae.cc/data/203503/85016384-0757-49b8-954e-6ca0649ee369.png)
まずはワイヤーフレームでユラユラさせる実験。
![](https://img.sabae.cc/data/203503/040c8448-f813-4540-8485-bc1ded68b9b2.png)
続いてテクスチャーを貼り付け、三角関数で動きを作ってできあがり!
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を作成し、なんでも聞ける環境を作るとよいかも。
![](https://img.sabae.cc/data/203503/d3751106-ccc2-4b7e-9156-26d92ed7bb66.jpg)
「AR Aquarium」 src on GitHub
こどもシビックテックの成果物。ぜひQuestでARで見てください!
![](https://img.sabae.cc/data/203503/7db4b52b-816a-4c74-8d7a-9f88cd35b27a.jpg)
「ar-aquarium / fishes.csv」
CSVデータを変更するだけで、オリジナルなお魚を動かすことができます!