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

Вход на сайт

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

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

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

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

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

Рейтинг@Mail.ru Яндекс.Метрика
Среда программирования: 
HTML 5 + JavaScript

Двумерная и трехмерная анимация, создаваемая как традиционными, так и компьютерными методами, основана на одном и том же принципе: если ряд статичных изображений показать в достаточно быстром темпе, то человеческий глаз свяжет их вместе и примет за непрерывное движение.

Наиболее очевидный и распространенный вид анимации в компьютерной графике – это спрайтовая анимация.

Спрайт — графический объект в компьютерной графике, чаще всего растровое изображение, свободно перемещающееся по экрану.

Наиболее простой вид спрайта – это прямоугольное изображение. Для начального его определения необходимо задать размер и положение.

Перемещение спрайта по экрану определяет изменение координат его положения с течением времени.

Т.е. необходима функция, которая срабатывает с определенным интервалом времени. И такая функция в JS есть, и не одна.

  • setTimeout позволяет вызвать функцию один раз через определённый интервал времени.
  • setInterval позволяет вызывать функцию регулярно, повторяя вызов через определённый интервал времени.

setTimeout
Синтаксис:

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)
Параметры:

func|code - Функция или строка кода для выполнения. Обычно это функция. По историческим причинам можно передать и строку кода, но это не рекомендуется.

delay - Задержка перед запуском в миллисекундах (1000 мс = 1 с). Значение по умолчанию – 0.

arg1, arg2… - Аргументы, передаваемые в функцию.

Отмена через clearTimeout
Вызов setTimeout возвращает «идентификатор таймера» timerId, который можно использовать для отмены дальнейшего выполнения.

Синтаксис для отмены:

let timerId = setTimeout(...);
clearTimeout(timerId);

setInterval
Метод setInterval имеет такой же синтаксис как setTimeout:

let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...)
Все аргументы имеют такое же значение. Но отличие этого метода от setTimeout в том, что функция запускается не один раз, а периодически через указанный интервал времени.

Чтобы остановить дальнейшее выполнение функции, необходимо вызвать clearInterval(timerId).

Пример анимации линейного спрайтового движения:

Файл index.html:

<html>
<head>
    <meta charset="utf-8" />
 <script src="test.js"></script>
</head>
  <body onload="init()">
    <canvas id="tutorial" width="500" height="500"></canvas><br />
    <input type="button" onclick="start()" value="Пуск">
    <input type="button" onclick="stop()" value="Стоп">
  </body>
</html>

Файл test.js:

var x;
var Idint;
var ctx;
 
function init(){
  x=10;
  ctx = document.getElementById('tutorial').getContext('2d');
}
 
function draw() {
  ctx.fillStyle = 'white';
  ctx.fillRect(x,10,50,50);
  x=x+3;
  ctx.fillStyle = 'blue';
  ctx.fillRect(x,10,50,50);
}
 
function start() {
  Idint = setInterval(draw, 100);
}
 
function stop() {
  clearInterval(Idint);
}

Смотреть пример

В действительности лучше отображать меньшее количество кадров в секунду, но сделать это количество постоянным. Дело в том, что наш глаз воспринимает небольшие отклонения в частоте, и несколько выпавших кадров режут глаз больше, чем более низкое количество кадров в секунду. Вот здесь на помощь приходит встроенный в HTML5 API requestAnimationFrame.

Преимущества requestAnimationFrame
requestAnimationFrame дает браузеру возможность контролировать, сколько кадров он может обработать. Вместо того, чтобы требовать от браузера отображать кадры, которые в итоге выпадут, вы разрешаете ему показывать кадры тогда, когда они обработаны, и с постоянной частотой. Польза от этого двояка:

  • Анимация выглядит более плавной, поскольку уровень кадров в секунду остается постоянной.
  • Процессор не перегружается задачами по рендерингу, а может обрабатывать и другие задачи во время рендеринга анимации. Вообще браузер может определить тот уровень кадров в секунду, который будет оптимален для задач, которые браузер выполняет одновременно с анимацией.

Синтаксис:

let requestId = requestAnimationFrame(callback)
Такой вызов планирует запуск функции callback на ближайшее время, когда браузер сочтёт возможным осуществить анимацию.

Пример анимации линейного спрайтового движения:

Файл test.js:

var x;
var Idint;
var ctx;
 
function init(){
  x=10;
  ctx = document.getElementById('tutorial').getContext('2d');
}
 
function draw() {
  if (x<450) {
  ctx.fillStyle = 'white';
  ctx.fillRect(x,10,50,50);
  x=x+3;
  ctx.fillStyle = 'blue';
  ctx.fillRect(x,10,50,50);
  Idint = requestAnimationFrame(draw);
  } else {cancelAnimationFrame(Idint);}
}
 
function start() {
  Idint = requestAnimationFrame(draw);
}
 
function stop() {
  cancelAnimationFrame(Idint);
}