某研究所

いろいろ作ってみます。 開発メモ 更新情報

- Google Map -
地震まっちゃ(地震のマップとチャート)、 自由地図(分布地図)

- Rails -
Memolet(コンテンツ管理)

- WebGL(オンラインゲーム) -
Neko Online

- WebGL -
猫の迷路、 いろあわせ、 Tiny World、 混ぜたん戻して、 宝石の迷宮

- WebGL(鑑賞用) -
星かご(星のシミュレーション)、 森の子(木のシミュレーション）
熱拡散、 光蟲

- WebGL旧作 -
一旦削除します


  • Firefoxでの閲覧を推奨します。その他のブラウザでは動作確認していません。(Chromiumの方がスムーズに動く場合があります)
  • 個人情報や重要情報のやり取りは一切ありません。
  • モバイルフレンドリーではありません。PCの大きな画面でご覧ください。
  • 本サイトは個人で運営しています。いかなる団体とも関係ありません。

地震まっちゃ(まっぷ&ちゃーと)

地震のマップとチャート(グラフ)で地震まっちゃです。
本サイトの特徴は以下になります。

  • 一ヶ月を超える長期間の震源をGoogle Map上に表示できます。
    また、地震の件数と規模の内訳の推移をチャート表示できます。
  • 地図は震源の件数が増えると表示に時間がかかります。
    チャートは日数が増えると表示に時間がかかます。
  • 緯度・経度、規模・深さ、地名などによって震源を絞り込むことができます。
  • チャートは件数だけでなく割合でも表示できます。
  • 地図の横幅、縦幅を大きくできます。
  • 地図とチャートはページを画像として保存できます。

  • 気象庁(JMA)の地震情報(暫定・確定)と
    ヨーロッパ地中海地震学センター(EMSC)の地震情報、
    アメリカ地質調査所(USGS)の地震情報を見ることができます。
  • 気象庁の暫定とEMSC、USGSについては自動更新です。

  • 世界各地の稼働中の原発を地図上に表示できます。
  • 世界各地の1900年以降のM7.0以上の地震を地図上に表示できます。

自由地図

分布地図が簡単に作れます。
汎用的なツールなので、いろんな分野で利用できると思います。

  • データはテキストで、住所と名称とマーカーの情報をカンマで区切ればOKです。
  • マーカーは3種類の形、10種類の色、4種類の大きさから選べます。
  • データを分割してそれぞれ表示・非表示を切り替えることができます。
  • 地図の横幅、縦幅を大きくすることができます。
  • ページを画像として保存できます。
  • 住所から座標への問い合わせをキャッシュします。再表示は早いです。

Memolet

とってもチープかつシンプルなCMS(コンテンツ・マネジメント・システム)です。いろいろ開発する上でのメモ用に作りました。

Neko Online

オンラインゲームです。

  • 遊び方はNeko Onlineを参照してください。

猫の迷路

1階層が6x6、10階層の迷路です。

  • プレイヤーは猫です。
  • 操作は↑で前進あるいはスピードアップ、↓でスピードダウンあるいは後退、←で左方へ向きを変える、→で右方へ向きを変えます。
  • shift + 矢印でカメラを操作できます。shift + ↑で近づく、shift + ↓で離れる、←で左に回り込む、→で右に回り込むです。

いろあわせ

パズルゲームです。
隣り合う板の色を合わせるゲームです。

  • 7x7のマス目に板を並べていきます。
  • ↑↓←→で板を動かします。shift+←→で板を回転します。enterで板の位置を決定します。
  • 隣り合う板の色があっていれば+10点。違っていれば-10点になります。
  • 全てのマスに板を並べ終わったら、ゲーム終了です。
  • WebGLライブラリのthree.jsを使ってます。

混ぜたん戻して

パズルゲームです。
混ぜられた立方体の並びを元に戻してください。

  • 立方体が6x6x6=216個並んでます。色は6色です。
  • 最初のレベルは1で、レベルの回数混ぜるので、元に戻してください。
  • レベルが上がると混ぜる回数が増えていきます。混ぜたら戻す、混ぜたら戻すという繰り返しでゲームを進めます。
  • カーソルを操作することで立方体を回転させます。カーソルの位置は、立方体の色が明かるくなります。
  • ←→でカーソルの向きを変え、↑↓でカーソルの場所を変えます。スペースでカーソル位置の立方体を90度回転できます。シフト+スペースで逆回転です。
  • マウスでグリグリ視点を変えられます。

Tiny World

小さな世界を探索します。

  • 平面世界
    • プレイヤーは毛玉です。模様は、三毛、キジトラ、サバトラ、茶トラ、黒白からランダムです。
    • 操作は↑で前進あるいはスピードアップ、↓でスピードダウンあるいは後退、←で左方へ向きを変える、→で右方へ向きを変えます。Spaceで地上ならジャンプ、水中なら潜水します。
    • マップ上のコインや宝石や猫を取ることで点数が加算されます。コインが10点、正四面体が40点、立方体が60点、正八面体が80点、正十二面体が120点、正二十面体が200点、猫が1000点です。中には取れないものもありますが、仕様です。
    • 昼と夜があり、3分毎に切り替わります。
    • 体力があり、時間とともに減っていきます。水中では倍、夜は更に倍の速さで体力が減ります。体力が0になるとゲームオーバです。
    • 体力はハートを取ることで100回復します。
    • 星を取ると、コインや宝石や猫を取った時の点数が最大10倍になります。星は夜に生成されます。
    • 毛玉の模様や地形、地形の模様はSimplex Noiseで生成してます。
    • 水面のゆらぎはThree.jsのサンプル内のWater.js使ってます。
  • 平面世界(シェーダ頑張ってみたVer.)
    • プレイヤーは毛玉です。模様は、三毛、キジトラ、サバトラ、茶トラ、黒白からランダムです。
    • 操作は↑で前進あるいはスピードアップ、↓でスピードダウンあるいは後退、←で左方へ向きを変える、→で右方へ向きを変えます。ジャンプ、潜水できません。
    • マップ上のコインを取ることで点数が加算されます。コインは10点です。宝石はありません。
    • 毛玉の模様や地形、地形の模様はSimplex Noiseで生成してます。毛玉の方はThree.jsのサンプル、地形の方はwebgl-noiseのコードです。
    • 水面のゆらぎはThree.jsのサンプル内のWater.js使ってます。
    • 昼と夜があり3分毎に切り替わります。昼は雲、夜は星が楽しめます。
  • 球面世界
    • プレイヤーは毛玉です。模様は、三毛、キジトラ、サバトラ、茶トラ、黒白からランダムで。単色は外しました。
    • 操作は↑で前方、↓で後方、←で左方に向きを変える、→で右方にに向きを変えるです。ジャンプできません。
    • 水の中を歩けます。
    • まだ、プレイヤーの操作の処理がうまくできてません。いくらか操作していると、動きがおかしくなります。

宝石の迷宮

宝石のタイルでできた20x20の迷路です。

  • 操作は四方向の矢印キーのみです。↑が進む、←が左を向く、→が右を向く、↓が後ろを向くになります。
  • プレイヤーは正四面体、立方体、正八面体、正十二面体、正二十面体の5種類で、形も色もランダムです。
  • タイルはプレイヤーの周囲(±5の範囲)しか表示しません。プレイヤーが歩くことでタイルの色が赤系統から緑系統に変わります。

星かご

星の遊覧と、星の運行シミュレーションです。
操作できません。

  • 星の遊覧
    • シェーダを使ってガスを表現しました。ガスのノイズはwebgl-noiseのシンプレックスノイズを使ってます。
    • 星はThree.jsサンプル内のSimplex Noiseを使って並べてます。
    • 星の数は1万5000個です。
  • 星の運行シミュレーション
    • 画面中央に重力源を置き、星が運行する様子をシミュレーションしてます。
    • 星の間の重力も考慮していますが、衝突は考慮していません。
    • マウスでグリグリ視点を変えられます。
    • GPU使って計算してないので、星の数は300個です。
  • 星の運行シミュレーション(GPU版)
    • 画面中央に重力源を置き、星が運行する様子をシミュレーションしてます。
    • 星の間の重力も考慮していますが、衝突は考慮していません。
    • マウスでグリグリ視点を変えられます。
    • GPUを使って星を64x64=4096個描画してます。
    • 遠くへ散ってしまった点は、中央に戻るようにしてます。
  • WebGLライブラリのthree.jsを使ってます。

森の子

　森の散歩と、木の成長シミュレーションあります。

  • 森の散歩
    • プレイヤーは猫です。色はランダムです。
    • 操作は↑で前進あるいはスピードアップ、↓でスピードダウンあるいは後退、←で左方へ向きを変える、→で右方へ向きを変えます。
    • shift + 矢印でカメラを操作できます。shift + ↑で近づく、shift + ↓で離れる、←で左に回り込む、→で右に回り込むです。
    • 空の青さと木陰を楽しめます。ちゃんと設定したので、途中で影がなくなったりしません。
    • 木の葉と花は、インスタンスを使って大量生成しています。
    • BoxField.jsを改良して、少し奥行きを増やしてます。
  • 木の成長シミュレーション
    • WebGLの3D環境で木の成長する様子をシミュレーションします。操作はできません。
    • 木の葉or花の色は、赤、緑、青、黄色、桃色、空色の中からのランダムです。木ごとに色を変えてます。
    • シェーダを使って、50本の木を30000の線と点で描画してます。
    • 一定確率で木を生成し直すことで、成長段階の異なる木を混在させてます。
  • WebGLライブラリのthree.jsを使ってます。

熱拡散

熱拡散のシミュレーションです。

  • 21x21x21の格子状に点を並べてます。
  • 初期データはシンプレックス・ノイズで生成してます。
  • データはlog取ったあとに-1〜1を青〜緑〜赤の色にマップしてます。
  • WebGLライブラリのthree.jsを使ってます。

光蟲

虫の群れのシミュレーションです。 観賞用です。

  • 虫の群れの飛行シミュレーション
    • 適当に作ったら虫っぽかったのでいろいろやってみました。
    • 画面中央を中心にただ飛び回るだけだったり。色ごとにリーダを用意したり、さらにボスを用意したりで、3パターンほど用意しました。
    • 光点の総数は30000個です。
    • マウスでグリグリ視点を変えられます。
  • 棒の群れの飛行シミュレーション
    • 光点を棒に置き換えただけです。これはこれで面白かったので。
    • 棒の総数は20000本です。
  • 三角の群れの飛行シミュレーション
    • 光点を三角に置き換えただけです。これは少し物足らない感じです。
    • 三角の総数は10000枚です。
  • WebGLライブラリのthree.jsを使ってます。