Graphics2D.js — объекты, интерактивность, анимация на canvas… И ничего лишнего

[@Gerh]

Неплохо бы демо.

> Что удивляет даже меня самого — неплохая производительность: анимация начинает ощутимо тормозить начинает при 2-3 тысячах.

На каком железе? В каком браузере? А вообще, попахивает LibCanvas'ом.

[@Keyten]

Firefox (в Chrome ещё быстрее).
Демо уже добавил (под кодом ссылки на jsfiddle), можете там крутить количество итераций и смотреть.

> А вообще, попахивает LibCanvas'ом
В каком плане? Функции похожи?

[@Gerh]

> Пути рисуются одним из трёх вариантов:

Например, вот этим. Я искренне не понимаю, зачем делать 3 варианта сделать одно и то же, и при этом создавать внутри методов проверки на вид присланных аргументов. _parsePath сожрёт весь процессор :) Такой подход годится лишь для анимации одного-двух объектов, игру на таком не сделаешь.

Кстати, если во время анимации быстро вывести мышь из круга и снова навести, все размеры анимации ломаются :)

[@Keyten]

Вообще говоря, я изначально хотел реализовать полный SVG, т.к. легко переносить SVG-фигуры, ну и на ходу сочинять несложно. Вполне человекопонятный формат… Но потом понял, что реализация займёт больше, чем задумывалось, так что вынес в плагин.
Второй вариант тоже задумывался как такой человекопонятный, но немного другой… Вроде как что удобно — то и использовать.
Третий же изначально вообще подразумевался как удобный для генерации (там были имена свойств f, arg), но потом он тоже превратился в человекопонятный…
_parsePath вызывается только при создании самого пути, проверки на тип простые, так что я не думаю, что сожрёт весь процессор :)

Анимация да, там даже в коде комментарий про это есть ). Ломается из-за отсутствия очереди событий… Сделаю, как только решу, как именно.

[@Gerh]

Почему Вы сделали апдейт через setTimeout? Для этого есть window.requestAnimationFrame же. Установка и исполнение таймеров весьма затратно.

[@Keyten]

А про requestAnimationFrame я просто забыл :)

Спасибо, реализовано github.com/keyten/Graphics2D/commit/87d9988b0e5771ef93cee28c6f986a988894441d
Для анимации также реализую, пока появилась мысль, как её ещё оптимизировать, думаю.

[@Jabher]

Ээх, велосипеды.
pixi.js возьмите, там и 20 тысяч спрайтов спокойно будут тянуться :)
www.goodboydigital.com/pixijs/bunnymark/ — у меня фпс начинает всаживаться (с 60 до 57 фпс, но все же) на где-то 30к, насколько помню, меньше 25 кадров в секунду — это 50к зайцев.

[@Keyten]

Честно говоря, разработка начиналась аж 2 года назад, когда велосипедом это ещё не было :)
Потом на некоторое время пропало свободное время, и вот оно наконец появилось…

PixiJS — вполне естественно, т.к. там WebGL (а это, если не ошибаюсь, практически прямой доступ к видеокарте).

Я подумаю над WebGL-рендером. Тем более, непосредственно за рисование в Graphics2D отвечают всего 5-6 функций.

[@Jabher]

да, именно, там фолбэк до канваса, если нет webgl. потому он и лучше для быстрой графики, к тому же — большое сообщество.

проблема таких велосипедов не в том что они хуже, а в том, что не поддерживаются. Я вот с vue.js мучаюсь. Он проще, быстрее и эффективнее ангуляра, но реально мешающие баги автор очень медленно исправляет.

[@Keyten]

О, интересная библиотека (про vue.js). На беглый взгляд напоминает Ractive.js

Собственно, сам Graphics2D начался с проблем с одним из таких фремйворков ( вот этого: jcscript.com/ ), в определённый момент мне пришла мысль — а почему бы не написать свой?
Сам Graphics2D собираюсь поддерживать, как минимум, пока не пофикшу максимум (прошу прощения за тавтологию) багов, всех, что найду, и не реализую несколько интересных мне идей в плагинах.

[@Lertmind]

Оригинал КДПВ.

[@Aiki]

new Date().getTimeOfDay();

Uncaught TypeError: undefined is not a function

[@Keyten]

