理想のまちの姿とは？
コネクトフリー、クリスとの脱ハンコ登壇の縁で、遠路はるばる京都大学と筑波から、社会学、心理学、哲学、情報工学、さまざまな専門家御一行、御来鯖。
鯖江市副市長、中村さんとも熱い議論。なにはともあれデータは大事。なければ測ろう、IoT！
ちょうど「Hana道場」では、こども達がプログラミングの修行中。
鯖江生まれのパソコン、IchigoJamでコンピューターの芯を楽しく学ぶのをはじめのいっぽに、越前がにロボコン、PCNこどもプロコン、CyberSakura、3Dプリンター/レーザーカッター、電子工作、AI/VRなど、こどもたちの興味のままに没頭できる環境を準備。
SDGsという人類の危機、EBPMによるまちの課題解決、オープンデータ x シビックテックへも関心寄せるこどもたちの登場も近いはず！
鯖江市の全小学生が自分で作ってみるゲーム「かわくだり」はアプリ開発の基本。その証拠を兼ねてVR版を作ってみました。
<!DOCTYPE html><html><head>
<title>かわくだりVR</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script type="module">
import { rnd } from "https://js.sabae.cc/rnd.js";
onload = async () => {
const boxes = [];
for (let i = 0; i < 100; i++) {
const b = box(rnd(32) * 1 - 16, 0, -20 - i * 5, 1, 1, 1);
boxes.push(b);
}
const f = () => {
const pos = camera.getAttribute("position");
pos.z -= .5;
for (let i = 0; i < boxes.length; i++) {
const p = boxes[i].getAttribute("position");
if (p.distanceTo(pos) < .6) {
scene.setAttribute("background", "color: red");
return;
}
}
if (pos.x < -16) {
pos.x += 32;
}
if (pos.x > 16) {
pos.x -= 32;
}
if (pos.z < -520) {
scene.setAttribute("background", "color: white");
text.setAttribute("visible", true);
return;
}
camera.setAttribute("position", pos);
requestAnimationFrame(f);
};
f();
};
const box = (x, y, z, w, h, d, col = "#fff") => {
const box = document.createElement("a-box");
document.querySelector("a-scene").appendChild(box);
box.setAttribute("position", { x: x - w / 2, y: y + h / 2, z: z + d / 2 });
box.setAttribute("width", w);
box.setAttribute("height", h);
box.setAttribute("depth", d);
box.setAttribute("color", col);
return box;
};
</script>
</head><body>
<a-scene id=scene background="color: black">
<a-camera id=camera position="0 .5 0">
<a-text id=text visible="false" value="CLEAR!"
position="0 0 -2" align="center" color="black"></a-text>
</a-camera>
</a-scene>
</body></html>
IchigoJam BASICでつくった経験がある人なら、部分的に読めますね。
「Webプログラミング道場」にコピペしながら、どんどん改造したり、壊したりしてみましょう！
おかしくなってもコピペで元に戻るので安心です。
ゼロコストで失敗できる最高の学習環境、それがプログラミング。
一歩一歩強くしていく、鯖江モデル！
Fri Night
