БлогNot. Бесконечный лес на Javascript :)

Помощь дата->рейтинг Поиск Почта RSS канал Статистика nickolay.info Домой

Бесконечный лес на Javascript :)

Модель "лесного пожара" используется в прикладной математике как одна из типичных динамических моделей.

Реализуем её на JS, возможно, не совсем канонически задав параметры "леса" (плотность начального заполнения деревьями, скорость роста деревьев, вероятность возгорания, все значения от 0 до 1 включительно). Полученную модель анимируем обычными средствами <canvas> и таймером.

Вот приложение в работе и полный исходник (без обрамляющих тегов HTML).

Ваш браузер не поддерживает тег Canvas

<canvas id="forestcanvas" width="600" height="600">
Ваш браузер не поддерживает тег Canvas
</canvas>
<script type="text/javascript">
var forest = {
 X: 60, Y: 60, //размеры леса в клетках
 x: 10, y: 10, //размеры клетки - см. на размеры канвы в пикселах!
 propTree: 0.618, //плотность начального заполнения деревьями от 0 до 1
 propTree2:  0.01, //скорость роста деревьев от 0 до 1
 propBurn: 0.0001, //верятность возгорания от 0 до 1
 trees: [],
 colors: ['rgb(255,255,255)', 'rgb(0,255,0)', 'rgb(255,0,0)'],
 timeInterval: 20 //интервал обновления, милиисекунд
};
 
for (var i = 0; i < forest.Y; i++) { //начальное заполнение деревьями
 forest.trees[i] = [];
 for (var j = 0; j < forest.Y; j++) {
  forest.trees[i][j] = Math.random() < forest.propTree ? 1 : 0;
 }
}
 
function drawForest (forest) {
 var canvas = document.getElementById('forestcanvas');
 var c = canvas.getContext('2d');
 for (var i = 0; i < forest.X; i++) {
  for (var j = 0; j < forest.Y; j++) {
   c.fillStyle = forest.colors[forest.trees[i][j]];
   c.fillRect (forest.y*j, forest.x*i, forest.y*(j+1), forest.x*(i+1));
  }
 }
}
 
function setForest (forest) {
 var to = [];
 for(var i = 0; i < forest.Y; i++) {
  to[i] = forest.trees[i].slice(0);
 }
 //новый лес на следующем шаге:
 for (var i = 0; i < forest.Y; i++) {
  for (var j = 0; j < forest.Y; j++) {
   if (to[i][j] == 0) { //пусто
    forest.trees[i][j] = Math.random() < forest.propTree2 ? 1 : 0;
   } 
   else if (to[i][j] == 1) { //растёт
    if (
     ((i>0) && (to[i-1][j] == 2)) ||
     ((i<forest.Y-1) && (to[i+1][j] == 2)) ||
     ((j>0) && (to[i][j-1] == 2)) ||
     ((j<forest.X-1) && (to[i][j+1] == 2))
    ) {
     forest.trees[i][j] = 2;
    } 
    else {
     forest.trees[i][j] = Math.random() < forest.propBurn ? 2 : 1; //вырос новый
    }
   } 
   else if (to[i][j] == 2) { //сгорел...
    forest.trees[i][j] = 0;
   }
  }
 }
}
 
window.setInterval( function() { setForest (forest); drawForest (forest); }, forest.timeInterval);
</script>
<noscript>Извините, Javascript отключён или недоступен в вашем браузере</noscript>

теги: javascript графика

комментарии (0)

01.10.2017, 14:46; рейтинг: 186

  в началопоиск по блогунаписать авторустатистика

Наверх Яндекс.Метрика
© PerS
вход