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

49,800円という衝撃価格のモバイルVR「Oculus Quest」が好調

開発の楽しさを伝えるため、50行マイクラ風に続く第二弾、今回はVRらくがきアプリを48行で作成。
Tilt Brushは気持ち良いけど、起動に時間がかかるのがネック(あと、有料)。
今回作った、お絵かきツールは、超軽量なので起動も一瞬!(無料&オープンソース on GitHub

drawline-VR
フレームワーク、A-Frameを使っている。線をa-lineでだらだらと追加しているが、割りとすぐに重くなってしまうのは、どうにかできるのか!?フレームワークやWebVRの限界なのかも?


さらさらと描く様子を、本体へ録画して、USBケーブル転送。(転送は開発モードをOFFにしてAndroid File Transferを使用)

<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>drawline-VR for Oculus Quest</title> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> <script>'use strict' const list = [] let line = [] let bkp = null AFRAME.registerComponent('input-listen', { init: function() { this.el.addEventListener('triggerdown', function(evt) { bkp = handright.getAttribute('position').clone() list.push(line) }) this.el.addEventListener('triggerup', function(evt) { line = [] bkp = null }) const removeLine = function() { const line = list.pop() if (line) for (let i = 0; i < line.length; i++) document.querySelector('a-scene').removeChild(line[i]) return line } this.el.addEventListener('gripdown', function(evt) { removeLine() line = [] bkp = null }) this.el.addEventListener('bbuttondown', function(evt) { while (removeLine()); }) }, tick: function() { if (bkp) { const p = handright.getAttribute('position').clone() const aline = document.createElement('a-entity') aline.setAttribute('line', { start: bkp, end: p, color: "#FFF" }) document.querySelector('a-scene').appendChild(aline) line.push(aline) bkp = p } } }) </script></head><body><a-scene> <a-sky color="#546c4c"></a-sky> <a-entity id='handright' oculus-touch-controls='hand: right' input-listen></a-entity> </a-scene></body></html>a

ご自由に改造、活用ください!

福井県の昭和おもしろスポット2箇所紹介。

こちら福井県庁内1Fにある喫茶店。昭和な雰囲気。


なぜかダンベルが!?レトロなレジも必見です。


懐かしの2つの時計が掲げてあったお店を発見、世代が違うと全くわからないことがわかった。(on Twitter)

links
- 一日一創 VRカテゴリ
- 一日一創 VRアプリ一覧

プログラミングが熱い福井の夏! 永平寺と陽願寺で同時開催された、小中学生向けプログラミング合宿。
小中学生 プログラミング・フェス 2019 - 福井新聞
キッズサンガ2019《宿坊×プログラミング×お煎茶》in 陽願寺 - connpass

永平寺町の傘松閣を再現した、四季の森文化館にてプログラミング!いい天気!


集まった小中学生100人超に1人1台IchigoJam(スクールセット+マイIchigoDake)!
天井絵以上に圧巻!合宿のゴールは禅による精神修行と自動運転プログラミング技術の習得。


IchigoJamの基本を習得済みのこどもたちは一足先にロボ制御コースへ。


どんどん自分でプログラミング!


今回プレゼントされたストラップ付きのパソコン「IchigoDake」に自分のプログラムを書き込み、ロボに差し込み、自由自在!


はじめてプログラミングするこどもたち向け、2時間の基本コース。ロボづくりの基本と、ゲームづくりで学ぶプログラミングで試行錯誤する手法を伝授。


Day2ではいよいよ本番、自動運転「らでぃっしゅ」のプログラミングに挑戦!


越前市、武生駅近く、陽願寺にも元気なこどもたち!


たっぷり2時間プログラミングした後は、広いお寺の中でたからさがし!住職さんによるクイズ。


PCN武生オリジナルのIchigoJamクイズ!間違ったら、A-Zまでをタイピング修行!


明日もお楽しみに!


今回の写真は、こちら360度カメラ「RICOH THETA V」で撮影。
Oculus Questなど、VRで見るとリアルな感動が蘇る!?(PC、スマホ、スマホVRでも閲覧可能)
VR ProgFes 2019

links
- プログラミングフェス
- 夏、プログラミングフェスDay1! VRで実寸で思い出せる360度写真&アプリ
- Programming Fes Day 2 connected Silicon Valley and Eiheiji to encourage kids!

2018年のイタリアの橋崩落事故は、他人事ではありません。次々と寿命を迎える日本のインフラ、笹子トンネル天井板落下事故のような悲劇を防ぐ必要がありまが、近所のよく渡る橋、その実態はきちんと把握されているのでしょうか?
イタリアの橋崩落、死者少なくとも37人に 犠牲者には子どもも - BBCニュース
橋サイズ体験VR
鯖江市橋梁オープンデータとオープンストリートマップを使ったVR橋サイズ体験アプリ。Oculus Questで見ると実寸で実際に歩けてよりリアルに体験できます。


本日、福井高専にて「福井高専未来戦略アドバイザー就任式」
KDDI松野さん、エル・コミュニティ竹部さんと共に、委嘱状いただきました。
地域で活用AI/IoT! IT人材育成に向け、KDDIと包括的パートナーシップ構築発表とIchigoJam webバージョンアップ


未来戦略初会議!橋の耐久性などに重要なコンクリートは、福井高専校長の田村さんの専門分野!


実はこの写真、360度撮影したTHETAの写真。


視点方向、視野角、自由自在。VRで見ると、臨場感抜群です。上記、橋サイズ体験VRでクリックや、Oculus右コントローラークリックで見られるおまけつき。


高専 = 地域のチャンスをバリューに変える力!

世界を目指す、鯖江商工会議所。国際化委員会のASEAN勉強会。
基本は人口動態、せっかくなのでVRで歩きまわりながら1960年から2017年までの変化を体験してみました。
日本の伸び悩み具合と、周辺国の伸びがよく分かります。

World Population VR」 - 世界の人口カラム地図をVR化
APP: CC BY Taisuke Fukuno - The World Population TabularMaps / 世界人口カラム地図
Base APP: CC BY The World TabularMaps / 世界カラム地図
DATA: Population, total | Data - The World Bank
DATA: TabularMaps - 8bit, ISO3166-1(CSV)
LAYOUT: CC0 カラム地図 / TabularMaps on Github


北陸銀行シンガポール駐在事務所長の上原さん、シンガポールから見たASEAN等の現状。
高齢化まで少し遠い東南アジア。いろんなデータで見ることと、現地へ行ってみること、大事。


Jトラストの猿渡さん、インドネシアへのいざない。
世界一カンタンと言われる「インドネシア語
確かにアルファベットしか使わず、動詞変化や格変化もなく簡単!インドネシア内は主要な島ではほぼ通じるとのこと。IchigoJam、インドネシア語翻訳、やってみようかな。


北陸銀行のみなさん、Jトラストのみなさん、ご来鯖、ありがとうございました!
料亭中松にて、nakamatsu.com 鯖江のお店はドメインがいい!)

