S.F. Page

Programming,Music,etc...

静的ブログジェネレータはなんとか進めてる - jekyllのような静的ブログジェネレータをnode.jsで作る(4)

静的ブログジェネレータの製作は何とかかんとか飽きずに進めている。よってブログ更新も滞りがちである。 今のところの成果は以下に格納。 テストサイト レポジトリ かなりいろいろいじっているので、どこをどうしたかもはやわからなくなっているが、一応書…

OneDriveのimageのembedで得られるurlが404になっていた。ブログ用の画像保管場所としては使えんな。。

表題の件、悲しいなぁ。。 OneDriveには保存した画像をブログに貼り付けるためのURLを生成する機能がある。私はこれを使って画像を貼り付けている。 Embed files directly into your website or blog しかしこの機能を使って生成したURLがいつのまにか「404 …

非同期プログラミングは難しいね。やっぱり。 - jekyllのような静的ブログジェネレータをnode.jsで作る(3)

静的ブログジェネレータの製作は進めている。 進捗は以下のとおりである。 はてなブログのデータをエクスポートするコード -> ほぼ完成 エクスポートしたデータを静的ブログジェネレータ用データに変換するコード -> ほぼ完成 静的ブログジェネレータ本体 ->…

ディープ・ラーニング

インターフェース2017年8月号をAmazonで購入。インターフェースは私が唯一買っている雑誌である。 今月号の特集はディープ・ラーニングであった。しかしインターフェースという雑誌はかなりソフトよりな内容になったな。。 ただ私には難しくて、内容は一読し…

途中経過 - jekyllのような静的ブログジェネレータをnode.jsで作る(2)

静的ブログジェネレータはぼちぼちと作っている。そのせいで、ブログの更新も滞りがちだ。。 作成は、下記の各フェーズの設計・コード書きを同時並行で進め、完成に近づけていく。 ブログデザインを作る はてなAPIで吸い出したデータをいったんmarkdown形式…

jekyllにヒントに、静的ブログジェネレータをnode.jsで作ろうと思う

動機 おとといくらいからまたブログの引っ越しをしたくなってきたのである。 前からやろうとして果たせていないことだけど。 私は 完成したブログ・システムを構築できるほどの高いモチベーションはない。が、「出来合いのもので満足できない機能があれば手…

故障に備え、ハードディスクを入れ替えた

私は過去に1TBのHDDが壊れたことがある。その時はダメ元でUltimate Boot CDで復活できるところは復活して、あとはバックアップから戻すことでほぼ復旧した。 blog.sfpgmr.net 今のところは故障なく使えているが、HDDというのは消耗品なのでいつ故障してもお…

「ひこうき雲」はすごいアルバムだなぁと思う

最近荒井由美(松任谷由美)の「ひこうき雲」をよく聴いている。 Youtubeでひこうき雲のマルチトラックテープを本人とキャラメル・ママのメンバー、そしてプロデューサーの有賀さん、エンジニアの吉沢さんと当時を振り返りながら聴く動画を観て、なんかいい…

canvasのgetImageDataで得られるImageData オブジェクトについて

自前3Dコードはcanvasに描画しているが、これはプリミティブを描画するメソッドを使用しているのではない。 canvasにはビットマップ・メモリを読み書きする仕組みがあり、それを使ってJSからピクセル単位で書き込みを行っている。 canvasの2dコンテキストに…

canvasでWebGLを使わずに立方体を描く

canvasでWebGLを使わずに立方体を描く WebGL2.0を勉強するうちに、3Dグラフィックスに関しての基本知識がなさすぎることを痛感した私は、理解すべくいろいろな書物やWebを読み、陰面処理をされた立方体をcanvasで描いてみることにした。 結果は以下のとおり…

コード整理とrollupによるビルド環境をnpm(package.json)で作る

ここ2-3日WebGL2.0のコード整理を行い、コメント付けをしていた。さらにモジュール化を行った。 https://bl.ocks.org/sfpgmr/47c33ee5ac5199e126fa6a6b2f974f80 ブラウザ限定で考えるならば、もうimport/exportって大丈夫かな?と思ったけど動くのはSafariだ…

three.jsを使うのをやめWebGLで書き直すことにする。

ここまではthree.jsを使って実装してきた。 実際のところthree.jsを使うと、WebGLや行列、ベクトルは意識しなくても実装できるようになっている。ただシェーダーを直にいじるとか、低レベルな実装をする場合はthree.jsの内部構造も意識して実装しなくてはな…

THREE.ShaderMaterialによる改良版が一応完成に至る。- Overpass APIとthree.jsで地図を3D表示(7)

