Интерактивная 2D и 3D модель Солнечной системы

FLASH Модель Солнечной системы

Данная модель Солнечной системы создана разработчиками в целях получения пользователями знаний об устройстве Солнечной системы и её месте во Вселенной. С её помощью можно получить наглядное представление о том, как расположены планеты относительно Солнца и друг друга, а так же о механике их движения. Изучить все аспекты этого процесса позволяет технология Flash, на основании которой создана анимированая модель Солнечной системы, что даёт широкие возможности пользователю приложения по исследованию планетарного движения как в абсолютной системе координат, так и в относительной.

Управление флеш-моделью простое: в левой верхней половине экрана находится рычажок регулировки скорости вращения планет, с помощью которого можно выставить даже отрицательную её величину. Немного ниже располагается ссылка на помощь – HELP. В модели хорошо реализована подсветка важных моментов устройства Солнечной системы, на которых пользователю стоит обратить внимание в процессе работы с нею, например, планеты выделены здесь различными цветами. Кроме того, если вам предстоит длительный исследовательский процесс, то вы можете включить музыкальное сопровождение, которое прекрасно дополнит впечатление от величия Вселенной.

В левой нижней части экрана расположены пункты меню с фазами Луны, что позволяет наглядно представить их взаимосвязь с иными процессами, происходящими в Солнечной системе.

В правой верхней части можно ввести необходимую вам дату с тем, что бы получить информацию о расположении планет на этот день. Эта функция очень понравится всем любителям астрологии и огородникам, которые придерживаются сроков посева огородных культур в зависимости от фаз луны и положения иных планет Солнечной системы. Немного ниже этой части меню располагается переключатель между созвездиями и месяцами, которые идут по краю круга.

Нижняя правая часть экрана занята переключателем между астрономическими системами Коперника и Тихо Браге. В гелиоцентрической модели мира, созданной Коперником, её центром изображено Солнце с вращающимися вокруг неё планетами. Система же датского астролога и астронома Тихо Браге, который жил в 16 веке, является менее известной, но она более удобна для осуществления астрологических вычислений.

В центре экрана расположен вращающийся круг, по периметру которого размещён ещё один элемент управления моделью, исполнен он в виде треугольника. Если пользователь потянет этот треугольник, то у него появится возможность выставить необходимое для изучения модели время. Хотя работая с этой моделью вы и не получите максимально точных размеров и расстояний в Солнечной системе, но зато она очень удобна управляется и максимально наглядна.

Если модель не помещается в экран вашего монитора, вы можете уменьшить её, одновременно нажав клавиши “Ctrl” и “Минус”.

Ещё одна «Солнечная cистема» на HTML5 Canvas

Перед Новым годом на хабре были опубликованы два топика (первый, второй) о создании «Солнечной системы» на HTML5 Canvas. Бегло прочитав их и изучив результаты профилирования я удивился тому что такая простенькая программа так неэффективно работает. Вооружившись Notepad++ решил проверить всё ли так плохо, написав свою реализацию.

ТЗ остаётся всё тем же. 12 планет, период обращения первой — 40 секунд, каждой последующей на 20 секунд дольше. Изначально планеты имеют случайное расположение на своих орбитах. У каждой планеты есть описание, которое отображается при наведении курсора на неё. При клике на планету она останавливается. Если курсор находиться над орбитой — подсветить её. Всё это должно работать в Opera 12+, IE9+, Chrome и FF.

— Я не хочу ничего читать, давай результат!
— Держи: жмяк

Приступим. Создаю новую директорию в публичной папке Dropbox. Стандартно делю проект на каталоги js/css/img, в корне создаю файл main.html, который объединяет набор скриптов в одно целое.

Первые строчки

