Реалистичный ландшафт в 130 строчках на JavaScript

Minecraft, Terragen, Skyrim и любой авиасимулятор используют свои генераторы ландшафта. Благодаря фрактальному генератору PlayfulJS каждый может почувствовать себя в роли Бога. [демо] [исходный код]

Ландшафт генерируется в виде карты высот, двухмерной матрицы значений, которые соответствуют высоте каждой точки на плоскости. С такой простой структурой данных можно отображать картинку любым способом: canvas, webgl и т.д. Главное ограничение — невозможность прокладывать туннели, пещеры и тому подобные вещи в ландшафте.

function Terrain(detail) {
  this.size = Math.pow(2, detail) + 1;
  this.max = this.size - 1;
  this.map = new Float32Array(this.size * this.size);
}

Алгоритм можно применить на любых размерах карты, но разработчики рекомендуют использовать степень 2 плюс 1.

Сам алгоритм работает по простому шаблону: разделяем территорию на четыре части и изменяем их высоту на случайное число. Далее проделываем ту же операцию с каждой из четырёх частей, каждый раз уменьшая диапазон случайных чисел, так что сначала генератор создаёт наиболее крупные детали, а затем — всё менее заметные. Это алгоритм случайного смещения средней точки на плоскости (midpoint displacement).

PlayfulJS работает даёт лучший результат, потому что в некоторых случаях делит территорию не на квадраты, а на ромбы.

divide(this.max);

function divide(size) {
  var x, y, half = size / 2;
  var scale = roughness * size;
  if (half < 1) return;

  for (y = half; y < self.max; y += size) {
    for (x = half; x < self.max; x += size) {
      square(x, y, half, Math.random() * scale * 2 - scale);
    }
  }
  for (y = 0; y <= self.max; y += half) {
    for (x = (y + half) % size; x <= self.max; x += size) {
      diamond(x, y, half, Math.random() * scale * 2 - scale);
    }
  }
  divide(size / 2);
}

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.