バグの発生 下の動画を見ていただくとわかると思うが、上面のテクスチャマップがうまくいかない問題が発生した。 この問題はテクスチャ番号として「3」を指定した時に発生する。テクスチャ番号0-2ではなぜか発生しない。 今一度、今回の取り組みを解説してお…

ShaderLib、ShaderChunk、UniformsLibを使ってTHREE.ShaderMaterialの実装を端折る - Overpass APIとthree.jsで地図を3D表示(6)

THREE.ShaderMaterialを試すための環境を作り、試す。 アイデアを実現するための検証環境を作って試行錯誤した。結果、所望の動作をさせることができた。テクスチャが伸縮することなく、ExtrudeBufferGeometryのamountに応じてテクスチャが貼り付けることが…

THREE.ShaderMaterialを使って諸問題の解決を試みようと思う - Overpass APIとthree.jsで地図を3D表示(5)

Open Street Mapの3D表示にチャレンジしている中で、表現的に一番気になるのはビルの高さに応じてうまくテクスチャが貼り付けられないことである。 これはthree.jsがuv座標に応じてテクスチャを伸縮してくれているからであるが、そのおかげで高いビルだと…

はてなブログAtomPub APIの非公式node.jsラッパーの改造。はてなブログ記事の一括更新。

動機 去年だったかおととしだったか、ドメインをenoie.netからsfpgmr.netに変更した。はてなブログの古い記事には古いドメインのリンクがかなりあって、リンク切れとなってしまった。 よく読まれている記事は手メンテで修正したが、量的に結構あり、すべてを…

テクスチャ・マップを工夫して表示品質の向上と高速化を両立する - Overpass APIとthree.jsで地図を3D表示(4)

前回はジオメトリをまとめることによって表示の高速化を達成したが、そうするとマテリアルが1種類しか選べず、表示品質が劣化してしまった。 これを何とかして、高速化した状態を維持したまま、前々回の表示品質並みの表現ができるように工夫してみた結果が…

表示領域の拡大と高速化に取り組む - Overpass APIとthree.jsで地図を3D表示(3)

表示領域の拡大と高速化に取り組んでみた。 なんとか大阪環状線の周囲まで表示してみたかったので、コードをいろいろ改良してみた。 Overpass APIから受け取ったデータをthree.jsのメッシュに変換するところは処理は重いが、変換が終わればサクサク動くと思…

Overpass APIとthree.jsで地図を3D表示(2)

スカイボックスを追加し、ビルにテクスチャを貼り付けてみた。リアルとは言えないが、雰囲気は出てきた。 大きい範囲を描画しようとすると相当に処理が重い。最適化しないといかんかな。。まあでも縦スクロールシューティングではかなり狭い範囲を描画するの…

Overpass APIとthree.jsで地図を3D表示

下の記事のコードをベースに、OverPass APIとthree.jsを使って、建物を3D化して表示してみた。 qiita.com 表示してみた結果は以下の通り。 参考にしたコードは、建物の高さデータを利用していなかったので、利用するようにしたのと、高さデータがないものは…

Open Street Map(OSM)周りのJSライブラリを調べる

背景の描画を省力化するために地図データから街並みを作ることを試みようとしている。OSMであれば建物を上から見た形状データがあるので、それをY方向に膨らまして屋根と壁にテクスチャを貼り付ければ、手っ取り早く背景マップができるのではないか。Google…

GISデータ(Open Street Mapのデータ)を活用して背景を描いてみることにする

シューティングゲームの内容を考える前に、グラフィック・リソースをどのように確保するかを考えていた。グラフィック・リソースが用意できないことにはゲームは作れない。その中でももっとも重要なのが背景である。縦スクロールシューティングは大量の背景…

CRT風ポストエフェクトを追加してみる

Shader Toyのコードを拝借して若干手を加え、CRT風ポストエフェクトを追加してみた。比較のために画面の右半分だけにエフェクトを追加している。 元のポストエフェクトのコードは以下。 https://www.shadertoy.com/view/4scSR8 なかなかレトロな雰囲気を醸し…

背景をスクロールしてみる

今日は背景をスクロールさせてみた。 Blenderのアドオン「amasawa tools」の「make buildings」で背景を作って、スクロールしてみた。パースがきちんとかかるのは3Dならでは。 今回は3Dビューだが内容は2Dの縦スクロールシューティングとなりそうであ…

弾を発射してみる

弾を発射してみた。 ZキーまたはコントローラのAボタンで弾を発射できる。四角いワクはバウンディングボックスである。 動くデモ: http://github.sfpgmr.net/2dshooting2/devver/20170414/ レポジトリ: github.com 2D風スクロール・シューティングとなるよ…

DOGA-L1で適当に作った3DキャラクタをBlnederで加工、エクスポートし表示してみた。

DOGA-L1で適当に作った3DキャラクタをBlnederで加工、エクスポートし表示してみた。 一応下が動くデモ。カーソルキーかゲームコントローラで上下左右に動くのみ。 http://github.sfpgmr.net/2dshooting2/devver/20170412/ ちょっと視野角を狭めて、2Dっぽく…

ゲーム登場キャラクタのグラフィック作成にかける労力を削減する方法を検討する

キャラクタのグラフィックリソースを作り始める 自機キャラクタのグラフィックをblenderで作り始めた。 www.blender.org blenderはフリーのモデリングツールでは一番有名なものである。このツールを選んだ理由は過去何度かこのツールを使ったことがあるから…

キャラクターをBlenderで作り始めることにする

何はともあれ、ゲームキャラクターをまず作って、それを動かしてみることから始める。 キャラクターのイメージとしては、ゼビウスのような感じでいこうかなと思っている。 ドット絵のグラフィックエディターを使ってチョコチョコ作っていこうかなと思ったが…

飛翔鮫3D

飛翔鮫はシンプルながら、敵配置が絶妙なシューティングゲームである。パワーアップシステムもシンプルだが、敵の難易度とのバランスも良く取れている。 それを3D化したものを見つけた。私はこういうやつを作りたいんだよね。ほんとは。でもベタな2Dシュ…

私が過去製作したシューティングゲームを振り返る。

私が一番最初に作ったシューティングゲームはおそらくMZ-700のWICSという言語で作った、ミサイルコマンドもどきであったと思う。ツクモのアナログジョイスティックを購入し、その反応の滑らかさを生かしたものを作りたかったのだ。 次に作ろうとしたのが、ゼ…

縦スクロール・シューティングを作るにはマップエディタとドット絵エディタを作らんといかんなぁ。。

とりあえず開発環境を整え、古いシューティングゲームのコードを修正し、動くようにした。 ES6をbabel + browserifyでbundle.jsでまとめていたが、これをrollupに変更した。するとimport周りが動かない。 どうもイレギュラーな書き方をしてしまっていたよう…

2Dシューティングを再び作ることにする。

またちょっとHTML5でシューティングゲームを作りたくなってきて、手をつけ始めた。 github.com 縦スクロールのシューティングを作ろうと思っている。前作ったシューティングゲームもどきをベースに作ろうかなと。 しかしその「もどき」がバグだらけで今日は…

スペース・ウォーとPDP-1のグラフィックスについて

lubuntuのインストールでありえないハマりの連続で、ちょっとラズパイへの意欲が削がれてしまっている私である。 それはさておき、私は風呂に入りながら本を読むのだが、最近よく読んでいるのは「NHKスペシャル 新・電子立国〈4〉ビデオゲーム・巨富の攻防」…

レガシーBIOSの話。

はじめに lubuntuとwindows 10のデュアルブート設定をいじっていて、GPTパーティションやUEFIなど、知らないことがたくさん出てきてちょっと困った。 しかしまあ、BIOSというのはなんなのだろう。 ブート順を変えたり、ハードウェアのコンフィグレーションを…

Windows 10とlubuntuのデュアルブートで起こる障害とその解消法

うーむ。なぞだ。。 今Windows 10とlubuntuをデュアルブートで使おうと思っているんだけれども、ここ1週間障害に苦しめられていた。 障害 Windows 10でブートした後、lubuntuをブートすると、lubuntuの起動パーティションが破壊される。 どのような環境で起…

windows 10のブートマネージャーでlubuntuをブートする。

Raspberry Piのベアメタル・プログラミング環境構築は一向に進んでいない。 windows 10上でシリアル通信経由でのkermitプロトコルによるバイナリファイル転送がうまくいかないので、lubuntuをデュアルブートでインストールして試してみることにした。Hyper-V…

花粉をすごく感じる今日この頃。

今日は花粉をすごく感じる。 私は1か月以上前から、アレグラのジェネリックを飲んで、スギ花粉の時期に臨んだが、やっぱりだめだ。 鼻水は出ないけど、体はとてもダルい。そして下痢。ほんと不快この上ない。あと頭痛。 去年などは原因不明のひざ痛で、整形…

シリアル通信でバイナリファイルの転送がうまくいかない - Raspberry Pi 3 + u-boot

u-bootにはloadb,loadx,loadyというコマンドがあってそれぞれでkermit,XMODEM,YMODEMというプロトコルを使用して、PCとシリアルケーブル経由でバイナリファイル転送が行えるとのこと。 PC側はteratermやrloginなどのシリアル通信ができる端末ソフトを用意す…

Raspberry Pi 3のベアメタル・プログラミング環境の構築 - 2017/3/5の状況

Raspberry Pi 3で64bitベアメタル・プログラミングをするための環境構築をぼちぼちやっている。 環境構築の状況 JTAGデバッグはソフト・ハードともに不明点も多く、FT232HLボードまで買ったがとりあえず置いておくことにして、lubuntuでクロスコンパイルした…

ubuntu on windows (WLS)でsshdを動かす

lubuntu と windows 10間でファイル転送をするためにwindows 10側でsshdを構築した。 sshd自体はubuntu on windows上で動かすことにした。 動かすにあたっては、下のページあたりを参考にした。 qiita.com fftest33.blog.fc2.com ubuntu on windowsに特有な…

Raspberry Piの開発環境の構築状況

構築状況について Raspberry Piの開発環境であるがだいたい以下の構成になりそうである。とりあえず自分の頭の中を整理するために起こした図なので、正しいかというといまいち自信がない。 Raspberry Pi 3Raspberry Pi 3lubuntulubuntuwindows 10windows 10M…

debian+LXDEからlubuntuに乗り換える

Raspberry Piも埃を被りつつある今、私は開発用のlinux環境ををhyper-vで作ろうとして四苦八苦している。 debian 8のインストールは問題なく終わった。日本語入力も問題なくできる。 でもやっぱりdebianだから、セキュリティ設定とか結構やらねばいけないこ…

うーむ。ubuntuでハマってしまうとは。。debian + LXDEで再チャレンジする。

raspberry piのベアメタル・プログラムのクロスビルドをubuntu on windowsで行うことは工夫が必要そうだし、私にはそのスキルはないと自己判断したので、ubuntuをhyper-v上にインストールしてその上にクロス開発環境を構築することにした。そうすれば、「本…

Raspberry Pi 3のリモート・デバッグ環境構築は一向に進まないけど、まあしょうがないかな。何も知らないもんね。。

タイトル通り、一向にリモート・デバッグ環境構築は進んでいない。 数日前に、OpenOCDのWindows向けバイナリをubuntu on windows上でクロスビルドしようとして、バイナリ生成はできたものの、実行すると落ちてしまった。ここでちょっと軽く心が折れた。私の…

ARM8対応版OpenOCDをubuntu on windows上でビルドしてみている。

どうやればOpenOCDを使ってRaspberry Pi 3をベアメタル・リモート・デバッグできるのかネットを彷徨い続けた。結果以下のページを発見。 github.com ここに書いてあることはlinux上でARM8に対応したOpenOCDを使い、JTAGでRaspberry Piをリモート・デバッグす…

どうもRaspberry Pi 3 をJTAGデバッグするにはFT232HLだけではだめなのかな。。

どうもいろいろ調べながらいろいろやってみているが、ハード的にこのボードだけでJTAGデバッグができるというものではないような。。 ハードウェアのことがさっぱりなので、「できる」とも「できない」とも言えないといったほうが正確だろうか。 しかしほん…

ラズパイ(Raspberry Pi 3)でJTAGデバッグをするためにFT232HLボードを秋月で購入した。

ラズパイ3をJTAGでリモートデバッグするために必要なものはずばりJTAGインターフェースとUSBを変換するケーブルである。 ARM-USB-TINY-HとRaspberry Pi 2でJTAGデバッグした実績はあった。 qiita.com しかしRaspberry Pi 3ではこのインターフェースではデバ…

ラズパイ(Raspberry Pi )におけるベアメタル開発環境を調べる

ベアメタル・プログラミングをやってみたいと思って、どこから手を付けたらよいか考えていた。 やっぱりデバッグ環境が重要だ。コンパイルはWindows10で行って、それをラズパイに転送して実行させるのが良い。さらにはリモートデバッグを行いたい。そうしな…

ラズパイでベアメタルをしたい

こんな小さなマシンで立派なデスクトップOSが動くさまを目の当たりにしてつい興奮してしまった私であるが、このためにラズパイを買ったのではない。 ラズパイで行いたいのはずばり「ベアメタルな自作ゲーム」である。OSを介さずに自作ゲームを動かしたい…

raspbian (jessie) のPIXEL GUIは面倒な日本語設定がとても簡単にできるようになっている。

raspbian OSはWindowsのように、インストール時に言語を先に設定すれば後はお任せとはいかない。日本語を使うための設定が必要である。 日本語設定方法はネット上に大量にある。が、ネット上のリソースではraspi-config+コマンドラインによる設定が多い。し…