福野泰介の一日一創 - create every day

神の視点が楽しいマイクラ入門、神様プログラミングの8x9クラフトに次ぐ第三段。 小学生がつくりたいもの上位の「マイクラつくりたい」に最新VR「Oculus Quest」で応えてみました。


白のブロックを自由に置けます。アンドゥーと全消しに対応して、JavaScript+HTMLで全プログラムでたった50行!


boxcraft for Oculus Quest - A-Frame
Oculus Questのブラウザーで、boxcraft.html を開き、右下のVRモードを選択するだけ!


トリガーでボックス設置。まちがったら中指ボタン。全消しはBボタン。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>boxcraft for Oculus Quest - A-Frame</title> <script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script> </head> <body> <script>'use strict' window.onload = function() { const scene = document.querySelector('a-scene') const list = [] handright.addEventListener('triggerdown', function(evt) { const p = handright.getAttribute('position') const snap = 0.1 let p2 = { x: Math.floor(p.x / snap) * snap + snap / 2, y: Math.floor(p.y / snap) * snap + snap / 2, z: Math.floor(p.z / snap) * snap + snap / 2, } let box = document.createElement('a-box') box.setAttribute('position', p2) box.setAttribute('mixin', 'voxel') scene.appendChild(box) list.push(box) }) handright.addEventListener('gripdown', function(evt) { const b = list.pop() if (b) scene.removeChild(b) }) handright.addEventListener('bbuttondown', function(evt) { const boxes = scene.querySelectorAll('a-box') for (let i = 0; i < boxes.length; i++) scene.removeChild(boxes[i]) }) } </script> <a-scene> <a-assets> <a-mixin id="voxel" geometry="primitive: box; height: 0.1; width: 0.1; depth: 0.1" material="shader: standard"> </a-mixin> </a-assets> <a-entity id=handleft oculus-touch-controls="hand: left"></a-entity> <a-entity id=handright oculus-touch-controls="hand: right" laser-controls raycaster="showLine: true; far: .05" line="color: white; opacity: 0.75;"></a-entity> </a-scene> </body> </html>

VRフレームワーク「A-Frame」を使って、コントローラーのtriggerdownイベントを受け取り、a-boxを格子上に座標変換して設置するプログラムがコンパクトに組めます。


あるき回りながら、いろいろ見渡しながら、3次元空間に重力に縛られず、自在に作って遊べます!
次はカラーパレット?マイクラではできない箱の大きさ変更?派手な爆発エフェクト?
プログラミングで思いのままです!

links
- Oculus Quest | Oculus (64GB 49,800円、購入は公式サイトがオススメ)
- 「Oculus Quest」でVR体験が“爆上げ” 約5万円で最高級を楽しめる新時代に突入 その魅力に迫った (1/4) - ITmedia NEWS
- モバイル時代こそバス! つつじバスロケVRビジュアライズ - リアルタイムオープンデータ x Oculus Quest
- VRではじめる現代HTML入門 - Oculus Quest x 福井高専生

IchigoJam開発者としては、示しておきたい、フラクタル(自己相似)の実現!
フラクタルに触れたきっかけ、ドラゴン曲線の一種、レヴィドラゴンの召喚に成功。

複雑とシンプルが入り混じった不思議な雰囲気がフラクタルの魅力。
簡単な手順(アルゴリズム)を、繰り返し(再帰的に)使うことで実現できます。

レヴィドラゴンNを描くアルゴリズム
右向いてレヴィドラゴンN-1を描く、左向いてレヴィドラゴンN-1を描く
(ただし、レヴィドラゴン1は決まった長さの線分)

このアルゴリズムをIchigoJam BASICのプログラムにすると、こんな感じ。

10 CLS:X=23:Y=18:D=0 20 [S]=7:S=S+1:GSB@FRAC 30 END 100 @FRAC 110 IF [S-1]=1 GSB@FWD:GSB@FWD:S=S-1:RTN 120 D=(D+1)%4 130 [S]=[S-1]-1:S=S+1:GSB@FRAC 140 D=(D+3)%4 150 [S]=[S-1]-1:S=S+1:GSB@FRAC 160 S=S-1:RTN 200 @FWD 210 X=X+(D=1)-(D=3):Y=Y+(D=2)-(D=0) 220 LCX,Y:?CHR$(236); 230 RTN