愛媛県の離島、上島町のこども、サッカー少年少女たちにプログラミングをの企画、大成功!
上島町+広島県因島での思い出を360度写真でまとめました。
VR Kamijima」 PC、スマホ、スマホVR、Oculus Go、Oculus Quest、Windows MRなどでどうぞ!

美しい夕日、佐島。(視界真ん中のカーソルを、地図上の赤い点に合わせて、ちょっと見つめると場面が変わります)


橋がつながっていない上島町、広島県因島からフェリーで渡る。海、山、島、きれい!


元保育所をかわいく手作り改装、佐島のカフェ「book cafe okappa
人口500人のせとうちの小さな島に“お引っ越し”した女性二人組が作る「book cafe okappa」【離島カフェのタネ】|ことりっぷ


弓削商船高専すぐ側、高台にあるリゾート「フェスパ」内のレストラン「イル・マーレ」からの眺め!


こどもプログラミング in 上島町


佐島の宿泊先、汐見の家、五右衛門風呂。

VR Kamijima
異次元体験、Oculus Quest、WebVRでらくらくVRアプリづくり、その他VRアプリもどうぞ!

links
- 瀬戸内25島、愛媛県上島町のこどもたちへプログラミングとサッカーを!
- 瀬戸内の夕日をバックにボックスクラフトVR、弓削商船高専マイコン部IchigoJam&VRレクチャー編
- 翌日にはプログラミングの先生に! 弓削商船高専マイコン部の高専生大活躍、サッカー少年 meets IchigoJamゲームプログラミング!+かみりんゲーム
- 360度写真でまとめる、上島町(弓削島/佐島/生名島)の記憶のVR追体験