В наследие от предыдущих реализаций мне достались три картинки: солнце, задний фон и тайлы планет (на самом деле картинок больше). Отлично, теперь нужно как-то загрузить ресурсы в приложение, а за одно и описать структурные объекты. К слову, объектов у меня будет четыре: Point, Orbit, Planet и Tile. По порядку о каждом. Point это служебный объект, имеет два поля, x и y — положение точки на холсте, и несколько методов:.set(), .clone(), .getDis() — установить значения координат, клонировать объект и посчитать расстояние до другой точки. Объект Orbit содержит центр орбиты, её радиус и планету, которая движется по ней. (В идеале орбиты должны описываться формулами, но это в идеале, а у меня все орбиты — окружности). Третий объект — Planet. Планета имеет имя, точку расположения центра на холсте, радиус, скорость перемещения, и угол наклона в градусах. Последний объект Tile хранит изображение и четыре значения описывающие положение рисунка планеты на изображении: координаты верхнего левого угла, высоту и ширину. Тайл обладает методом .draw(x, y), который рисует его на холсте в указанной точке.

Что бы не писать для каждого объекта свой сетер, я решил считерить и создать функцию .setProperty() в прототипе Object. Функция добавляет новые поля и меняет значения у старых.

Вернёмся к загрузчику изображений. С его реализацией я замораживаться не стал, и сделал традиционным методом: при добавлении нового изображения увеличиваю счётчик добавленных изображений, после загрузки изображения — счётчик загруженных. Если значения счётчиков совпали, то всё ресурсы загрузились и можно стартовать приложение. Есть у это разгрузчика один большой минус, нельзя динамически подгружать данные, но в моём случае в этом нет необходимости.

Планеты

Пришло время рисовать планеты, но сначала их нужно инициализировать. Создаём новый экзмепляр объекта Planet, в него передаём орбиту, радиус планеты и время полного вращение вокруг центра системы (в секундах), а так же дополнительные свойства: имя, тайл и контекст. Солнце, кстати, тоже планета, но с нулевым радиусом у орбиты.

Отлично, теперь есть планеты, но вот проблема, они ещё не умеют двигаться и не знают как нарисовать себя. Нужно исправить! Создаю функцию render(lastTime), которая принимает время последнего обновления сцены. Ренден запускает методы отрисовки у планет и следит за временем. Далее в прототипе Planet создаю метод .redner(deltaTime), который принимает время, прошедшее с последнего обновления сцены. Функция рассчитывает положение планеты с учётом времени и рисует планету в обновленных координатах. Так же на будущее создаю функцию .showInfo() для отображения информации о планете.

Запускаю, исправляю ошибки, опять запускаю и ура: планеты кружатся вокруг статичного Солнца.

Осталось совсем чуть-чуть: отобразить орбиты, анимацию их выделения и отображение информации о планетах. Нужна информация о мыше, а именно куда она движется, движется ли, нажаты или отжаты ли кнопки на ней. За её поведением над канвасом будет следить MouseController. Имея информацию о координатах указателя можно определить событие hover. Если модуль разности положения курсора и центра орбиты меньше некоторого значения (у меня это 14px), то это и есть hover. Теперь если событие ховер присутствует, то рисуется окружность вокруг центра орбиты линией пожирнее, та часть её, над которой находиться планета удаляется и на этом месте рисуется ещё одна окружность вокруг, но уже вокруг планеты планеты. Если ховера нет, то рисуется цельная окружность худой линией.
С отображением описания планет всё проще. Определяем над какой планетой находится курсор, и этой планеты вызываем .showInfo(). Есть одно но, подсказку на холст нужно рисовать последней, иначе другие объекты могу нарисоватся поверх неё.

Выводы

В теории идея где каждый элемент рисуется на определенное полотно должна обеспечить лучшую производительность, и наверняка это так для объёмных приложений. Но в маленьких приложениях это правило не работает, там где нет сложных анимаций незачем создавать много полотен.
Результаты профилирования на моём ПК (AMD Athlon64 х2 4600+ 2,4GHz, GeForce 210).
Оригинал:

На LibCanvas (похоже что у него ограничение в 60 fps):

Моя реализация: