Язык программирования:
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.zip | 151.94 кб |