Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

Спасибо за статью. Я не Ваш студент. Но мне она помогла написать функцию для Канторова множества на Python для черепашки: import turtle def kanter(x, y, d):     if d > 1:         turtle...
Как реализовать в данном примере границы расчёта?

Счетчики и рейтинг

Рейтинг@Mail.ru Яндекс.Метрика
Язык программирования: 
Javascript
Среда программирования: 
JetBrains WebStorm 2016.1.1

<html>
    <head>
        <title>Animated radiation</title>
		<style> 
		body {background-color: #6495ED} 
		</style>
    </head>
    <body>
 
	<script src="fabric.js"> // подключаем библиотеку fabric
	</script> 
 
        <canvas  height='930' width='1900' id='c'> 
	</canvas> 
 
		<script>
 
    (function() {
    var num = 700, // количество элементов
    items = new Array(num), // объявляем массив размерности num
    myfps = 60, // максимальный фреймрейт
    updateTime = 1000 / myfps, // частота обновления счётчика фреймрейта
 
    canvas = this.__canvas = new fabric.Canvas('c', { // инициализация канваса fabric
    renderOnAddRemove: false, // этот параметр даёт прирост в производительности, т.к  
                                   // повторно рендерить нам ничего не нужно
    selection: false
    }),
 
    maxx = canvas.width, // задаём границы генерации элементов (ширина / высота холста)
    maxy = canvas.height,
    msg, startTime, prevTime, ms, frames; // объявляем переменные
 
    msg = new fabric.Text('FPS: 0/' + myfps, { // инициализация объекта класса fabric.Text
    fontFamily: 'Arial', // задаём параметры
    fontSize: 24,
    fill: 'white',
    left: 50,
    top: 35,
    selectable: false // не "выбирается" при нажатии
    });
    canvas.add(msg); // добавляем объект на холст 
 
    fabric.Image.fromURL('Radiation.png', itemGen); // подгружаем исходный файл для 
                                                  // будущих объектов класса Image
 
    mouse_pos = { x: 0, y: 0 }, // координаты начальной позиции курсора мыши
    canvas.on('mouse:move', function(options) { // обработка события движения мыши
    mouse_pos = canvas.getPointer(options.e); // передаём координаты положения курсора 
                                                       // переменной
    });
 
    function itemGen(img) { // функция генерации объектов
    for (var i = 0; i < num; i++) { // каждую итерацию создаётся 
        var img = new fabric.Image(img.getElement(), { // объект класса fabric.Image с 
                                                               // изображением, подгруженным выше
        left: Math.random() * maxx, // задаём начальное расположение каждого объекта с 
                                              // помощью рандомайзера
        top: Math.random() * maxy, // Math.random возвращает значение в пределах [0,1)
        selectable: false // не "выбирается" при нажатии
        });
        img.vx = 0; // обнуление смещения
        img.vy = 0; 
        canvas.add(img); // добавляем на холст
        items[i] = img; // каждую итерацию новый объект присваивается соответствующей 
                         // ячейке массива items
    }
 
    frames = 0; // начало отсчёта кадров для высчитывания fps
    startTime = Date.now(), prevTm = startTime; // Date.now возвращает количество 
                                           // миллисекунд с 1.1.1970 UTC до момента вызова,
                                           // это количество фиксируется в prevTm
    animate();
    }
 
  function animate() { // функция анимирования
      for (var i = 0; i < num; i++) { 
          var item = items[i]; // обращаемся к элементу массива - экземпляру класса Image
          var dx = item.left - mouse_pos.x; // определяем дистанцию от курсора по x
          var dy = item.top - mouse_pos.y; // определяем дистанцию от курсора по y
          var vx = item.vx; // дублируем параметр изменения координат объекта
          var vy = item.vy;
 
          if (dx * dx + dy * dy <= 10000) { // если радиус до мыши <= 10000
              vx += dx * 0.01; // то увеличиваем параметр на сотую часть смещения
              vy += dy * 0.01;
          }
          vx *= 0.95; // уменьшаем его, чтобы движение не было хаотичным и быстрым
          vy *= 0.95;
 
          vx += Math.random() - 0.5; // увеличиваем на случайное значение, которое может 
                                          // быть и отрицательным,
          vy += Math.random() - 0.5; // т.к. Math.random возвращает значение в пределах 
                                                 // [0,1)
 
          var x = item.left += vx; // присваем координаты с окончательным смещением 
                              // новой переменной
          var y = item.top += vy;
 
          if (x < 0 || x > maxx || y < 0 || y > maxy) { // если вышли за границы холста,
              var r = Math.atan2(y - maxy / 2, x - maxx / 2); // то r - угол в радианах, 
                                            // отсчитываемый против часовой стрелки от положительного 
                                            // направления оси X до точки
              vx = -Math.cos(r); // берём отрицательный косинус от r
              vy = -Math.sin(r); 
          }
 
          item.vx = vx; // обратно присваиваем элементу изменённые в этот тик координаты
          item.vy = vy;
    }
 
    var time = Date.now(); // снова узнаём количество миллисекунд с 1.1.1970 UTC
    ++frames; // увеличиваем количество кадров
    //вычисление фреймрейта на каждый тик
    if ( time > prevTm + 1000 ) { //если разница между вызовами больше одной секунды,
        fps = Math.round( ( frames * 1000 ) / ( time - prevTm ) ); // то fps равен округлённому 
                                                          // значению количества кадров на одну секунду,         
                                                          // делённую на разницу в вызовах Date.now
        prevTm = time; // значение второго вызова становится "предыдущим"
        frames = 0; // количество кадров обнуляется
 
        msg.setText("FPS: " + fps + "/" + myfps); // вывод фреймрета текущего тика на экран
    }
 
    fabric.util.requestAnimFrame(animate, canvas.getElement()); 
    canvas.renderAll();
  }
  })();
 
        </script>
    </body>
</html>

Прикрепленный файлРазмер
Sokolova_Radiation.zip151.94 кб