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

Вход на сайт

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

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

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

Не получается, емаё
огромное спасибо за подробное объяснение про 3д графику на питоне, в интернете очень мало подобной информации
dobryj den, popytalas otkryt prikreplionnyj fail ctoby posmotret kak rabotaet, no mne ego ne pokazyvaet vydajet osibku. Pochemu?
Очень интересно! ии сайт крутой жалко что умирает(
У Вас число превысит максимальное число int. Можно использовать в Вашем случае uint, но лучше все переписать на double.

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

Рейтинг@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);
}