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

4Kや8K、映像の進化は画面解像度だけでなく、時間解像度も進化してました。
通常、秒間60回、60Hzで更新される画面、なんと4倍の240Hzにも達しています。(実験では480Hzも!)

レースゲームなど、動きが激しいアクションゲームでのフレームレートはとても大事。
処理が重たいゲームで30fps(frame per second、秒間更新回数)なものは、操作の遅れが最大33ミリ秒(1秒/30)発生し、見た目にもカクカクぎこちなく見えて幻滅です。

初代ファミコンも60fps(正確には59.97fps?)のなめらかなでクイックな反応が楽しい。ゲームによっては敵が多く出すぎて「処理落ち」と呼ばれるフレームレートの低下も当時でも、よく知られた現象でした。

そんな重要な要素、フレームレートが4倍にもなった世界、ゲームに限らず未来を感じます。ブラウザ上でも手軽に実験できそうなので、JS用かんたんゲームフレーム「sg-game.js」を作って、その実現の時を待つことにしました。

サンプルアプリ「FPSChecker」は、その環境でのリフレッシュレートを表示しながら、ぐるぐる色を自身の角度を色相としながら回る円、タップまたはクリックするほどに回転周波数が変わります。 10Hzにしたときに残像で見える円の数、通常の環境では6ですが、12コ、14コ、24コと増えるはず。(480Hz環境なら48コ!)


FPSChecker」(スクリーンショットは60fps環境を模したもの)

IO-DATA製24.5インチ240Hz対応モニター「KH2500V-ZX2」を買って試してみます!
(「EX-LDGC251UTB」と同じ仕様のパッケージ違い)

今回、新設した正方形ゲーム用シンプルフレームワーク「sg-game.js」、ゲームづくりに、JavaScript言語によるプログラミング学習に、活用ください。


こちら、最小サンプル「min.html」をコピペし、min.htmlとして保存、ブラウザで開けば動きます!
PC、iPhone、iPad、Android、いずれもOK!

<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>min</title> <script src="https://taisukef.github.io/sq-game/sq-game-r1.js"></script> <script>"use strict"; var gamemain = function(game) { game.loop = function(g, ts, dt, vw) { g.setColor(255, 0, 0); g.fillCircle(500, 500, ts % 1000); }; }; </script> </head></html>

正方形ゲーム専用フレームワーク sq-game.js の使い方
- gamemain メソッドをつくる
- 受け取った、game オブジェクトに 描画用ループ loop メソッドを設定する
- g は canvas、ts は時間、dt は時間差分、vw はバーチャル幅と高さ1000
- 必要なら、タップされた時の操作用に tap メソッドを設定する

こちらが、sg-game.js を使った、上記、FPSCheckerのプログラム!

<!DOCTYPE html><html><head><meta charset='utf-8'/> <title>FPSChecker</title> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta property="og:image" content="ss.png"/> <link rel="apple-touch-icon" href="icon.png"/> <script src="sq-game-r1.js"></script> <script>'use strict'; var gamemain = function(game) { game.tap = function() { if (hz == 10) hz = 0.1; else if (hz < 0.95) hz += 0.1; else hz++; }; var hz = 1; var th = 0; game.loop = function(g, ts, dt, vw) { g.setColor(0, 0, 0); var fh = 60; g.setFontSize(fh); var s = "" + fixfloat(hz + 0.05, 1) + "Hz"; g.fillText(s, 10, 10 + fh); var s = "FPS: " + Math.floor(1000 / dt) + " / " + fixfloat(dt, 2) + "ms"; g.fillText(s, vw - g.measureText(s).width - 20, 10 + fh); th += dt / 1000 * Math.PI * 2 * hz; var r = vw / 4; var x = vw / 2 + Math.cos(th) * r; var y = vw / 2 + Math.sin(th) * r; var cr = 90; var rgb = hsv2rgb(th / (Math.PI * 2) * 360 + 90, 0.8, 0.8); g.setColor(rgb[0], rgb[1], rgb[2]); g.fillCircle(x, y, cr); g.setColor(255, 255, 255); var fh = 80; g.setFontSize(fh); var s = "" + fixfloat(hz, 1); g.fillText(s, x - g.measureText(s).width / 2, y + fh / 4); }; }; </script> <style> a { color: gray !important; } </style> </head> <body> <div id="src"> FPSChecker<br> APP: CC BY <a href=http://fukuno.jig.jp/1686 target=_blank>fukuno.jig.jp</a><br> LIB: CC BY <a href=sq-game-r1.js target=_blank>sq-game.js</a><br> </div> </body> </html>