コンピューターサイエンスには欠かせない、データ構造の一種、スタックを使った再帰について詳しくはこちら。
ハノイの塔で遊んで分かる再帰的アルゴリズム(最大公約数、階乗、フィボナッチ)


子供に大人気のマイクラをハックする8x9Craft」を使った、もう一つの建築方法、world.setBlockを使ったレヴィドラゴンを描くJavaScriptのプログラムがこちら。

crab.setCreative(true); var item = Items.BlockofGold; var x = 0; var y = 2; var z = 0; var d = 0; var forward = function() { x += (d == 1 ? 1 : 0) - (d == 3 ? 1 : 0); z += (d == 0 ? 1 : 0) - (d == 2 ? 1 : 0); world.setBlock(item, x, y, z); }; var turnRight = function() { d = (d + 1) % 4; }; var turnLeft = function() { d = (d + 3) % 4; } var frac = function(n) { if (n == 1) { forward(); forward(); } else { turnRight(); frac(n - 1); turnLeft(); frac(n - 1); } }; frac(8);

プログラミングの基本は、コンピューターとのおはなし。
やってほしいこと(アルゴリズム)を、プログラミング言語という言葉で伝えます。
いろんな方言はありますが、ひとつしっかり覚えれば、その応用でどんどん話せる言葉が広がります。

自動建築ロボットは、マイクラの世界だけでなく現実社会にもロボットとして出現する時代。
コンピューターがない時代からすると、チートや魔法にしか見えない、プログラミングの世界。
ワクワクするものからどんどんモノにしていきましょう!


大人も楽しい、プログラミング、興味持った方、9/22に禅の里、永平寺町「四季の森会館」にてイベント!
Amil's Website: 2018年9月22日:禅xシリコンバレーxIchigoJam体験プログラミングワークショップ(初心者向け)
講師は、永平寺エボリューション大使「あみる」と私。
今回は子供にも高専生にも人気なIchigoJamのプログラム、プログラミングの真髄に、手軽に触れてみましょう!

links
- はじめての統計プログラミング with IchigoJam / 神々の里、高千穂エディション神よけゲームで遊び学ぶ統計動画レポート
- 防ごう子供のキーボード離れ!1行短縮かわくだりゲームの入門スライド - 総務省統計局でプログラミング体験!
- ハノイの塔で遊んで分かる再帰的アルゴリズム(最大公約数、階乗、フィボナッチ)
- マシン語で150倍速!フルカラーLED「APA102C」がお土産のゲーム機を作ろう福井高専公開講座
- 地図アプリでふりかえる、センサーとまちあるき!まちをよくするアイデアとIchigoJamプログラミングつぎのいっぽ
- Amil's Website: Beginner's Zen Programming Workshop @Eiheiji
- Amil's Website: Zen Programming - Private Class

マイクラはじめのいっぽ」の次はプログラミングでハック!
無限にブロックが使えるレゴ的な遊びを楽しんだら、より楽するために、コマンドを覚えていく流れ。
そして、夢の自動化。


神戸発のマイクラMOD「8x9Craft ハッククラフト」を使うとロボットに建築させることができちゃいます。
建築ロボットしても活躍する「はっくん」を「はっくんの貝殻」アイテムで召喚したら、コマンドで動かそう!

/crab forward

IchigoJam BASICと同じように行番号で記憶させて、runで実行!

/js 10 crab.up(); /js 20 crab.up(); /js 30 crab.forward(); /js 40 crab.forward(); /js run

http://localhost:8080/codeEditor」にブラウザで開くとJavaScriptのコードが書ける。

プログラムといえば、ジュラシックパーク小説版ではまったフラクタル!

crab.setCreative(true); crab.up(); crab.up(); var frac = function(n) { if (n == 2) { crab.forward(); crab.placeDown(100); crab.forward(); crab.placeDown(100); return; } frac(n - 1); crab.turnRight(); frac(n - 1); crab.turnLeft(); } frac(8);

crab.setCreativeでブロック無限モードにして、再帰呼び出しを使ってフラクタル図形を描かせよう!


はっくんがポチポチとブロックを置いていく様子を眺められます。
並行して、はっくんは何個もおけるので、待っている間にも別の場所でプラグラミングして、実行!


こちらの画面は、いろんな数とブロックで呼び出し、はっくんに書いてもらったフラクタル!