やってきました弓削商船高専フェスに備えて事前研修!

VR体験しているところ、360度記念撮影


高性能、低価格、しかも、なんといっても開発が簡単!


boxcraft-yuge」(元、50行マイクラ風
美しい瀬戸内の夕焼けをバックにVRマイクラ風のボックスクラフトを多色対応。プログラムも数行加えただけ!


IchigoJam&IoTプログラミング体験をしてもらいつつ、小学生へ楽しくプログラミングを教える技を伝授。ネットゲーム大会ももりあがりました!

10 CLT:X=15 15 CLT 20 LC X,5:?"O" 30 LC RND(32),23:?"*" 35 WAIT 3 36 X=X-BTN(28)+BTN(29) 37 X=X&31 39 IF SCR(X,5) ?TICK():END 40 GOTO 20

これでチート対策してスコアがでるようになったかわくだりゲームのできあがり!
IchigoJam BASIC コマンドリファレンス
自習用のIchigoJamプリント他、ドキュメントいろいろも参考に!


今回は東京から新幹線、福山駅からバスで1時間


フェリーに乗り換えて20分で弓削商船高専最寄りの港、弓削港へ


弓削商船高専マイコン部のみなさん、楽しい時間をありがとう!明日もよろしくです!
瀬戸内25島、愛媛県上島町のこどもたちへプログラミングとサッカーを!

links
- 瀬戸内25島、愛媛県上島町のこどもたちへプログラミングとサッカーを!
- 瀬戸内の夕日をバックにボックスクラフトVR、弓削商船高専マイコン部IchigoJam&VRレクチャー編
- 翌日にはプログラミングの先生に! 弓削商船高専マイコン部の高専生大活躍、サッカー少年 meets IchigoJamゲームプログラミング!+かみりんゲーム
- 360度写真でまとめる、上島町(弓削島/佐島/生名島)の記憶のVR追体験

MSXを使っていた頃から好きなライフゲーム、原題、Conway's Game of Life
2012年の一日一創でも3作品、チェックボックス3レイヤーアート
今回は異次元デバイス、Oculus Quest向けにライフゲームを3D/VR化、新パターン探索が楽しいです!


LifegameVR」Game of Life 3D/VR by @taisukef
トリガーで置いたり消したり、グリップで時間を動かしたり止めたり、Aボタンでランダム、Bボタンで全消しする。
50行マイクラ同様、コントローラーによる直感的に操作できるのが魅力。
PCやスマホでは、画面クリックやタッチで、ランダムのみ操作可能。

ライフゲーム3D - 生死のルール
1. 3次元空間上のある点の生死は、3軸それぞれ-1〜1、自分を含め合計27個の生命によって決まる
2. 自分を含め上下左右前後の生命は重みを1、それ以外を0.5として合計を求める
3. 合計値が3以上3.5以下であれぼその点は生き(または誕生)、それ以外であれば死ぬ

Game of Life 3D by @ taisukef - Rules of Life and Death
1. The life and death of a certain point in a three-dimensional space is determined by a total of 27 life, from -1 to 1 for each of 3 axes, and oneself
2. The life on the top, bottom, left, right and back including yourself is calculated with a weight of 1 and the other 0.5
3. The total value is 3 or more and 3.5 or less, the point is alive (or birth), otherwise it dies

3x3x3、27点全部同じ重みで調整するもカオスから抜け出せず、上下左右前後だけでは増殖していかないので、シンプルな重み付けをしたところいい感じの生命感がでた。2次元ライフゲームでのパラメータ、3以上4以下を使うと、発散しすぎる。


遊んでいる様子。4つの四角は安定。箱の隣にひとつ置くとその方向に動かせるのがおもしろい。


DNAもプログラミングする時代に突入。生命は驚くほどコンピューターに近い。
遺伝暗号コドンの衝撃、生物は超小型2bitコンピューター!? 食べるをハックする蛋白質DNA編
ハードウェアなので、記述言語はVerilogベースとのこと。2bitコンピューターとも言える生命、多値トランジスタの実現がシミュレーションを加速してくれるかも。

コンピューターサイエンスは、人間自身、生命自体を見つめる科学でもある。

宇宙データプラットフォームを使った分析はじめ、続いては、お気に入りデバイス Oculus Questと組み合わせます。
2.5mの分解能で宇宙から標高を計測する、ALOS-PRISM。Tellusの開発環境、Jupyther Notebookを使って富士山付近のデータをエクスポートして、VR表示しました。


VR fujisan
マイクラでリアルなマップを再現したい夢、データとプログラミングを使えば簡単に叶います!

作り方
1. Tellusに、Jupyther Notebook か Jupyter Lab を利用申請。
2. 富士山の位置のメッシュを調べる。(タイル座標確認ツール
3. Jupyter Notebook上、Pythonでプログラムをかく

TOKEN = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" import os, json, requests, math from skimage import io from io import BytesIO import matplotlib.pyplot as plt %matplotlib inline def get_image(zoom, xtile, ytile, opacity=1, r=3, g=2, b=1, rdepth=1, gdepth=1, bdepth=1, preset=None): sname = "aw3d30" url = "https://gisapi.tellusxdp.com/{}/{}/{}/{}.png?opacity={}&r={}&g={}&b={}&rdepth={}&gdepth={}&bdepth={}".format(sname, zoom, xtile, ytile, opacity, r, g, b, rdepth, gdepth, bdepth) if preset is not None: url += '&preset='+preset headers = { "content-type": "application/json", "Authorization": "Bearer " + TOKEN } r = requests.get(url, headers=headers) return io.imread(BytesIO(r.content)) img = get_image(10,906,404) io.imshow(img)

富士山の標高データが画像で表示されます。
4. RGB値が最高になっているようなので、最大値を求めてみる(きっともっとシンプルに書けます)

max = 0 for d in img: n = (d[0] << 16) | (d[1] << 8) | d[2] if n > max: max = n print(max)

結果

12766

富士山の高さは3766mなので、9000ずれた1m単位だと推定。 5. 試しにテキストで表示してみる

for y in range(256): for x in range(256): d = img[x,y] n = (d[0] << 16) | (d[1] << 8) | d[2] n -= 9000 n /= 4000 n = math.floor(n) print(n,end='') print()


それっぽい。
6. JavaScript用に配列データとして出力

h = [] for y in range(256): for x in range(256): d = img[x,y] n = (d[0] << 16) | (d[1] << 8) | d[2] n -= 9000 h.append(n) print(h)

このデータを、fujisan-data.js として保存して、JavaScriptでWebVRを使ったVRアプリをつくって、できあがり!

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>VR fujisan - data by Tellus</title> <script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script> <script src="https://fukuno.jig.jp/app/webvr/fujisan-data.js"></script> </head> <body> <script>"use strict" window.onload = function() { var scene = document.querySelector('a-scene') const r = 1 const rw = 4 // sampling rw * rw const bw = 256 // org data sampling w and h const w = bw / rw let map = [] for (let i = 0; i < w * w; i++) { const x = i % w const y = (i / w) >> 0 const p = x * rw + y * rw * bw const n = HEIGHT[p] map[i] = n } for (let i = 0; i < map.length; i++) { const x = i % w const y = (i / w) >> 0 const h = map[i] * 0.0005 let box = document.createElement('a-box') box.setAttribute('position', { x: (x - w / 2) * r, y: h / 2 * r - 7, z: (y - w / 2) * r }) box.setAttribute('depth', r) box.setAttribute('width', r) box.setAttribute('height', r * h) scene.appendChild(box) } } </script> <a-scene id="scene"> <a-sky color="#000000"></a-sky> <a-light color="blue" position="1 0.1 0.5"></a-light> <a-light color="cyan" position="0.1 4 2"></a-light> </a-scene> </body> </html>

縮尺は適当なのでリアルな富士山ではないですが、これで怪獣や巨人になった気分で富士山付近を歩けます。
VR x Tellus、楽しいですよ!

links
- VRではじめる現代HTML入門 - Oculus Quest x 福井高専生
- 50行で作るVRマイクラ風 / boxcraft for Oculus Quest with A-Frame
- モバイル時代こそバス! つつじバスロケVRビジュアライズ - リアルタイムオープンデータ x Oculus Quest
- 異次元の分かりやすさ、触って学ぶVR数学、ベジェ曲線編 on Oculus Quest

今週末、鯖江のサンドーム福井ではB'zライブ
気になるサラベ柄ポーチ、サイズ感が気になったのでVR。

realbox in VR - 幅18cm x 高さ10cm x 奥行き8cm」スマホVRでもOK!
なるほど、思ってたよりちょっと大きいけど、悪くないかも。
手に持って動かせるといいかも。
自分の手の大きさを測って、コントローラーの替わりに出すと、きっともっと分かりやすい。
PCでも動きますが、サイズ感は伝えられません。


realbox 100インチテレビ (SONY KJ-100Z9D)
おまけに、100インチの4Kテレビ、SONY KJ-100Z9D(コンポジット入力端子も付いているからIchigoJamもOK!)も見てみました。大きい!

URLのパラメータで大きさと色を自在に指定できる、リアルサイズを体感するVRアプリ「realbox」

W cm x H cm x D cm

今回のプログラムは37行でした。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>realbox</title> <meta name="description" content="real box in VR"> <script src="aframe.js"></script> </head> <body> <script>"use strict" window.onload = function() { const hash = document.location.hash let w = .18 let h = .10 let d = .08 let c = "#333333" if (hash.length > 1) { const s = hash.substring(1).split(',') const a = s[0].split('x') w = parseFloat(a[0]) / 100 h = parseFloat(a[1]) / 100 d = parseFloat(a[2]) / 100 c = s.length > 1 ? "#" + s[1] : c } const box = document.createElement("a-box") box.setAttribute("position", { x: 0, y: 1.3, z: -.5 }) box.setAttribute("width", w) box.setAttribute("height", h) box.setAttribute("depth", d) box.setAttribute("color", c) scene.appendChild(box) } </script> <a-scene id="scene"> <a-sky color="#ECECEC"></a-sky> </body> </html>

links
- VRではじめる現代HTML入門 - Oculus Quest x 福井高専生
- 50行で作るVRマイクラ風 / boxcraft for Oculus Quest with A-Frame
- モバイル時代こそバス! つつじバスロケVRビジュアライズ - リアルタイムオープンデータ x Oculus Quest
- 異次元の分かりやすさ、触って学ぶVR数学、ベジェ曲線編 on Oculus Quest

お店の雰囲気を知るのに便利な、360度写真。
立ち寄った、京都五条の和えるのお店、VRアプリ化してみました。

VR aeru gojo

今回はスマホVRでもPCでも使える画面中心のカーソルを使ったUI。
白い球を0.5秒見つめると、シーンが変わります。

方向は未調整、きれいに簡単に合わせられると便利そう!
環境音などを加えると臨場感出そう!

VRでは目線、大事。持ち運びやすく自撮り棒にもなる三脚を探したい。

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