ちなみに、映画のフレームレートは秒間24コマ、CGはきれいになってもなかなか変わりませんね。
8Kで秒間240コマの映画とか、未知の体験も楽しみです。

jigインターン、がっつり開発する2週目!定時後、Adobe XD を使ったデザイン勉強会に混ざってみました!


UIデザインの便利無料ツール「Adobe XD」を使ってみるデザイン勉強会に参加し、ハンズオンで作ったTwitter風のモックアップ。 中央揃えや、等間隔など、スナップがいい感じに効いて気持ち良し。自動で出てくるピクセル単位のガイドも良し。 Designで画面をサクサクつくって、Prototypeで画面間のつながりをパパッと作れます。


できたモックアップは、ツール右上のボタンからAdobeのサーバーにアップロードして、web共有が可能(無料版は1つまで)
今回作ったもの(期間限定)」


チームみんなでモックアップを自分の手元のデバイスで確認できるので、すばやく失敗に気がつけますね! テーマカラーがまとめて変更できて便利!(シンボルの一括編集もしたい、できる?)


フロントエンド勉強会と、


デザイン勉強会。どっちも受けたかった?受けた人から聞いてみよう!


インターンOB、遊びに来てくれました!


OBにプロダクトのビジョンを説明、質疑応答から生まれる、新たな発想!


インターンOB達と食べるランチは、福井ご当地グルメ、ヨーロッパ軒 神明分店のカツ丼!


誕生105年、世界最古のカツ丼!
食べ方など詳しくはこちら「カツ丼誕生100周年!ヨーロッパ軒のソースカツ丼の食べ方
(写真は、蓋が締まりきらない、ご飯大盛りのカツ丼大)

うえるかむパーティーで行った秋吉など、ご当地チェーン店のみまとめるマップもあると良さそう!?

jigインターンDay8
初めての自炊 - jigintern2018’s diary

jigインターンDay7、OB/OGも集まるBBQの夏!

来福感謝!


炭火起こしに、ファイヤーおばあちゃん!


生年月日を (年+月+日)%4 で、テーブル分けしてBBQ!
一見簡単そうな計算に手間取る高専生・・・、任意のテーブルにうまく分かれるためのアプリ、いいかも?


お腹を満たしたら、小次郎が燕返しを編み出したという一乗滝。


突入するインターン生!


負けじと自撮りしながらの突入を敢行!冷たい水が心地よい!


広場でVRスイカ割り!
じいかろ、スマホVR「redrain - WebVR/JS」を見ながら、会心の一撃!


