Реалистичный ландшафт в 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); }
