Доброго времени!
Я всегда очень любил котов, и любил их рисовать, особенно морды кошачьи. Чуть изменишь форму, линию — и совершенно другое выражение, другое настроение. У меня листы А4 были изрисованы под предел. И тут мне недавно стукнуло в голову — а что если сделать генератор морд котов? Чтобы нажал на кнопочку и тебе выкинется случайная морда кота. Как можно более случайная и интересная. Давайте же посмотрим, как же сделать такую штуку.
Прошу под кат, любители котов.
Читать полностью »
Рубрика «canvas» - 15
Генератор случайных котов за 8 шагов
2013-09-25 в 9:24, admin, рубрики: 95%, canvas, game development, javascript, коты, котэ, котята, рандом, хорошее настроение, метки: 95%, коты, котэ, котята, рандом, хорошее настроение 
Для всех, кому прохладного дождя за окном в эти дни мало, Marek Brodziak сделал забавное демо на js + canvas (демо #1, демо #2 — и сразу предупреждаю, что заработать может не во всех браузерах), которое имитирует капли дождя на стекле. Своей целью разработчик ставил добиться лучшей плавности анимации капель.
Для достижения наилучшего эффекта погружения смотреть демо рекомендуется предварительно открыв в соседней вкладке raining.fm.
Читать полностью »
Карта Московского Метро на Canvas
2013-09-14 в 19:33, admin, рубрики: canvas, dbcartajs, html5, javascript, mosmetro, Веб-разработка, карта метро, метки: Canvas, dbcartajs, html5, mosmetro, карта метро Идея попробовать нарисовать карту появилась после просмотра карты метро в Википедии в формате SVG. В Firefox она открывается долго, к тому же при разрешении 1600x1300 она не вмещается в экран, а скроллинг по ней работает тоже очень долго. Стало интересно, а в Canvas она тоже будет тормозить? Решил нарисовать свою версию карты метро в качестве очередного демо для проекта dbCartajs.
Читать полностью »
Esboza — векторный редактор online & фреймворк (Часть вторая)
2013-08-13 в 6:20, admin, рубрики: canvas, html5, javascript, ненормальное программирование, метки: Canvas, html5, javascript .gif "Esboza — векторный редактор online & фреймворк (Часть вторая)")
Это продолжение предыдущей статьи. Когда я писал первую статью об «Esboza» в голове вертелось — «Почти всё готово, осталось немножко всякой фигни по мелочам». Прошло три года. Сейчас в голове — «Вот теперь точно почти всё готово!».
Звездное небо на dbCartajs
2013-08-10 в 19:53, admin, рубрики: canvas, dbcartajs, html5, javascript, proj4js, starry sky, Веб-разработка, звездное небо, метки: Canvas, dbcartajs, html5, javascript, proj4js, starry sky, звездное небоПочему
В этой статье я хочу более подробно рассказать о примере [Starry Sky] (Звездное Небо), реализованном с помощью скриптов dbCartajs. Он включает в себя идеи других «звездных» проектов, которые были портированы на JavaScript. Рассмотрим их подробнее. Алгоритм формирования звездного неба был позаимствован из проекта Marble KDE плагин stars), расчет положения планет построен на основе замечательной статьи шведского астронома Поля Шлетера, модель движения космических аппаратов SGP4/SDP4 предоставлена модулем satellite-js (проект в github), формулы солнечного терминатора (ночной зоны) взяты с астрономического форума. Вид орбит как эллипсов подсмотрен у Сelestia.
Читать полностью »
Туториал по JavaScript движку для создания игр Cocos 2D: Инициализация проекта
2013-08-05 в 20:47, admin, рубрики: 2d игры, 2D-движок, canvas, game development, html5, javascript 
Начинаю знакомство с показавшимся интересным 2D движком для создания игр на JavaScript — Cocos 2D. Далее буду переводить стандартный туториал, возможно, подмешивая собственными примерами и ремарками. Надеюсь, тем кому нужно или интересно — пригодится.
Читать полностью »
Убийственная вкладка в Chrome
2013-08-03 в 12:10, admin, рубрики: canvas, Google Chrome, Веб-разработка, метки: Canvas, Google ChromeНавеяно топиком Незакрываемая вкладка
Недавно во-время написание своего проджекта случайно создал много-много больших элементов canvas. Как следствие перезапускал свою OS.
Решил проверить и действительно не у одного меня такие симптомы от посещение ссылки — зжираеться вся оперативная память и активно используется хард диск. Иногда хром просто падает.
Относительно мобильных браузеров то chrome / safari / opera на iOS и андроиде, то они просто выключаются.
Карта с проекциями из Proj4js на Canvas
2013-07-19 в 18:59, admin, рубрики: canvas, egaxegax, html5, javascript, map, proj4js, projection, Веб-разработка, карта, проекции, метки: Canvas, egaxegax, html5, javascript, map, proj4js, projection, карта, проекцииИдея
Решил написать пост о популярном нынче Canvas из HTML5 и о своем проекте dbCartajs, его использующем. Почему Canvas? Немного истории. Прежде для создания изображений, иллюстрирующих различные расчетные модели (например, вывод окружности по радиусу и центру в координатах, вывод многоугольника с количеством вершин N и площадью S, вывод окружности на сферу и т.д.), я и мои коллеги по работе в институте использовали различные элементы управления из разных сред разработки: PictureBox их VB6, QPainter и QCanvas из Qt, Canvas из Tk и, наконец, создание изображений по mapfile из MapServer. Позже после знакомства с возможностями HTML5 я решил перейти на использование Canvas и Web-разработку с JavaScript. Удобно — для отладки и разработки нужен лишь браузер. Собравшись с силами и вооружившись документацией от W3C, я переписал часть функционала компонентов, которые мы используем в работе, на JavaScript, оформив это в проект dbCartajs на GitHub. Код реализован в виде объекта dbCarta, чтобы использовать его как виджет на страницах без копирования частей исходного кода.
Читать полностью »
Интересные аспекты развития JavaScript и веб-технологий 2013-го года
2013-07-18 в 14:59, admin, рубрики: canvas, grunt, headtracking, javascript, jslint, testing, web workers, браузерные игры, веб-аналитика, Веб-разработка, метки: Canvas, grunt, headtracking, javascript, jslint, testing, web workers, браузерные игрыВсем доброго дня!
Проанализировав множество блогов, докладов, презентаций, посетив пару конференций и пообщавшись на них с веб-разработчиками разного профиля, я выделил для себя основные направления в области JavaScript-разработки, которые активно развиваются или только начинают развиваться (и, по моему мнению, им стоит уделить внимание в целях ознакомления). Цель статьи – осветить их, и дать пищу для размышлений, как именно полученные знания можно было бы применить на практике.
Карта на Canvas
2013-07-15 в 10:14, admin, рубрики: canvas, html5, javascript, метки: Canvas, html5, javascriptНе так давно, для одного проекта потребовалось написать карту, которая будет отвечать следующим требованиям:
- Плавная прокрутка
- Подгрузка областей карты
Мне пришлось потратить несколько дней на то, чтобы определиться в том, как лучше всего решить данную задачу.
В итоге я остановился на canvas.
Я потратил долгое время на поиски в интернете аналогичных решений, но к моему удивлению ничего подобного не нашлось.
В результате я решил написать все сам, с нуля.
К сожалению первая версия оказалась тормознутой слишком медленной, движения карты, в некоторых браузерах, были скачкообразными.
В новой версии я учел все ошибки, и в итоге мне удалось добиться того, что карта соответсвовала заявленным требования.
Читать полностью »