福野泰介の一日一創

1800年代、フランスで撮られたステレオ写真、4枚加工してVR美術館風に表示させるアプリで鑑賞してみました。

VR-streophoto
Oculus Questだと、歩いて近づいたり、しゃがんだり、ジャンプしたり、回り込んだりと自由に鑑賞できて楽しい。 スマホVRでも立体写真としての鑑賞OKです!

A-FRAME上のステレオ写真の表示には、@binzumeさんのこちら記事のプログラムを使わせていただきました!
A-Frameでステレオ画像をテクスチャとして使う - Qiita

データは、CC0のオープンデータとして公開されている、パリの美術館画像コレクションにステレオ写真が1400点!? (tweet by @wakufactory)
おもしろそうな写真をダウンロードして、中のjpgデータから左右写真を切り出し、比を計算するratiocalcで、アスペクト比を合わせて、A-FRAMEのa-planeタグで置くだけ!


フランス美術館の立体写真

立体スキャンしたデータを並べて、VR美術館づくりも楽しそうです!

美しいDNAの二重螺旋、赤いワイヤーフレームバージョンを作成。
夢の赤い3D世界、HTMLとJavaScriptをちょっと使うだけで、思う存分、創り放題!

DNA - 二重螺旋VR 赤いワイヤーフレーム版
作り方は簡単、A-FRAMEの wireframe 属性を true にするだけ!(src on GitHub)


そう、この世界!


ルイージマンション3で唐突に登場、バーチャルブー!まさかのバーチャルボーイ!


博士からの入電、モバイルに進化したVBをかければ


赤い世界!


バーチャルボーイ、Windows95前夜の1995年7月に発売(自宅のVB)

変なゲーム好きだった現役高専生の頃、大興奮して遊んだあの頃を思い出します。バーチャルボーイ、多くのソフトを、店頭の「ご自由にお取りください」で保護! NINTENDO LABO VR KITでもバーチャルボーイ登場。同世代の活躍、うれしいです。


