Pull to refresh
  • by relevance
  • by date
  • by rating

Карта с проекциями из Proj4js на Canvas

Website development *JavaScript *Vector graphics *Canvas *
Sandbox
Решил написать пост о популярном нынче Canvas из HTML5 и о своем проекте dbcartajs, его использующем. Почему Canvas? Немного истории. Прежде для создания изображений, иллюстрирующих различные расчетные модели (например, вывод окружности по радиусу и центру в координатах, вывод многоугольника с количеством вершин N и площадью S, вывод окружности на сферу и т.д.), я и мои коллеги по работе в институте использовали различные элементы управления из разных сред разработки: PictureBox их VB6, QPainter и QCanvas из Qt, Canvas из Tk и, наконец, создание изображений по mapfile из MapServer. Позже после знакомства с возможностями HTML5 я решил перейти на использование Canvas и Web-разработку с JavaScript. Удобно — для отладки и разработки нужен лишь браузер.
imageimage
Читать дальше →
Total votes 9: ↑9 and ↓0 +9
Views 6.9K
Comments 3

Звездное небо на Canvas

Website development *JavaScript *Vector graphics *Canvas *
В этой статье я хочу более подробно рассказать о примере Starry Sky (Звездное Небо), реализованном с помощью скриптов dbcartajs (о них написано в предыдущей статье). Он включает в себя идеи других «звездных» проектов, которые были портированы на JavaScript. Рассмотрим их подробнее. Алгоритм формирования звездного неба был позаимствован из проекта Marble KDE (плагин stars), расчет положения планет построен на основе замечательной статьи шведского астронома Поля Шлетера, модель движения космических аппаратов SGP4/SDP4 предоставлена модулем satellite-js, формулы солнечного терминатора (ночной зоны) взяты с астрономического форума. Вид орбит как эллипсов (мгновенная орбита) подсмотрен у Сelestia.
Starry Sky
Читать дальше →
Total votes 9: ↑7 and ↓2 +5
Views 9.7K
Comments 3

Карта метро Москвы на Canvas

Website development *JavaScript *Vector graphics *Canvas *
Идея попробовать нарисовать карту появилась после просмотра карты метро в Википедии в формате SVG. В Firefox она открывается долго, к тому же при разрешении 1600x1300 она не вмещается в экран, а скроллинг по ней работает тоже очень долго. Стало интересно, а в Canvas она тоже будет тормозить? Решил нарисовать свою версию карты метро Москвы в качестве очередного демо для проекта dbcartajs.

image
Читать дальше →
Total votes 73: ↑50 and ↓23 +27
Views 35K
Comments 40

HTML5 Canvas Схема пригородного движения ж/д сообщения Москвы и МО

Website development *JavaScript *Vector graphics *Canvas *
Ещё одна схема движения железнодорожного транспорта с использованием возможностей Canvas и dbCartajs.
Moscow Rail Map

В оригинале она называется Moscow Underground and Commuter Rail Map, её можно видеть в тамбурах подмосковных электричек. Изначально я хотел реализовать именно эту карту в качестве очередного демо к проекту dbcartajs, но в Сети нашёл лишь копию карты, снятую на мобильный телефон с неважным качеством. Зато с легкостью нашел с десяток схем Московского метро. Самая красивая, на мой взгляд, в Википедии, самая неказистая оказалась почему-то у Яндекса с его-то возможностями. Собственно SVG-вариант из Википедии я и переделал под Canvas, о чем писал в предыдущей статье.
Читать дальше →
Total votes 28: ↑23 and ↓5 +18
Views 21K
Comments 22

Звездное Небо на Canvas. Созвездия

Website development *JavaScript *Vector graphics *Canvas *
Продолжение темы, начатой в предыдущей статье. Идеей к ее развитию послужило прочтение статьи на Хабре «LibCanvas: На пути к звёздам», где описывается реализация планетария на Canvas с выводом созвездий и планет в геодезической системе координат (с координатами точки наблюдения, азимутом и высотой над горизонтом). В посте автор дает ссылку на базу данных звезд и созвездий, которой я любезно воспользовался. Файл содержит координаты прямого восхождения (Right Ascension, в часах) и склонения (Declination, в градусах) звезд, точек созвездий и их названий. Я перевел их в радианы и сохранил в файл constellations.js для своего «звездного» проекта Starry Sky.

Starry Sky
Читать дальше →
Total votes 29: ↑25 and ↓4 +21
Views 18K
Comments 3

Звездное небо на WebGL с использованием Three.js

Website development *JavaScript *Canvas *WebGL *
В посте про «Звездное небо на Canvas» я уже описывал свой проект, где при помощи JavaScript на канвасе 2d формируется изображение глобуса Земли на фоне звезд, планет и орбит космических аппаратов. Для создания трехмерной картины звездного неба на плоскости я использовал формулы перевода трехмерных координат X, Y, Z отображаемых объектов: звезд, планет, космических аппаратов (КА), — в плоские декартовые координаты X, Y. Основную часть этих формул я взял из проекта Marble из состава KDE. Портированный с C++ на JavaScript код я сохранил в файле starry.js.

Starry Sky 3D
Читать дальше →
Total votes 22: ↑21 and ↓1 +20
Views 20K
Comments 4

Карта метро Москвы. SVG-версия

Website development *JavaScript *Vector graphics *Canvas *
Продолжаю тему разработки векторной (по координатам в градусах) карты для браузера dbcartajs. В новой версии библиотеки (v2) я перевел отрисовку объектов с канваса на svg. И переделал несколько примеров, в частности карту метро Москвы.

В своем посте про канвасную версию карты метро я сравнивал ее с svg-версией из Википедии, сделав акцент на скорости загрузки, которая у канваса оказалась выше. Но воспроизведя карту через svg-обработчик в новой версии проекта, я понял, что скорость загрузки, пожалуй, единственное преимущество канваса перед svg.

image
Читать дальше →
Total votes 19: ↑18 and ↓1 +17
Views 22K
Comments 20