Описание моего опыта переезда с Flash на Animate CC и создания баннеров во всемогущем формате HTML5. Много картинок под катом
Читать полностью »
Рубрика «canvas» - 8
FConsole — инструмент для отладки PIxi.js (Canvas-WebGL) приложений
2016-08-30 в 8:30, admin, рубрики: canvas, console, debug, debugging, dev tools, developer tools, DevTools, display list, DisplayList, hierarchy, pixi.js, pixijs, WebGL, консоль, отладка, разработка, метки: pixi.js, pixijsБуквально вчера выложил в открытый доступ первую рабочую версию консоли для отладки Canvas/WebGL приложений FConsole. Если вы всегда хотели редактировать свойства визуальных объектов без изменения исходного кода, а так же без сложностей просматривать всю иерархию визуальных объектов, то прошу под кат.
* На скриншоте представлена Flash-Console, которая бралась в качестве примера при разработке FConsole
Читать полностью »
В сети есть несколько похожих примеров создания спидометра, но я решил поделиться с вами своим.
Для начала нам нужно в DOM'е создать объект canvas:
Читать полностью »
Растянуть Canvas и элементы внутри него по всей клиентской области
2016-07-20 в 6:19, admin, рубрики: .net, C#, canvas, wpf, XAMLВо время работы над нашим десктопным приложением столкнулся с такой задачей: имеется элемент-график с некоторыми настройками для отображения (реализован в виде ControlTemplate подключаемого через привязку в ContentControl), к имеющимся настройкам нужно было добавить группу дополнительных. Чтобы не засорять уже имеющийся интерфейс, я решил поместить список этих настроек в элемент Expander, который, при необходимости, можно было бы развернуть, а в остальное время график занимал бы максимально возможное полезное пространство.
Один из способов размещения элементов — под катом.
Читать полностью »
Нейронные сети на Javascript
2016-07-01 в 8:18, admin, рубрики: big data, BigData, canvas, javascript, mnist, node.js, nodejs, машинное обучение, нейронные сети
Идея для написания этой статьи возникла прошлым летом, когда я слушал доклад на конференции BigData по нейронным сетям. Лектор «посыпал» слушателей непривычными словечками «нейрон», «обучающая выборка», «тренировать модель»… «Ничего не понял — пора в менеджеры», — подумал я. Но недавно тема нейронных сетей все же коснулась моей работы и я решил на простом примере показать, как использовать этот инструмент на языке JavaScript.
Мы создадим нейронную сеть, с помощью которой будем распознавать ручное написание цифры от 0 до 9. Рабочий пример займет несколько строк. Код будет понятен даже тем программистам, которые не имели дело с нейронными сетями ранее. Как это все работает, можно будет посмотреть прямо в браузере.
Читать полностью »
Оптимизируем React приложение для отображения списка элементов
2016-06-29 в 3:06, admin, рубрики: canvas, html5, javascript, mobx, React, react.js, ReactJS, reduxОтображение списка (множества) элементов на странице — это стандартная задача для практически любого web-приложения. В этом посте я хотел бы поделиться некоторыми советами по повышению производительности.
Для тестового примера я создам небольшое приложение, которое рисует множество «целей» (кругов) на элементе canvas. Я буду использовать redux как хранилище данных, но эти советы подойдут и для многих других способов хранения состояния.
Так же эти оптимизации можно применять с react-redux, но для простоты описания я не буду использовать эту библиотеку.
Данные советы могут повысить производительность приложения в 20 раз.
Ресайз картинок в браузере. Все может стать еще хуже
2016-06-08 в 15:17, admin, рубрики: apple, canvas, convolution, Google, Google Chrome, javascript, resampling, safari, supersampling, браузеры, Разработка веб-сайтов
Знакомьтесь, это Маня. Маню поразил страшный недуг и теперь она нуждается в вашей помощи. Маня росла обычной девочкой, жизнерадостным счастливым ребенком. Но чуть больше года назад врачи поставили ей страшный диагноз — алиазинг. И она стала выглядеть вот так.
Как выяснилось, виной тому стала жадность и алчность производителей браузеров, которые решили сэкономить на алгоритмах ресайза изображений и применить самые низкокачественные фильтры. Тогда Маню удалось спасти — она прошла курс последовательных не кратных двум уменьшений, что снизило алиазинг и вернуло её былую резкость. Но теперь ей снова угрожает опасность.
Интерполяция: рисуем плавные графики с помощью кривых Безье
2016-05-03 в 6:48, admin, рубрики: canvas, html, javascript, Алгоритмы, безье, графики, интерполяция, ПрограммированиеДоброго времени суток, харбачитатель.
В этой статье мне хотелось бы рассказать об одном придуманном когда-то алгоритме (или скорее всего — переизобретённом велосипеде) построенного плавного графика по заданным точкам, используя кривые Безье. Статья была написана под влиянием вот этой статьи и очень полезного комментария товарища lany, за что им отдельное спасибо.
Постановка задачи
Есть массив Y-ков точек, расположенных равномерно по оси X. Нужно получить плавный график, который проходит через все заданные точки. Пример на рисунке ниже:
Всех, кому интересно, прошу под кат.
Читать полностью »
Как ONLYOFFICE помирил два поколения формул Microsoft
2016-04-07 в 8:15, admin, рубрики: canvas, microsoft office, microsoft word, onlyoffice, ONLYOFFICE Document Editors, usability, Блог компании ONLYOFFICE, офисное по, разработка, редакторы документов, формулыКогда мы разрабатывали наши редакторы документов, мы хотели дать пользователю возможность удобно работать с любым объектом. Одним из препятствий, возникших на пути к редактированию всего и сразу и прямо в этом окне, стали формулы, а точнее — их двойственность. Студенты технических вузов сталкивались с этим явлением почти со стопроцентной вероятностью: речь идет о существовании «старых» (бинарный .doc) и «новых» (прогрессивный XML) формул в редакторах пакета MS Office.
В этой статье мы расскажем, как эта проблема решается в редакторах ONLYOFFICE. Ответ прост: К – «Конвертация». Мы конвертируем старые формулы в доступные для редактирования новые формулы и крайне довольны своей идеей. Почему мы пошли таким путем и как устроена конвертация, читайте далее.
Интерактивное видео и с чем его едят
2016-03-29 в 7:35, admin, рубрики: canvas, development, Gamedev, gopro, html, innopolisu, interactive, javascript, videogame, бесплатно, Блог компании Innopolis University, Веб-разработка, Иннополис, образование, метки: innopolisu Полгода назад за чашечкой кофе программист, режиссер и геймдизайнер вели дружескую беседу на тему того, что кинематограф становится скучным. «Да, спецэффекты становятся круче, количество D становится больше, но этим сейчас малого кого можно удивить. Людей цепляет сюжет. А теперь представьте, что когда-нибудь мы будем смотреть смотреть фильмы, которыми можно управлять?»
— Я бы убил Джона Коннора.
— А я бы не выбросил бузинную палочку и стал плохим волшебником.
— А я бы на месте Поттера воспользовался маховиком времени, чтобы спасти его родителей, а не клювокрыла.
И, как говорится, понеслось…
На прошлой неделе мы спросили Хабражителей интересно ли узнать о технических аспектах создания игры. Сейчас мы готовы представить плоды нашей работы и рассказать с какими трудностями столкнулись, как с ними боролись и какие результаты получили.
Читать полностью »