スマホVR「左右反転する視界(colorsightをタップして変更可)」装備し、MRスイカ割り!
見えているのにちょっと違う、MRな視界の難しさがおもしろい。
VR/MRスイカ割り、どんな視界でやると楽しいでしょう?
炎天下での長時間スマホVR、熱で停止するので、何台かで運用するのが良いです。(オススメスマホVRはこちら


割れたスイカ、おいしくいただきました。


気温38.45度、湿度41.25%、UVインデックス12.5、不快指数87と、日焼けには気をつけたいBBQ日和!


UVカットが強力なサングラス、UVインデックス12が2に!


IchigoSodaで、温度・湿度・UVインデックスを5秒おきに送信し、スマホMRで見るメガネを持っていくも、ソフトバンク圏外のため使えず! 涼しい一乗滝近くなど、秘境ほど使いたい環境見えるメガネ、BLE化してリベンジしなきゃ!(thuv - WebMegane on GitHub

IchigoSodaで動かすプログラムはこちら

'THUV uploader every 5 seconds 10 CLT:D=5*60 20 GSB@TH:V=(ANA(2)-310)/2 21 IF TICK()>D GSB@SEND:CLT 30 ?T,H,V 40 WAIT12 60 GOTO20 'for T and H 600 @TH:U=95:LET[U],#062C,#4401,#8808,#884A,#4350,#0C00,#4770:U=#800+U*2 610 R=I2CR(#45,U,2,#700,6):[0]=17500:[1]=PEEK(#700)<<8|PEEK(#701):T=USR(U+2,#800)-4500:[0]=10000:[1]=PEEK(#703)<<8|PEEK(#704):H=USR(U+2,#800):RTN 'for sakura.io 800 @SEND:LET[0],2593,19457,T,H,V,0:C=0:FORI=0TO11:C=C^PEEK(#800+I):NEXT:[6]=C:?I2CR(79,#800,13,#820,3):RTN 'for LCD 25 CLS 35 GSB@LC 900 @LC:LET[96],640,64,#5639,#C6C,#C080,64:?I2CW(62,#8C3,5)+I2CW(62,#8C0,3,#900,16)+I2CW(62,#8C8,3,#920,16):RTN 'Fukai Index 31 T=T/10:H=H/100:F=T-T*19/100+(T-T/100-143)*H/100+463 32 ?"Fukai Index:";F/10

sakura.io、1パケットで64bit幅の数値が送れるので、16bitの数値3つをまとめて送信できます。XORを使ったCRCの計算もポイントです。


再び福井で集結、jigインターンOB/OG同期達!

心も身体も洗えるBBQ - jigintern2018’s diary
jigインターン、じっくり開発する2週目に突入!

エンジニアの休日のお楽しみと言えば、ハッカソン!
jigインターンDay6の恒例行事、今年は平成最後の国体、福井国体をテーマに6チームで楽しく開発・発表・懇親会!


今年の6チーム、5分ずつの発表動画です!


優勝チームは、子供でも参加できる炬火リレーという斬新な切り口で、テープLEDと赤外線通信によるリレーのプロトタイプを実現!
こどもたちが自分で作って、リレーして回ったりするのも楽しそう!副賞は、jig帽子!


誰もが参加できる国体に!クイズ国体。福井国体にも興味がわき、ちょっと自慢できる知識が手に入るすぐれもの。公式と合わせたデザインも良かった。 副賞は、勝手提供の完全食 COMP(グミ or 粉)。


3位はやりがいを可視化する、やりがいチーム!
なぜか福井県の最低賃金と同数のポイントで溜まっていくポイント!時は金なり。自分の時間、何に投資するかの判断基準にもできそう。 副賞は、やりがいあるエバンジェリスト活動のために、IchigoJam&すべてのこどもたちへプログラミングを「PCN」シール!


テーマは福井国体。


全国各地から駆けつけてくれるインターンOB/OG、お土産提供者には与えられる、自己紹介タイム!


たくさんのお土産、ありがとう!!


まずはインプットとアイデア出し。付箋紙で思いついたアイデアをどんどんかいて、テーブルを移りながらいろいろアイデアを深めます。 その後、いい感じのアイデアを各テーブルから発表してもらって、人気投票。上位6プロジェクトでいい感じにチームが分かれて、開発スタート!


お昼!


開発!


開発!


社員運営チームとOB/OG!


開発!


開発!


はんだごてのオアシスも活躍!


開発!


開発!


開発!


炬火リレーのプロトタイプ!


可能性広がる、テープWS2812B x IchigoSoda!


盛り上がりを音量で可視化するIoTのプロトタイプ。WROOM-02使用!


IoTで参加できる、楽しいカウントダウンのプロトタイプ!


開発後は懇親会、乾杯!


久しぶり!懐かしい話、技術な話、まじめな話。世代を超えて楽しめるって良いですね!


ハッカソン後には撮り忘れた記念撮影!

今年もいよいよスタート、高専生活最高の思い出づくりに挑戦、jig.jp 高専インターン2018!

全国13高専から16名の高専生。


集合場所は、鯖江、jig.jp本店、めがね会館。


ウェルカムパーティーは、福井になんと27店舗!やきとりの名門、秋吉


写真映えするやきとり。小さく量を食べるのが秋吉流。

Day2は、楽しい企画会議、ウォームアップにGoogleMapsを使った高専マップと13高専を表す地図アプリのソースコードを紹介。

GoogleMapsで全国高専マップ!

マップアプリハンズオン資料も見ながら進めるだけで、誰でも簡単マップアプリづくり。

Innovative Tomorrow」のゲストは舞鶴高専出身、さくらインターネット田中さんでした!
衛星オープンデータ化プロジェクトを紹介!

全国高専キャンパスのオープンデータを使って、高専マップづくりへと応用してみました。 現在のGoogleマップの衛星写真は田中さんが言っていたように、アメリカの衛星写真が使われていて利用規約が別途定められていますね。

jig.jp高専インターン2018マップ!


Innovative Tomorrow」非同期共演、プログラミング入門、アナログ入力と条件分岐編として福井高専出身、福野も出演。良い高専の日となりました。
女優さんもIchigoJamはんだづけ! 光るアイスのプログラミングと録画できるデジタルメガネ - Innovative Tomorrow

ここから3週間、毎日インターンブログもスタート!
jig.jp インターン2018始まります! - jigintern2018’s diary

株式会社jig.jp、15回目の株主総会と取締役会。 今までの2人代表制を1トップ化し、事業展開の高速化を図り、 私は新たに設けた会長職に就任、次の15年を見据えた広域な価値創造にコミットする新体制がスタートです。

福野泰介 新肩書
株式会社 jig.jp 取締役会長(株式会社 A Inc. 取締役 / 株式会社 B Inc. 代表取締役社長)
英語表記:jig.jp co., ltd. chair Taisuke Fukuno
※オープンデータや、IchigoJamなど、事業構築中のグループ会社 B Inc. は社長継続


社内全メンバーと株主の方へ、IchigoJam 15th anniversary edition をプレゼント。
BASICのスピードが気になるならば、Armマシン語を使ってフルパワーを出し切りましょう。

Armマシン語でハローワールド
HELPコマンドでメモリマップを確認

HELP MEM MAP #000 CHAR #700 PCG #800 VAR #900 VRAM #C00 LIST

まずは画面の左上(VRAM:#900)に一文字表示させるマシン語

R3=#9 R3=R3<<8 [R3+R1]=R0 RET

からハンドアセンブルするか、asm15でアセンブルして、メモリに書き込み実行!

POKE#700,9,35,27,2,88,84,112,71 U=USR(#700,ASC("A"))

プログラミングの楽しさが伝わりづらい「ハローワールド」を、ちょっとひねって、大文字を小文字に変換するプログラムにしてみます。

R3=#9 R3=R3<<8 @LOOP R2=[R0+R1] R2-34 IF 0 GOTO @END R2+=#20 [R3+R1]=R2 R3+=1 R0+=1 GOTO @LOOP @END RET

終了記号がダブルクォート(アスキーコード34)なのがポイントです。
どんなモダンな言語でプログラミングしようとも、マシン語レベルではGOTO分岐とGOTOループが基本なのだと気がつけます。

POKE#700,9,35,27,2,66,92,34,42,4,208,32,50,90,84,1,51,1,48,247,231,112,71 U=USR(#700,"HELLO WORLD")

スペースがアットマークに変わってしまう問題に気が付きました?どう直すといいでしょう?
ヒント:Cortex-M0 Armマシン語表 (asm15表記、抜粋)と試行錯誤!
参考:はじめてのマシン語 - IchigoJamではじめるArmマシン語その1

1段ギアが上がった、スピードのjig、ツールのjig。
ミッションは不変の「利用者に最も近いソフトウェアを提供し、より豊かな社会を実現する」
これからもよろしくおねがいいたします!

IchigoJam、jig.jp 15周年記念版!

"Hello World!" に替わる、プログラミングの世界への新しい入口、"LED1"


すっきりした基板!ピン名称が読みやすい!


LPC1114FDH28をはんだづけ。フラックスを使うと意外といけます。


あとは、いつものように、サクサク楽しくはんだづけ!


改良版基板を先取り!ピンソケットまわりが広がっていて、はんだづけしやすい。


電源スイッチが強化され、microUSBの足を曲げずにはんだづけもできるようになってます。


カラーリングはお好みでどうぞ。

すべてのこどもたちへ、プログラミングを!
学生も、おとなも、シニアの方も!

links
- IchigoJam
- jig.jp夏のインターン鯖江で働くエンジニア、共に募集中です!)

ネットからイチゴを振って、呼び鈴を鳴らすIoTのつくりかた。

まずはイチゴづくり。隣の黒いのは何でしょう?


物理にドット絵が描いて作れる「クイックセルズ879円〜@Amazon


IchigoJamのキャラクターコード255、イチゴの形にリアルにドットを並べて、水を掛けて、乾くまで待つ。


付属のスタンドをサーボにテープでくっつける。裏面の穴に差し込んで固定。


プログラムと配線、ともに簡単!(参考、サーボをあやつるPWM - IchigoJamプリント

10 N=IoT.IN() 20 IF N PWM 2,N 30 GOTO 10

(IchigoJam BASIC 1.2β IoTコマンド使用 with sakura.io)


IoTで左右に揺らせるイチゴのポップ完成。


100均に売っていた呼び鈴をサーボをスマホからネット経由でコントロールして叩く!


jig.jp 15th! イチゴの日。

links
- jig.jp
- jig.jpロゴに隠されたひみつ - jig.jp 10周年

間もなく16期を迎えるjig.jp、今回は鯖江に全員集合してキックオフ!
いざこういう時にさっとランチ場所を伝える方法がないことに気が付き、マップを作成。
漠然としたデータから、誰かのためを思ったデータをセレクトすることで価値がでます。


鯖江駅ランチマップ」徒歩でいけるオススメスポット
「編集モード」ボタンを押して、いろいろ編集すると簡単にURLで共有できるマップができます。

利用シーンに特化したアプリづくり、大事ですね。
網羅的なオープンデータとの接続など、いろいろ拡張していけそうです。


この日、霧に包まれ幻想的な鯖江市、まるで、電脳コイルの舞台、大黒市のよう。


未来のSUI(Spatial User Interface)を先取りする、Windows MRによるVR体験会、人気でした!
VR出社も夢じゃない!

jig.jp、2019年4月入社となる新卒エントリーページをオープン!

新卒採用案内 | スマホ(Android/iPhone)アプリ・携帯アプリならjig.jp(ジグジェイピー)

コンテンツ:代表の想い、募集要項、弊社エンジニアの声、座談会、使用技術、使用言語!
jig.jp本店、鯖江の開発センターの雰囲気にビビっと来た人のエントリー、待ってます!

今日の一日一創は、JavaScriptで無いものづくり。

シンプルなアセンブリ言語を「IchigoJamではじめるArmマシン語入門」の解説用に使っていたら、作ってCC0で公開してくれたboxheadroomさんによるasm15アセンブラ! GitHubに載せてオープンソースでオープンライセンスな気軽に使えるWebアプリとして、必要に応じて成長させています。

ターゲットデバイスへのプログラムのバイナリを記述するためのフォーマット、IntelのHEXフォーマットと並ぶ、SRECフォーマット(モトローラSフォーマット、とも呼ばれる)への対応追加!

IoTに最適Arm Cortex-M0からLinuxが動いちゃうCortex-M7までのシームレス感が美しいSTM32の開発環境整備の一貫です。


asm15」 SREC format supported!!

コードを書き足し、テストして、GitHubへコミット!
検索してあえば使う、無ければ創って、共有する。
エンジニアの醍醐味です。

新卒採用案内 | スマホ(Android/iPhone)アプリ・携帯アプリならjig.jp(ジグジェイピー)

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