たった130行のコードだけでリアルな地形を作り出す

2014.05.21 14:00
  • このエントリーをはてなブックマークに追加

140519_130terrain.jpg


神様もこんなプログラムを使ったに違いない。

Hunter Loftisさんが制作したこのサイトにアクセスすると、リアルタイムで岩でできたような山脈と湖の地形が生成されます。ただの1枚の画像を毎回表示してるだけではなく、毎回ちゃんと計算してレンダリングして、この大山脈を作り出してるんです。ぜひ何度かリロードしてみてください。

インタラクティブなウェブサイトが制作できる「JavaScript」が使われており、約130行のコードでたったの約4KB。ドイツのプログラミング大会で優勝した64KBのリッチなCGアニメーションや、たったの4KBのアニメーションを思い出しますよね。

このプログラムで使用しているのは「ダイヤモンド-スクエア法」と呼ばれる手法で、正方形を4つに分割していき、その中心点をランダムな位置にずらしていくことで、自然にできたようなフラクタルの図形を作ることができるんです。これはコンピュータグラフィックにおいて、リアルな地形や雲などを生成する際によく用いられる手法だそうです。それに形を加えたり、視点を変えたり、光や影をササッと加えるだけで、このプログラムが作られたみたい。

常識的には何時間もかけてやる仕事も、要領良く賢くこなしていけば、少ない手順でできるものですね。


source: IDEA*IDEA via PlayfulJS

(徳永智大)

  • このエントリーをはてなブックマークに追加
  • よくわかるJavaScriptの教科書
  • たにぐち まこと|マイナビ
  • スクラビングバブル ジャバ 2つ穴用
  • ジョンソン