Разумеется, это псевдокод :)

Date.prototype.getTimeOfDay = function(){
  var h = this.getHours();
  if(h <= 3 || h > 23)
     return "ночь";
  if(h > 3 && h < 11)
     return "утро";
  if(h >= 12 && h < 17)
     return "день";
  return "вечер";
}

[@Magistr_AVSH]

Сейчас вам конечно же скажут про то, что модифицировать стандартные прототипы — плохо :)

[@Keyten]

Обязательно скажут :)
Но здесь это необходимо для совместимости и работающего кода.

[@Ogoun]

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

Win x64, Opera последняя.

[@Keyten]

Баг, во всех браузерах, из-за отсутствия очереди анимаций (пока над ней думаю). То есть, анимация уменьшения запускается до окончания анимации увеличения, в итоге получается вот так.
Уже сообразил, как пофиксить, сделал :)

jsfiddle.net/9v63govv/4/

Теоретически ещё может, но практически — ничего не заметил.

[@domix32]

какие преимущества перед cocos2d-html5?

[@Keyten]

Cocos2D — игровой движок, а Graphics2D — фреймворк для рисования. И больше ни для чего.
То есть, звуков, физики… в самой библиотеке точно не будет, а вот в плагинах могут появиться ).

В Cocos2D же...

Scene management (workflow)
Transitions between scenes
Sprites and Sprite Sheets
Effects: Lens, Ripple, Waves, Liquid, etc.
Actions (behaviours):
Trasformation Actions: Move, Rotate, Scale, Fade, Tint, etc.
Composable actions: Sequence, Spawn, Repeat, Reverse
Ease Actions: Exp, Sin, Cubic, Elastic, etc.
Misc actions: CallFunc, OrbitCamera, Follow, Tween
Assets manager (hot update)
Basic menus and buttons
Integrated with physics engines: Chipmunk and Box2d
Particle system
Skeleton Animations: Spine and Armature support
Fonts:
Fast font rendering using Fixed and Variable width fonts
Support for .ttf fonts
Tile Map support: Orthogonal, Isometric and Hexagonal
Parallax scrolling
Motion Streak
Render To Texture
Touch/Accelerometer on mobile devices
Touch/Mouse/Keyboard on desktop
Sound Engine support (CocosDenshion library) based on OpenAL or WebAudio on web
Integrated Slow motion/Fast forward
Fast and compressed textures: PVR compressed and uncompressed textures, ETC1 compressed textures, and more
Resolution Independence
Modularized engine for customization
Open Source Commercial Friendly: Compatible with open and closed source projects
OpenGL ES 2.0 (mobile) / OpenGL 2.1 (desktop) based
Full WebGL support and auto canvas fallback

www.cocos2d-x.org/wiki/Cocos2d-JS

Graphics2D это простой фреймворк, который можно понять, бегло пролистав документацию, даже без её чтения понять код… Ну и, разумеется, очень несложно использовать.
Но всё, что он делает — рисует (хотя, ещё раз повторюсь, плагины будут расширять эту функциональность во все стороны)).

А вот Cocos2D — это большой внушительный инструмент, с физикой, эффектами, WebGL, скелетной анимацией, частицами, тайлами, параллаксом, звуком…

Всё зависит от того, что хотите делать вы :).

[@unel]

Интересно) а есть ли какие преимущества/недостатки перед paperjs, например? Или просто захотелось создать своё?

[@Keyten]

Захотелось своё, да). Но не только.

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

Во-вторых: на мой взгляд, в пейпере много лишнего. Например, импорт SVG или выделение путей — они нужны не всем и каждому.
Имхо, вынести дополнительную функциональность в плагины — более удачная идея; чем я сейчас и занимаюсь для graphics2d.

Недостатки — у graphics2d сейчас функциональность немного пониже. Думаю, это будет недолго.

Это из того, что на виду и легко назвать :)

[@TheShock]

Ну как я и говорил, это имеет мало смысла.
Базовые векторные операции в красивой обёртке хороши для демок на сайте, а юзать их на практике — я почти не видел такого и таких фреймворков тьма)
Чисто так поучиться писать на JS — похвально)

[@Keyten]

Я попробую добавить что-нибудь интересное)
А опыт в самом деле очень неплохой, да :)