var BLOCK = 230; crab.setCreative(true); crab.up(); crab.up(); var frac = function(n) { if (n == 2) { crab.placeDown(BLOCK); crab.forward(); crab.placeDown(BLOCK); crab.forward(); return; } crab.turnLeft(); frac(n - 1); crab.turnRight(); frac(n - 1); crab.turnRight(); frac(n - 1); crab.turnLeft(); frac(n - 1); } frac(6);

オススメのBlockID
100(赤きのこ)、35(白)、41(黄)、222(水色)、230(青)
* Block_IDs - Java Edition data values – Official Minecraft Wiki


いろんなフラクタル図形に挑戦してみよう!
上下移動を組み合わせた、3Dフラクタル建築もおもしろいですよっ

links
- PCN神戸
- キッズプログラミングスクール8×9(ハック) | 現役エンジニアが教えます
- 8x9Craft ハッククラフト

コミュニケーションとは、伝わること。
伝えたい相手のバックグラウンドを知っておくのはとても大事。
小学生から高専生、若者まで幅広く人気なマイクラこと、マインクラフト。
その奥深さを高専インターン生から教わったので、おすすめのマイクラJava版に早速挑戦!


ドラクエビルダーズ」以来のめがね会館建築!ちょっと低い!?
コマンドブロックで天候変化と、時間リセット機能付き!
ワールドデータはこちら「meganekaikan-r1-mc.zip


ビルダーズより遠くに設置、破壊ができるので楽。クリエイティブモードが最初から使えるので楽。
素直にマイクラJava版から始めるべきでした。

夜になっても、クリエイティブモードなら、コマンド一発で明るくなる!

/time set day

コマンドブロックに関連付けて、ボタンをコマンドブロックにShift押しながら設置で貼り付け、押すと実行してくれる。

天候変化は、晴れ:clear 雨:rain 雷:thunder の3種類。

/weather thunder


ゲームで英語とタイピングに親しめますね。
小学生低学年でもマイクラやっていると自然タイピングできるようになっているという話に納得!
アルファベット小文字も覚えざるを得ませんね。

敵がじゃまなら、killコマンド一発

/kill @e[type=!player]

記号「!」は、IchigoJam BASICはじめプログラミングで使う否定の記号、プレイヤー以外という意味。
type指定をしないと自分も死んじゃうw

/kill @e

敵がでないように設定することも!

/gamerule doMobSpawing false


スペースキー2度押しで浮遊モード、上空からのめがね会館。

ちょっとした神の気分になれるクリエティブモード、これは楽しいわけだ!
次は、もっとディープな神になれるmodづくりプログラミングを調査します。

子供は創ることが大好き。
特にお絵かきは、かくものと紙さえあれば、安価でお手軽。
ずっとお絵かきして遊んでいられます。

鯖江中学校にて講演した際、マイクラにハマる子供がたくさんいることに驚き、 試しに自分でやってみるもハマれずにいたところ、ドラゴンクエストビルダーズで再現した「めがね会館」との衝撃の出会い。

これはやってみるしかない!と思い立ち、ようやく完成した、マイめがね会館がこちら!


「めがね会館 on ドラクエビルダーズ」
1つ目のステージをクリアするとアンロックされる、フリービルドモードで作成できる素材、カラーブロックがあると3次元ドット絵が建設できます。 ずいぶん小さい!?手抜き!?いいんです、ものづくりのいいところは、自分が良いといえば良いところ。

めがね会館をつくって、わかったこと
1. つくるのは楽しい!
2. 丁寧なチュートリアルで作り方をガイドするのは大事!
3. その世界の住人としての感覚を持てば持つほど楽しくなる
4. 足場がないとブロックを置けないなど、制約もまた工夫したくなる心をくすぐって良し
5. ただやっぱり、本気で創るなら、より制約のゆるい3Dモデリングツールや、プログラミングがしたくなる

おえかきや、プレステの名作「パネキット」にも通じる、つくる楽しさは不滅でした。 マイクラやドラクエビルダーズは、21世紀のおえかき、デザイナー・3Dプリンター・ドローン・ロボット・プログラミングなど、いろんなより楽しいものづくりへの入り口です!

制限して道をとざすのではなく、より広い世界へと導きましょう!


(追記、本物のめがね会館

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY 福野泰介 - Taisuke Fukuno / @taisukef / アイコン画像 / プロフィール画像