「振るパソコン」StickJam続編!さらに進化した“みのりブレード”ここに見参
最先端の科学技術研究と、ほんのちょこっとだけ個人的な推し活にいそしむ我等がchitoseArk研究所へようこそ!ということで今回のReportは前回noteで書いた「振るパソコン」ことStcikJam話の続編にてお届けします。
このとき作った「みのりブレード」がそれなりに好評なようでして、これはもうアーティスト本人への寄贈版を作るしかないかなと。
で、「実里」って出るだけだとやっぱし寂しいので、いろいろ考えましたよ16×8ドットという制約の中で!!
前回も言ったけど、ドット数これだかんね!?
そんな中で何ができるのどこまでやるの!?
まぁ寄ってらっしゃい見てらっしゃい。
LEDサイネージクリエイターの技術の粋をお見せしまSHOWっ!!
スイッチ1.「実里」Ver
<動画>
まぁこれは前回と一緒なので特に語ることはなし。
安定の2文字で最もスタンダードなタイプ。
スイッチ2.「ミノリン」Ver
<動画>
ホントは「みのりん」って描きたいところだけど、あのドット数でそれはムリムリのムリ。まぁカタカナでも気持ちが伝われば良しとします。
1文字が平均3ドット(横)という荒行です。
スイッチ3.「Smile」Ver
<動画>
そのドット数に5文字入れるとかお前アホやろと言われそうですが、どうしてもこれだけは入れたかったのです。
茅原実里公式ファンクラブ「M-Smile」は今年の6月30日をもって終了となりました。みのりんが大切にし、いつもファン向けメッセージに書いてくれた「Smile」の言葉。みのりんと私たちファンをつなぐ特別なキーワードだと思っています。
1「実里」、2「ミノリン」、3「Smile」。これらがStickJamのスライドスイッチに対応しています。電源入れる前にどれかを選び、電源を入れると数秒でコンテンツの組み込みが完了します。あとは振る!振る!Full!!
これを作るため、ここ数日間ほぼぶっ続けで睡眠1~2時間くらいでした。
仕事より気合い入れて仕事してましたわほんまに。
(などということが会社にバレたら何かと問題やな…)
プログラミング話① ドット着色の秘密
こっからはちょっとプログラミングなお話しね。こういうのはドット作れば終わりってものではないのですよ。それをどうやってIchigoJamの中に反映させるかが問題。そうでないと絵に描いた絵になっちゃうからね。
プログラムは当初、このStickJamの開発者であるPCN上田の斎藤史郎代表が作成したものをベースにしておりました。
ですがこれだと8×8ドットの2文字で運用することしか想定されておらず、色がその単位でしか定義できなかったのですね。
後述しますが当初はもっと無茶苦茶なドット構成を考えておりました(上下2段で文字が違うなど)。そうなると隣ドットくっつき問題が避けられないので、そこは色を変えることでしのぎたいところ。こちらもいろいろとプログラムをいじくり倒してみたのですが、所詮素人が浅漬けで…いや浅知恵で引っかき回しているだけなのでどうにも上手くいかず。ついては恥を忍んで斎藤先生に相談し、上下二段で色を分けられるプログラムを書いてもらったのでした。斎藤って名前の人にはいい人が多いですなぁ。
200 FOR I=0 TO 7
210 FOR J=0 TO 3
220 G=70:R=0:B=0
230 GSB @CS
240 NEXT
250 FOR J=4 TO 7
260 G=0:R=70:B=0
270 GSB @CS
280 NEXT
290 NEXT
300 FOR I=8 TO 15
310 FOR J=0 TO 3
320 G=0:R=0:B=70
330 GSB @CS
340 NEXT
350 FOR J=4 TO 7
360 G=25:R=25:B=25
370 GSB @CS
380 NEXT
390 NEXT
これはそのコードを一部抜粋。うわ何これめっちゃ分かりやすっ!ブログに載っていたものから超絶進化を遂げ、何と色指定がサブルーチン化されているじゃあーりませんか。ラクチン&分かりやすい!!斎藤先生超ありがとうございます!!
(以下プログラミングに興味ない方は次の動画まで読み飛ばしてください)
これを見るとどうやら変数Iが横軸の色指定を、変数Jが縦軸の色指定をしているみたいっすね…。
何で分かるかって?
こういうときはFOR~NEXTで何をさせようとしてるかに注目するんです。
200 FOR I=0 TO 7
210 FOR J=0 TO 3
FOR~NEXTってのはFORとNEXTの間を指定した回数繰り返せって命令なので、それがIは8回、Jは4回の指定になってるってことは、画面内の座標軸に関する指定に使われているだろうなってことは明白。
だから何で分かるかって?(二度目)
このプログラムの目的が「上下二段で色を分けること」だからですよ。
変数Iが8回繰り返せなのは「同じ色を8回塗らせるため」。変数Jが4回繰り返せなのは「同じ色を4回塗らせるため」。FOR~NEXTは繰り返すたびに変数の値が1ずつ加算されるので、これが座標の移動に使われています。そこまで考えれば「横8ドット×縦4ドット」分のエリアを同色に塗るためのプログラムだと想像することはそんなに難しいことではありません。
さらにこのプログラムでは同じような構造が4回繰り返されています。これは16×8ドットの画面を4つのエリアに分けているためであり、そこも合わせて見れば変数Iと変数Jに与えられた役割は明らかでしょう。
(うー、だいぶかみ砕いて説明しているつもりだけど、このあたりはプログラミングやったことない方だとピンと来ないのかも知れないなぁ。自分でもうまく伝え切れている自信がない…。でもこういうのがパッと分かるようになると人の作ったプログラムをいじれるようになり、既存の知識と相乗効果で理解が深まっていくものなんすよ)
まぁそんなこんなで、一応作るだけは作ってみたのでした。二段文字。
「ボツ」(Dr.マシリトの声で)
マジで何書いてあるのか分からんわー!つーかこれ分かる人いたら超能力者ですよ!!(斎藤先生には教えちゃいましたからね…まぁでももし分かる方いたら何か考えますのでご一報ください)
というわけでせっかく作っていただいたのですが、このプログラムはその形では使わなかったのでした(斎藤先生超ごめんなさい)。
でもプログラムの構造はこれでもう分かっちゃったから、これを利用しない手はない!あとは縦と横の構造を逆に作り変えてやれば「ミノリン」みたいなのは楽勝、楽勝!!まずはドット部分を描いてっと。
カラーはこんな感じにしました。最初は原色の赤とかも使ってたのですが、ちょっと色がキツくなるのでマゼンダに。
「ミ」はドットで見るのとバーサライタに入れて振って見るのとではだいぶ印象が変わり、見やすさ重視で調整した結果こうなりました。
色指定のコードはこんな感じにて。
200 FOR J=0 TO 7
210 FOR I=0 TO 3
220 G=0:R=70:B=70
230 GSB @CS
240 NEXT
250 FOR I=4 TO 7
260 G=70:R=70:B=0
270 GSB @CS
280 NEXT
290 NEXT
300 FOR J=0 TO 7
310 FOR I=8 TO 11
320 G=70:R=0:B=0
330 GSB @CS
340 NEXT
350 FOR I=12 TO 15
360 G=70:R=0:B=70
370 GSB @CS
380 NEXT
390 NEXT
もともとのプログラムと比べると、変数Iと変数Jの役割が入れ替わっているのが分かるかと思います。何て姑息な改造!!(笑)
んでできたのがこれね。
<動画>
まぁここまでは楽勝でした。
が、次の「Smile」で、私は大きな壁にブチ当たることになるのです…。
プログラミング話② 容量の壁を突破せよ!!
「Smile」はこんなドットでいくことに決めました。
まぁ何をどうやっても絶対1か所は隣のドットとくっつくわけで、こうしか作りようがなかったのも事実。配色上の工夫としては、トップのSとmをくっつけ、発光素子同士がケンカしないように「B」と「G」の原色を隣り合わせにすることでハレーションを回避しています。それに「Smile」だからカラフルな方が良いしね。5色揃ってゴレ…あれ赤がいないやん(笑)。
(以下プログラミングに興味ない方は次の動画まで読み飛ばしてください)
ともあれ、あらためてソースコードに向き合いましょう。さっきの「ミノリン」と違い5色だけど、同じ構造にぶっ込んで動けばラッキーってことで。文字ごとに必要なドット数が変わるからそこ注意やね。
200 FOR J=0 TO 7
210 FOR I=0 TO 2
220 G=0:R=0:B=70
230 GSB @CS
240 NEXT
250 FOR I=3 TO 7
260 G=70:R=0:B=0
270 GSB @CS
280 NEXT
290 NEXT
300 FOR J=0 TO 7
310 FOR I=8 TO 10
320 G=70:R=70:B=0
330 GSB @CS
340 NEXT
350 FOR I=11 TO 12
360 G=0:R=70:B=70
370 GSB @CS
380 NEXT
382 FOR I=13 TO 15
384 G=70:R=0:B=70
386 GSB@CS
388 NEXT
390 NEXT
上のコードの382~388になってるのが増えた1文字分の処理。
これで動くのかな?かな?(いまひぐらし卒見たところ)
ドキドキしながら入力していくと…。
ピッ
ぎゃあああああああああァあーーー!!!!!
きたよ惨劇!!
プログラム界の悪夢「Out of memory」!!
そうなのです。これ斎藤先生からプログラムいただいたときに聞いていたのですよ。「現状のプログラムで1024バイトぎりぎりです」って。それ聞いたときには「Kがひとつ抜けとるんとちゃいますかー」とか思っていたのですが、どうやらほんまにそうらしい。
「壁があるからおもしろい」って、ちょっとぉ福野会長ー!!
「目指すはMSX?ハァ?MSXだって、容量8,000バイトくらいあったじゃねーかよコノヤロー!!」
って…思わず魔邪になっちゃう私。
(福野会長すみませんお笑いネタなんで笑って見逃してクダサイ…)
ちょっと話が逸れましたね。要は「Out of memory」って言うのは「容量が足らんからどっか削って。でないと保存できないよっ!」って言われてるんです。最近のコンピュータではあまりないはずですが、昔のブログラマーは容量と戦う職業だったと太古の石板に刻まれております。
ということで、ゴチャゴチャゆうても始まらんから削るッ!!
200 FOR J=0 TO 7
210 FOR I=0 TO 2
220 G=0:R=0:B=70
230 GSB @CS
240 NEXT
250 FOR I=3 TO 7
260 G=70:R=0:B=0
270 GSB @CS
280 NEXT
310 FOR I=8 TO 10
320 G=70:R=70:B=0
330 GSB @CS
340 NEXT
350 FOR I=11 TO 12
360 G=0:R=70:B=70
370 GSB @CS
380 NEXT
382 FOR I=13 TO 15
384 G=70:R=0:B=70
386 GSB@CS
388 NEXT
390 NEXT
これでどや!!
変数Jに対するFOR~NEXTなんてひとつでええやろ、そしたら、
290 NEXT
300 FOR J=0 TO 7
この2行まとめて消せんねんで?めっちゃすごない?いやむしろ神ちゃう?
あとついでに10行目のこういうのも削るッ!!(せっかく書いてくれたのにごめんなさい斎藤先生)
10 '*Ueda
ちゅうことで容量限界プログラム、たらふく喰らえやIchigoJam!!
ピッ
んぎゃあああああぁぁぁぁぁ@ァァァァァッ!!(死亡)
嘘だッ!!そんなことあるわけない!!もうこのプログラム削れるところは極限まで削った!!これ以上削れるとこなんてない。
ここまでがんばったのに、もはやこれまでか。
みのりん、このSmileを貴方にも見せたかったよ…。
嫌だ。
嫌だ。
絶対にあきらめない。
何かまだ打つ手がある。
こういときは、先人の作ったプログラムを参考にする!!
藁をもすがる勢いで、過去の電子工作マガジンを片っ端から引っ張り出して読み始めた私。何が私をここまでさせるのだろう(答え:みのりん)。
そうして読んでいくうちに、ふと思ったのですよ。
あれ?「FORI=0TO10」とか「IFN=0GOTO230」とか、ずいぶんデリカシーのないコードの書き方やなと。前からベーマガコーナーに投稿する人に思ってたのですが、雑誌に投稿するリストにしちゃえらくみんな書き方が乱暴に過ぎるように思えます。上の例だったら私なら「FOR I=0 TO 10」とか「IF N=0 GOTO 230」みたいに単語ごとにスペース空けて書きますよ。まぁこだわりっちゃ何ですが、人に見せるわけですからそれなりにはねぇ。
でも待てよ?
その空白だって1バイトだよな?
チリも積もればって言うけれど…。
190 A=#900
200 FORJ=0TO7
210 FORI=0TO2
220 G=0:R=0:B=70
230 GSB@CS
240 NEXT
250 FORI=3TO7
260 G=70:R=0:B=0
270 GSB@CS
280 NEXT
310 FORI=8TO10
320 G=70:R=70:B=00
330 GSB@CS
340 NEXT
350 FORI=11TO12
360 G=0:R=70:B=70
370 GSB@CS
380 NEXT
382 FORI=13TO15
384 G=70:R=0:B=70
386 GSB@CS
388 NEXT
390 NEXT
400 @LOOP
やってみました。
上記は全体の一部ですが、全文の空白すべてを埋めた見た目にもやっつけな美しくないコード。
でもこれで保存が出来るのであれば…!頼むよ!!
(涙…が出そうになるのをこらえる)
保存出来たよ!!
つか、むしろ容量1000切ってるし!!
カンタンに思いついたように書いてますが、正直これに丸一日悩みました。人がどれほど努力しようが、容量だけは絶対に突破できないのだと。越えられない壁がこの世にはあるのだと。
それでも何とかできないか、何か方法はないかと昼も夜も明け方も、考えて考えて考えて…最後の最後に放った一手が、電子工作マガジンのプログラムを参考にした「スペースを全部抜く」だったのです。
そんなこんなで(本当に「そんなこんな」です!!)、ついに完成させた「Smile」がこちらです。
<動画>
あれ、おかしいな…?
私、泣いてるよ…?
「Smile」って書いてあるのに、私、泣いてるよ…?
何日目の徹夜かも定かではありませんでしたが、時計を見ればAM5:35。
普段ならもうじき会社に行く時間に、それは完成したのです。
(その日はたまたま有給をとっていたので、このあとすぐnoteやYouTube用のロケに取り掛かったのでした)
夢が広がるよ!!StickJam
気付いたら6,000文字を突破してしまいました。IchgoJamだったらとっくにOut of memoryですよね。でももう少しだけお付き合いお願いします(もう誰も読んでいない)。
たまたま私が自分の趣味に走った結果「みのりブレード」作ったけど、これいろんな「なんとかブレード」作れるんじゃないかって思ったのですよ。
ドットの制約が16×8って決まってるから何でもってわけにはいかないけど、パッと思いつくだけでも「奈々ブレード」「ゆかりブレード」…(家族からさっそく「智昭ブレード早よ」と言われてたり)。
声優から離れても、例えばジャニーズ「紫耀ブレード」はちょっとしんどいかな?乃木坂だったら「麻衣ブレード」とか…挙げたらキリないね。
野球やサッカーなどスポーツ選手だっていいじゃない。
誰だって自分の推しの名前が出る「○○ブレード」あったら嬉しいよ!!
そう考えたら、StickJam、私が当初思ってた以上に夢の広がるアイテムなんじゃないかなと思いました。あらためてこれを開発したPCN上田の斎藤史郎先生にリスペクトを捧げる次第です。
ということで今回の冒険はここまで。
出来上がった聖剣は、私たちの王様に献上します。