福野泰介の一日一創

東京都の企画でこども電子工作＆プログラミングIchigoJamイベント！
（参考、江戸川区｜とうきょうこどもクリエイティブラボ、「IchigoJam」でオルゴールをつくる！　江戸川区 子ども未来館）

会場は、江戸川区の子ども未来館。はんだづけ、プログラミング、電子工作まで、たっぷり楽しんでくれました！

「オルゴール風作曲プログラム on IchigoJam web」
今回のワークショップのテーマ、オルゴールに触発されて作ってみました、オルゴール風作曲プログラム！カーソル上下で動かし、スペースキーで音を配置し、エンターキーでループ再生します。何かキーを押したら作曲モードに戻ります。

プログラムは1画面に収まる手頃な長さ。

10 S=">C'>D'>E'>F'>G'>A'>B'C''D''E''F''G''A''B''<C'<D'<E'<F'<G'<A'<B'" 20 CLS:FORI=0TO41:?"････････････････";:NEXT 25 FORI=0TO31:IF[I]LCI,[I]-1:?CHR$(238);:NEXT ELSE NEXT 30 LCX,Y,1:K=INKEY() 35 X=X-(K=28)*(X>0)+(K=29)*(X<31):Y=Y-(K=30)*(Y>0)+(K=31)*(Y<20) 36 IF K=32 IF SCR()=238 ?"･";:[X]=0 ELSE ?CHR$(238);:LCX,[X]-1:?"･";:[X]=Y+1:PLAY S+(20-Y)*3:TEMPO1000 37 IF K=10 GSB50 40 GOTO30 50 X=0 51 IF[X]LCX,[X]-1:PLAYS+(20-[X]+1)*3 52 X=(X+1)&31:IF INKEY() RTN 60 WAIT20:GOTO51

文字列Sを3文字単位で21コに区切って、音の高さに合わせてPLAY文で鳴らしています。配列の0から31を使って高さを記憶。一度止めても配列に合わせて復元する機能付き（25行）
まるでハンダ！ツマグロヒョウモンのさなぎ！

日本での発見例がたった3例という超激レア、ワタゲクラゲの動体展示！
（参考、超激レアの「ワタゲクラゲ」が江戸川放水路にいた！　直径15ミリ、児童施設職員が網ですくって発見：東京新聞 TOKYO Web）

発泡スチロールと結束バンドと手頃な材料でとってもリアル、手作り昆虫お面！

なんと、ダンボールで組み立て＆持ち運び自在の手作りプラネタリウム！

惑星の位置関係が分かる、地球暦も飾ってありました！
（参考、太陽系時空間地図 地球暦 HELIO COMPASS）

宇宙、生物、工作、法学、プログラミングも！
東京都江戸川区、なんともステキな環境です！

こどもの頃の思い出。お買い物について行く楽しみ、ゲームコーナーのメダルゲーム。メダルを入れて「ジャンケン」「ポン」「フィーバー」としゃべるゲームが好きでした。

今回は雰囲気から入ろうとドット絵で、ぐー、ちょき、ぱーを作成。

10 POKE#700,0,0,0,124,170,129,66,60 20 POKE#708,108,84,84,84,130,129,66,60 30 POKE#710,60,34,225,161,129,129,66,60 40 ?CHR$(224),CHR$(225),CHR$(226)

表示してみました。なかなかかわいくできました。8x8のドット絵、下3行、129,66,60は全部共通です。

まずはシンプルにジャンケンゲームにします。作成したパターンに続けます。

40 INPUT"JANKEN(0-2)?",Y 50 C=RND(3) 60 ?"PON! YOU:";CHR$(224+Y),"COM:";CHR$(224+C) 70 IF Y=C INPUT"AIKODE(0-2)?",Y:GOTO50 80 IF (Y-C+3)%3=2 ?"WON!" ELSE ?"LOST..."

0、1、2でジャンケンの手を決めて勝負！

続いて、所持コインを10枚から初めて、買ったら倍になるゲームに改造してみます。

35 M=10 36 ?:?"COIN:";M 37 INPUT"BET?",N:IF N=0 OR N>M CONT ELSE M=M-N 80 IF (Y-C+3)%3=2 ?"WON!":M=M+N*2 ELSE ?"LOST..." 90 IF M=0 ?"GAMEOVER":END ELSE GOTO 36

変数Mが所持コイン数。80行の勝ったとき処理がポイントです！

懐かしい！音声合成ボードを加えて、しゃべるような改造も良いですね！

更に続いて、買ったら、フィーバーモードになって、0倍から3倍にランダムになるゲームに改造！

80 IF (Y-C+3)%3=2 ?"WON!":GSB100 ELSE ?"LOST..." 100 ?"FEVER! ...";:WAIT30 110 R=RND(4):?R 120 ?N*R;" COIN GET!":M=M+N*R 130 RTN