映った!(名作、レッドアラーム by T&E SOFT
でも、振動板が壊れてしまっているらしく、右目のみ

あの頃の夢、Oculus Quest を使って、作ってみましょう!
ハンドトラッキングが安定し、対応ソフトが増えれば出るか、廉価版!?
29,800円など、攻めた価格で登場すれば、今年早期の1000万台普及も夢じゃない。

各地域のICT化の推進剤、地域型の小学生向けロボコン「第1回加能ガニロボットコンテスト」が金沢市の名所、近江町市場上で開催!

自分で作ったカニロボを持って、笑顔! さっちゃん(かなざわさちこさん)も!

出場前の緊張感から、決勝戦、表彰式、ヒーローインタビューまでを5分の動画でまとめました。

加能ガニロボットコンテスト2019 ダイジェスト
THETAで撮影、決勝戦もぜひご覧ください!(360度見渡せる、ノーカット版 / OculusQuest推奨


福井で開催された第3回、越前がにロボコンの準優勝者で、テオヤンセン型カニロボ開発者も見学に!
キッズエンジニア同士の戦いが熱い! 小学生対象 第3回 越前がにロボコン、優勝ロボットの勇姿とその秘密をインタビュー


第1回、加能ガニロボットコンテスト、開会!


車検終わって青いタグが付いたカニロボ達


いよいよ予選スタート!副審と得点は、石川高専の1年生、2年生が担当!


レゴでもIchigoJamでも何でも、ロボットの種別は問わない、無差別級!


予選でのスコアとタイムで上位8チームが本選出場!


右コースか左コースはじゃんけんで決めるスタイル。プログラミングして調整できるピットもあります。


トーナメント式、1発勝負で決まっていきます。


金のボールもゲットして帰還するカニロボ!(歩行型だとボーナスがでますが、車輪型でも出場OK!)

ずらっと並んだ個性的なカニロボ達






金沢美大の学生デザインの加能ガニロボコンオリジナルトロフィー!


デザイン賞はどのカニロボの手に!?


3位の2チームに近江市場直送、生の香箱ガニ3杯!(ズワイガニのメス)


2位のチームには香箱ガニ5杯!


優勝チームには、大きなオスの加能ガニ(ズワイガニ)も!


デザイン賞にもズワイガニが贈られました!


選手みんなで笑顔で記念写真


テレビ局によるヒーローインタビュー!
家にもコースを作って、何度も調整したとのこと。歩行型にチャレンジしたいと意欲満点!


第一回加能ガニロボットコンテスト、やりました!


かわいかった、かに風船!

午後のイベント、第5回こどもプログラミングサミットへ続く!

links
- 「加能ガニ」のロボで児童競う 市が初のコンテスト - 石川県のニュース | 北國新聞社
- 加能ガニ ロボも「うまい」 プログラミング課題 次々得点:石川:中日新聞(CHUNICHI Web)
- 加能ガニロボットコンテスト
- こどもプログラミングの聖地「金沢」、激闘の「かにロボコン」と白熱の「サミット」で2020年に弾み! – about yrm

プログラミングを学ぶコツと、創りたいものがあれば、アウトプットまでは一直線。行動あるのみ。
どんな田舎でも、ネットさえあれば、世界中の最新情報と一緒に取り組む仲間と出会えます。

人類最大の文明の利器、プログラミングをこどもたちに届ける活動、PCN(プログラミングクラブネットワーク)。
一関高専でも名乗りを上げてくれました!

地域の課題 x こどもの発想 x 高専生の実装力、最強タッグでSDGs17ステージにチャレンジしよう!


一関高専校長、吉田さんと!


一関高専 地域創造フォーラム デジタルトランスフォーメーションの事例 by KDDI 経営戦略副本部長 松野茂樹氏!
地方創生を目指して、先日連携を発表した、KDDIさんとの縁で、初一関!
高専生にもオープンなまち鯖江、福井高専 x KDDI x エル・コミュニティ x jig.jp 包括協定!


VUCAの時代、社会を見て、技術を身に着け、失敗を恐れず、自分の信念によって、行動あるのみ!
ランダム性がなく、確実に予測可能な世の中ではないことに感謝したい。


パテコンサミット in 一関、発明家の育成・望ましい人材像 by 国士舘大学 飯田昭夫氏
パテコンとは、パテントコンテスト、発明コンテストのこと、一関高専も受賞


有志向け開催、特別講義「はじめてのIoTプログラミング with IchigoJam x sakura.io
jig.jpやjigインターンで採用しているアジャイルなチーム開発手法、スクラムに関しては
→ 「チーム開発手法、スクラム


予測可能な未来ゲーム!・・・おもしろくないですね

敵出現パターンで使ったランダム(RND)を、TICK()を使って予測可能にする改造法はこちら。

30 LC RND(32),23:?"*" ↓ 30 LC TICK()%32,23:?"*"

思いついたことをサクッと形にする力、プログラミングで身に付く便利で楽しいスキルです。


予備知識なしで、キーボードタイピング、プログラミング、ゲームづくり、IoT体験ができる IchigoSoda セットを使用。
IoT以外は、IchigoJamだけで簡単。コア以外一体型のIchigoDyhookでもっと簡単に!
本日のスライドデータはこちら「はじめてのIoTプログラミング」(src on GitHub)
オープンデータなので、自由に改変して、利用できます!後輩、仲間、大人、こどもたちにどうぞ!


一関高専開発単体でプログラミングできるロボットを見せてもらいました!PICマイコン使用
高専から、小学校へのプログラミングの出前授業、いいですね!
興味もった子供向けに、小学生向けのロボコン県大会、越前がにロボコン的なもの、一関高専で開催とかいかがでしょう?


drawline2 for OculusQuest」(動画
予測不可能な社会に立ち向かう有効な手のひとつ、VRによるシミュレーション。(JSたった30行でマイクラ風とか)
コントローラーの代わりに、両手の動きを使った操作にもベータ対応した、OculusQuestの体験会ももりあがりました。
まだWebVRモード中の操作には対応していないので、ブラウザ上のHTML5Canvasを使ってお絵かきアプリを作成。
手で描けるのは楽しい!(ontouchstart使ったら両手対応もいけるかな??)


一関・平泉といえば、もち食文化!とのこと。300種類のもち料理から季節に合わせてピックアップされたもち膳。
真ん中の大根おろしは、前菜兼お口直しとして使う、もちなしで今回いただいた8種+α。
全300種類のレシピ、画像付きオープンデータがもしあれば、もちトレーディングカードゲームや神経衰弱など、いろいろ楽しくプログラミングできそう。 (「オープンデータ - 一関市」には避難所、高専など、緯度経度付きの様々なデータあり!)
一関・平泉のもち食文化 | 世嬉の一酒造(せきのいち)


ユニーク!竹でいただく地酒。


一関高専の先生との懇談会、ステキな蔵レストラン「世嬉の一酒造(せきのいち)」にて。

links
- リアルをプログラミングで遊ぼう! 一関市のオープンデータを一挙取得するJavaScriptのプログラム例

さばえものづくり博覧会のふりかえりMTG。来場者アンケートで印象に残ったブースナンバーワンに、NT鯖江
気軽なものづくりの楽しさ、伝わったようで何よりです!

早速、来年の第2回の開催も決定、NT鯖江2020

ひとまず開催日だけですが、どどんと公開しました。
来年は、鯖江や福井、地元の新規出展者が増えるような仕掛け、考えます!


今年心機一転した「さばえものづくり博覧会」では、IoTカウンターも活躍!
どんどん新しいことチャレンジしようと、中の人がまずワクワクすること、大事。


VR-TokyoTrains
首都圏の電車のVRビジュアライゼーションに、遅れ情報反映。遅れが発生している電車は赤く表示モード追加!
第3回東京公共交通オープンデータチャレンジ、締切日。どんな作品が集まったか、楽しみですね!


遅れ情報が出ていない時間帯にチェックしたので、ひとまずランダムに2割の電車を遅らせてみた様子。

const res = [] for (const train of trains) { const st = await getStation(train["odpt:operator"], train["odpt:fromStation"]) const delay = st['odpt:delay'] || 0 //const delay = Math.random() < .2 ? 1 : 0 const pos = [ st["geo:lat"], st["geo:long"], delay ] res.push(pos) } return res

リアルなデータを使って、いざという時をシミュレーションするのもおもしろい。

AR/VRなど、xRな未来もワクワクしますね!
来年10月に向けて、いろいろ企みましょう、創りましょう!

links
- NT鯖江2020 - PukiWiki
- NT鯖江2019 - PukiWiki
- 福井で初開催!なにかつくろう、NT鯖江2019! ダイジェスト動画と交互連打で目指せ世界記録ゲーム!

福井県立武生高校(たけふ、TKF)のSSHにて化学の実験をIchigoJamを使って定量的に行う公開授業!
SSHとは、次世代人材育成事業の一環で、スーパーサイエンスハイスクールのこと。
異分野融合、化学だけ、コンピューターサイエンスだけ、など、単独のスペシャリストではなく複合的に使いこなすことが大事!

化学 x プログラミング with IchigoJam!
Na2S2O3 + HCl → 2NaCl + H2O + SO2 + S


前日の50分授業いて、コンピューターとプログラミングの基礎をエルチカからかわくだりゲームによるアルゴリズムの基本までをざっと紹介。 (復習スライド、はじめてのパソコンづくりとプログラミング


WAITでタイミングを調整、GOTOで繰り返し、前日のLEDつけたり消したりのプログラムの応用です。


いよいよ、化学xプログラミング、今回は反応時間から反応速度を算出する実験。


今日使う機材はこちら(ミニモニターまたはPCとUSBキャプチャーをIchigoJamのディスプレイに)


メインディッシュ、チオ硫酸ナトリウム水溶液と濁度センサー(SEN0189)、IchigoJamのメモリーに記録することもできますが、まずはシンプルに手書き!
濁度センサーは、D/Aでデジタルとアナログを切り替えスイッチを、A(アナログ)にするのを忘れずに。


IchigoJam x 化学実験、動画でふりかえり。
Na2S2O3 + HCl → 2NaCl + H2O + SO2 + S

Na2S2O3 : チオ硫酸ナトリウム
HCl : 塩酸
NaCL : 塩化ナトリウム(塩)
H2O :
SO2 : 二酸化硫黄
S : 硫黄(硫黄コロイド粒子、白濁の元、臭いの元)

塩酸で反応して、白濁していく様子を濁度センサーとIchigoJamで観測。プログラミングをいじって、計測しやすくするのがポイント。


塩酸を加えると、どんどん濁っていく溶液。濃度や温度の関係をセンサーとコンピューターをプログラミングつなげて計測すれば、定量的に計算できますね!次の時間で、Excelを使ってグラフ化!


後片付け、協力してやりましょう!(絵がかわいい!)


中学校ぶりに、見た化学、改めて見るとおもしろい!楽しそう!
棚を見ると、まるでパズルな分子構造、自然界、スゴイ。


H2O - molecularVR」(src on GitHub)
気になった分子模型、はじめのいっぽ、水分子をVR化!

<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>water - molecularvr</title> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> </head><body> <a-scene id="scene"> <a-sky color="#000000"></a-sky> <!-- H2O - H-O-H angle:104.45, Math.cos(104.45/180*Math.PI/2-Math.PI/2)=0.7904223683023976 --> <a-sphere position="0 1.5 -2" radius=".8" color="#EF2D5E"> <a-sphere position="0.7904223683023976 -0.6125622251553133 0" radius=".7" color="white"></a-sphere> <a-sphere position="-0.7904223683023976 -0.6125622251553133 0" radius=".7" color="white"></a-sphere> </a-sphere> </a-scene> </body></html>

とってもシンプル、分子構造好きな人、ぜひチャレンジしてみてください!
追加分子のプルリク(GitHubへの追加編集依頼)お待ちしてます!
Oculus Questで、分子構造と戯れるのも楽しいかも?


化学の先生は、福井高専物質工学科出身、なまずの後輩、谷口渓先生!
プログラミングと化学の融合授業、大成功!

links
- SSH | 学校案内 | 福井県立武生高等学校
- 化学の実験とプログラミング、濁度センサーで反応速度をグラフ化してみよう

iPhone11の計算力は1兆回/秒。コンピューターを味方にして、ほしいもの創ろう!

VR新作「mirrors - drawlinevr」(src on GitHub)
同時に5つ写像される仮想的な鏡がある3D空間内でするお絵かき。説明するとややこしいけど、実際試せば誰でも一瞬でアーティスト。HTML/JavaScriptによるプログラムは100行足らず。マンダラアート風?


加藤学園暁秀初等学校の5年生全員に紹介した、楽しく奥深い、プログラミングの世界。


「かわくだりゲーム」たった4行で上がる歓喜!

10 CLS:X=15 20 LC X,5:?"O" 30 LC RND(32),23:?"*" 40 GOTO20

3行加えて、できあがり!

35 WAIT3 36 X=X-BTN(28)+BTN(29) 39 IF SCR(X,5) END

詳細は、こちらスライドを参照ください(改変自由なオープンデータ、IchigoJam webで復習もどうぞ)

はじめてのパソコンづくりとプログラミング(keynote/pdf)」USキーボード版


すべてのアプリやゲームの基本ブロック、セットアップ(準備)とループ(くりかえし)を体感。


鯖江流プログラミング学習スタイル、2人一組
総合2コマから始める鯖江の小学校プログラミング! 総合的な学習の時間、IT遊具、クラブ活動、地域ICTクラブ、高度IT人材へのベストプラクティス


サインを求められた!


中も個性的!Radishが活躍しやすそうな広場!


学校内にはたくさんのロボ!


加藤学園、素敵な校舎でした!


1.4とWS.LEDを使った、キラキラを伝授!
R,G,B、好きな色に50コまとめて光らせる!(for 1.4)

LET[0],20,10,0:WS.LED 1,50


PCN沼津 at 沼津高専、中原さん x VR。VRと教育も熱い!


沼津高専生も楽しい!


たのしい電子管楽器のつくりかた - ないならつくる
沼津高専出身の先輩が創ったものとして紹介してくれた、電子楽器!
IchigoJam x MIDI も楽器づくりとプログラミングは相性良し!


Ichigojam内蔵テレビの製作 - ないならつくる」も熱い!


沼津高専NIT2.0メンバーに、プログラミングの楽しさと楽しさの伝え方を伝授!

50行マイクラ風をもっとシンプルに、たった30行でポコポコと白い箱を置くだけプログラムを紹介!
(boxcraft simplest - src on GitHub)

<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>boxcraft simplest for Oculus Quest</title> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> <script>'use strict' AFRAME.registerComponent('input-listen', { init: function() { this.el.addEventListener('triggerdown', function(evt) { const p = this.object3D.getWorldPosition() const size = 0.1 const p2 = { x: Math.floor(p.x / size) * size + size / 2, y: Math.floor(p.y / size) * size + size / 2, z: Math.floor(p.z / size) * size + size / 2 } const box = document.createElement('a-box') box.setAttribute('position', p2) box.setAttribute('width', size) box.setAttribute('height', size) box.setAttribute('depth', size) box.setAttribute('color', '#FFF') scene.appendChild(box) }) } }) </script></head><body> <a-scene id='scene'> <a-sky color="#222"></a-sky> <a-entity oculus-touch-controls='hand: right' input-listen></a-entity> </a-scene> </body></html>

グルメ編

念願の初さわやか!


さわやか名物げんこつハンバーグ


落ち着くまで紙で防御するスタイル


帰り間際に三島コロッケ!

鯖江、何か新しいことが始まると聞いてのぞいてきました。

サイバー感あるこの場所、実は鯖江市商工会議所1F。元の事務所は2Fへ移転し、現在1F改装工事中。
みんなで創る、新しいワクワク創出&情報発信拠点。


dual-drawline-VR」 for Oculus Quest
VRでぐっと身近になる空間デザイン。大好きな黒地に赤3D直線の世界を、両手で存分に表現できるアプリを作ってみました。今回も50行!(ベースアプリ: drawline-VRsrc on GitHub


凄腕バリスタ、武珈琲ラボの土橋さんによる攻めのコーヒーいただきました!(YouTubeチャンネル
コーヒーを始めたきっかけは、なんと、レゲエ!


レゲエと鯖江いえば、こちら!「世界で一番熱いまち、鯖江
鯖江でやってみたい普通じゃないこと、大人も子供も学生も、アイデア大歓迎!

2020年開催の起業家甲子園への出場権は、阿南高専の手に!

「あ!水ダス(AMIZDAS)-水災害を自ら防ぐ水位監視システム-」


消費電力にこだわったIoT水位計、Sigfox、sakura.ioにも対応。GPSと太陽光パネル付きでどこでも動作!
設置実績を積み、実用化へ!平時にいかに興味を持ってもらうかが鍵!
オープンデータ化して、衛星とかいろんなデータと組み合わせて機械学習もおもしろそう。


起業家甲子園に向けて、意気込み十分!


もう一校、都立高専品川キャンパス、NICT賞!


「Agricowture-近未来型放牧牛管理システム-」IoT放牧牛!


牛ウェアラブルデバイスと、自動的に該当の牛のところへ行って撮影するドローンによるシステム。
実際の放牧現場で使っているところが強い!メンバーのご実家だとか。身近な課題探し、良いですね。

2校選ばれたNICT賞の副賞は「東京で開催される起業家甲子園への挑戦権」と「シリコンバレー研修旅行招待券(1名)」
結構、豪華です!


今回の特別講演、都城高専出身社長、aratanaの濱渦さん(@shinji_hamauzu)!


都城高専出身馬場さんは第7回高専プロコン(北九州)出場とのこと!
発見「審査員賞 学生生活スケジューラー「ポケスケアシスト」」ポケベル&スケジューラー!
私は1年前第6回高専プロコン(函館)の競技部門に出場、ニアミスでした!


広い会場、全国からの高専生で埋まってました!


VRで振りかえる高専プロコン第30回
スマホやPCでもOK、next/prevで場面変更。iOS13の方はまずは青いボタンを押してください。iOS12の方はSafariの設定で加速度センサーを許可ください。
Oculus QuestなどVRだと大迫力!


入り口には都城高専の歴代ロボコン出場ロボット達


こちら「みやこのぞう」ロボ、ロボットはメカの工夫がおもしろい!モーター、高いんです!
制御とプログラミングも重要な要素、興味があれば、高専生の内にチャンスしておくのが良いかも!


インターンOBにも再開!仲間と一緒に車で来た!


初日夜には先生たちとの情報交換会、30年支えてくれた先生たちへの感謝状。


30周年を持って引退される神沼さんのお弟子さん、函館みらい大学の大場さん!


濱渦さん、松江高専生のAR作品体験


会場、宮崎地元の高専、都城高専、宮城県庁発のスーパーGIS「ひなたGIS」開発者、落合さんと!


IchigoJamつながり、鳥羽商船高専生でPCN三重、東京高専生でPCNシリコンバレー、それぞれお手伝してくれてます!


オタマート好き発見! オタマートシール、もらってくれてありがとう!


仙台高専広瀬キャンパス、今月末におじゃまする小中学生向け「みやぎプロコン」楽しみ!
10/27 12:30-15:30 with 高専祭 in 仙台高専!


procon30thメガネ写真集できた!
iPhone x Swift で誰でも簡単、オープンソース!

朝のピーク時には東京圏を走る電車は、なんと1000台を越えていました。
東京公共交通オープンデータチャレンジ」のAPI許可がでたので、nagixさんの作品をVR用にフォークした、VR-TokyoTrainsに列車の現在位置を反映。

VR-TokyoTrains」(src on GitHub)
APIで取得できるのは出発駅と向かう駅、遅れ情報だけです。Mini Tokyo 3Dのアニメーションする電車表示は、時刻表を元に路線データからその中間地点を計算していますが、今回はひとまず出発駅にいるものと仮定して、電車の数分、駅の位置に緑の球を積みました。


iPhone iOS13からは加速度センサーの使用にユーザー操作による許可が必要になったため、青い球を一度タップして許可ください。横向きにすることスマホVRでも楽しめます。


ただ、なんといってもおすすめはVR。Oculus Questで見ると、東京のまちを歩き回れます!近づいて見えます!
A-FrameでかんたんVR実装 in JavaScript、楽しい!

こちら、駅の緯度経度を現在位置として返すAPIをNode.jsで作って動かしています。
サーバーで動かすことで、API_TOKENを共有せずに、通信量を減らせます。Node.jsを使うと、クライアントコードとサーバーコードを簡単に行き来できて便利!

require('dotenv').config() const API_TOKEN = process.env.API_TOKEN_ODPT const opstations = {} const getTokyoTrainsNow = async function() { const trains = await loadJSON("https://api-tokyochallenge.odpt.org/api/v4/odpt:Train?acl:consumerKey=" + API_TOKEN) // 列車取得 リアルタイム 496@6:11 const getStation = async function(operator, stationid) { let stations = opstations[operator] if (!stations) { stations = await loadJSON("https://api-tokyochallenge.odpt.org/api/v4/odpt:Station?odpt:operator=" + operator + "&acl:consumerKey=" + API_TOKEN) opstations[operator] = stations } for (const st of stations) { if (st["owl:sameAs"] == stationid) return st } } const res = [] for (const train of trains) { const st = await getStation(train["odpt:operator"], train["odpt:fromStation"]) const pos = [ st["geo:lat"], st["geo:long"] ] res.push(pos) } return res } const webclient = require("request") const loadJSON = async function(url) { return new Promise(function(resolve, reject) { webclient.get({ url: url }, function(error, response, body) { if (error) { reject(error) } else { resolve(JSON.parse(body)) } }) }) } module.exports.getTokyoTrainsNow = getTokyoTrainsNow

(src on GitHub by Code for Sabae)
async / await / Promiss を使うと通信周りを同期処理としてすっきりわかりやすく記述できます。
さぁ、オープンデータで便利を創ろう!備えよう!

links
- 東京公共交通オープンデータチャレンジ
- Mini Tokyo 3D 開発日誌 - Togetter

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