ややこしい処理を追加するときには、GOSOB(ゴーサブ、短縮形GSB)/RETURN(リターン、短縮形RTN)が便利です。

今回はプログラムでズルをしていません。どうすると楽しくなるか、いろいろ試行錯誤してみるのも楽しいですよ！

じゃんけんゲーム、全プログラム

10 POKE#700,0,0,0,124,170,129,66,60 20 POKE#708,108,84,84,84,130,129,66,60 30 POKE#710,60,34,225,161,129,129,66,60 35 M=10 36 ?:?"COIN:";M 37 INPUT"BET?",N:IF N=0 OR N>M CONT ELSE M=M-N 40 INPUT"JANKEN(0-2)?",Y 50 C=RND(3) 60 ?"PON! YOU:";CHR$(224+Y),"COM:";CHR$(224+C) 70 IF Y=C INPUT"AIKODE(0-2)?",Y:GOTO50 80 IF (Y-C+3)%3=2 ?"WON!":GSB100 ELSE ?"LOST..." 90 IF M=0 ?"GAMEOVER":END ELSE GOTO 36 100 ?"FEVER! ...";:WAIT30 110 R=RND(4):?R 120 ?N*R;" COIN GET!":M=M+N*R 130 RTN

手作りでは難しい物体も3Dプリンターなら、データを作って待っているだけ！

「TorusKnot STL export」
Three.jsで生成できる幾何学オブジェクト「TorusKnotGeometry」がお気に入り。pとqが6と4を選びました。XRかんたんライブラリ、egxr.jsのサンプルを活用。

Three.jsのメッシュをSTLに変換する、STLExporterを使ってみたところいい感じでした！

ただ、下記のようにimportmapを使う必要があるのは面倒なので・・・ <script type="importmap"> { "imports": { "three": "https://code4fukui.github.io/three.js/build/three.module.js", "three/addons/": "https://code4fukui.github.io/three.js/examples/jsm/" } } </script> STLExporter.jsを配置しなおし、mesh2stl.jsとしてまとめなおしました。

例として生成するmesh2stl.example.jsで、生成されたのがこちら、バイナリ版STLファイル、torusknot.stlです。

できあがったSTLファイル。Macのプレビューで見てみます。きれいですね！

積層型の3Dプリンターで印刷がしづらい物体は、サポート材と合わせてプリントします。こちらはノーマルタイプ。四角い形で支えます。

こちらはツリータイプのサポート材。おもしろい形！

印刷結果、楽しみですね！

恐竜キャラクターもかわいい、気に入りのJavaScriptの実行環境、Deno、初のメージャーバージョンアップ、2.0がリリースされました！

「Deno, the next-generation JavaScript runtime」
Denoロゴもリニューアル。右側の恐竜くんのようにもうちょい目が大きいとかわいくなるかも？（Announcing Deno 2、Deno 1.x to 2.x Migration Guide、Deno 2 正式版リリース！公式アナウンス内容を完全分解）

「code4fukui/wsutil: webserver for Deno」
Deno2.0で一番気になった変更点、マルチコアに対応する新コマンド「deno serve」に対応した新API対応ウェブサーバーを作りました。

import { fetchWeb } from "https://code4fukui.github.io/wsutil/fetchWeb.js"; export default fetchWeb(async (param, req, path, conninfo) => { return { response: "OK", path, param, remoteAddr: conninfo.remoteAddr }; });

この5行のコードを server.js として保存し、下記コマンドなどで実行すれば /api/〜 でレスポンスをオブジェクトで返せるAPIサーバーの出来上がりです！

deno serve -A --port 8080 server.js

HTMLや画像など、静的ファイルは static/ ディレクトリ内に置けばOKです。

ただ、今まで動いていたものが動かなくなりました。
「global is not defined」とは？
辿ってみると、Node.jsにのみあったグローバルオブジェクトprocessがDeno2.0で追加されたことで、ライブラリ内でNode.jsと判定されたためと判明。globalは、グローバルな変数を持つオブジェクトで、ブラウザでは主にwindowとなるもの。Node.jsで先行実装され、globalThisという名前で標準化され、DenoもglobalThisを採用していて、globalは未定義(not defined)です。code4fukui/SHA512など、いくつかを global → globalThis に変更して修正完了。（globalThis on Node.js、Issue: global on Deno）

ブログを辿ってみると初めてDenoに出会ったのは4年半前。ブラウザと同じ、ESモジュールがコンパイルなしの超高速で使えるのがお気に入りです！
（参考、NodeからDenoへ、福井県で活用オープンソースのPUSHかんたんオープンデータ、バックエンド移行）