Canvas

alxgutnikov 24 ноября 2016 в 10:31

WebRTC: Делаем peer to peer игру на javascript

• Блог компании Badoo,
• JavaScript,
• Программирование,
• Разработка игр,
• Canvas

• Tutorial

Недавно мне довелось поработать над прототипом видеочата. Это был отличный повод поближе познакомиться с концепциями WebRTC и опробовать их на практике. Как правило, когда говорят про WebRTC, подразумевают организацию аудио- и видеосвязи, но эта технология может применяться и для других интересных вещей. Я решил попробовать сделать peer-to-peer игру и поделиться опытом ее создания. Видео того что получилось и подробности реализации под катом.

Читать дальше →

Kempston 26 октября 2016 в 17:54

Как я писал игру на конкурс, или чудесное превращение «Линий» в «Морской бой»

• Разработка веб-сайтов,
• Разработка игр,
• Canvas,
• WebGL

Эта история о том, как я делал очередную 3D веб-игру. История терзаний и сомнений, история недосыпаний и лени. История о том, как все сделать в самый последний момент. В общем, чего тянуть кота за рога – перейду к рассказу. Но сперва – еще кое-что, чтобы покончить со всеми формальностями. «Мадам, вам кофе в постель?» «Нет, лучше в чашку». Кофе был моим ежедневным спасением из лап Морфея, особенно когда я хотел поработать над игрой с утра, перед всеми остальными дневными заботами. Надо отдать ему должное. Я просто не могу не упомянуть о нем, так как для меня это стало воистину одной из составляющих успеха, под коим я понимаю доведение игры до релиза. (Здесь могла быть ваша реклама кофе).

Конкурс

На самом деле, я вписался не в тот конкурс, для которого мог бы что-то сделать. По его условиям требовалось создать игру под Windows, скачиваемую и запускаемую по exe-файлу. Я же люблю программировать под браузеры. Я не знаю C++ и C#, у меня даже нет Visual Studio. Но тут внезапно у меня появилась отличная идея игры, и я подумал – а какого черта! Буду просто делать игру. А получится ли соблюсти все условия конкурса или нет – не так важно. В конце концов, просто запущу ее в социальных сетях.

Читать дальше →

Flashist 30 августа 2016 в 11:30

FConsole — инструмент для отладки PIxi.js (Canvas/WebGL) приложений

• Canvas,
• Отладка

Буквально вчера выложил в открытый доступ первую рабочую версию консоли для отладки Canvas/WebGL приложений FConsole. Если вы всегда хотели редактировать свойства визуальных объектов без изменения исходного кода, а так же без сложностей просматривать всю иерархию визуальных объектов, то прошу под кат.

* На скриншоте представлена Flash-Console, которая бралась в качестве примера при разработке FConsole

Читать дальше →

dimapopov 8 августа 2016 в 12:07

ThreeJS Editor

• Canvas,
• WebGL

Three JS Editor — еще минималистичный, но очень полезный редактор 3D графики, на основе WebGL и библиотеки ThreeJS.
Three.js — легковесная кросс-браузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений.


Кликабельно

При работе с библиотекой ThreeJS, вся графика создаться в коде, это фундаментально, но не продуктивно. Тенденция показывает, что конкретно графика, больше переходить в контекст редакторов, то есть создаться через редактор, а потом к ней уже привязывают логику для динамики. Редактор ThreeJS очень полезен, он и дает возможность разработать графику в графической среде, методом клика, а логику привязать в редакторе кода.

Читать дальше →

slavontkn 28 июля 2016 в 23:23

Спидометр на HTML5 Canvas

• JavaScript,
• Canvas

• Из песочницы

В сети есть несколько похожих примеров создания спидометра, но я решил поделиться с вами своим.



Для начала нам нужно в DOM'е создать объект canvas:

Читать дальше →

Растянуть Canvas и элементы внутри него по всей клиентской области

• .NET,
• Canvas,
• C#

• Из песочницы

apelsyn 1 июля 2016 в 11:18

Нейронные сети на Javascript

• JavaScript,
• Node.JS,
• Canvas,
• Big Data,
• Машинное обучение

Идея для написания этой статьи возникла прошлым летом, когда я слушал доклад на конференции BigData по нейронным сетям. Лектор «посыпал» слушателей непривычными словечками «нейрон», «обучающая выборка», «тренировать модель»… «Ничего не понял — пора в менеджеры», — подумал я. Но недавно тема нейронных сетей все же коснулась моей работы и я решил на простом примере показать, как использовать этот инструмент на языке JavaScript.

Мы создадим нейронную сеть, с помощью которой будем распознавать ручное написание цифры от 0 до 9. Рабочий пример займет несколько строк. Код будет понятен даже тем программистам, которые не имели дело с нейронными сетями ранее. Как это все работает, можно будет посмотреть прямо в браузере.

Читать дальше →

lavrton 29 июня 2016 в 06:06

Оптимизируем React приложение для отображения списка элементов

• JavaScript,
• Canvas,
• ReactJS

xkorolx 7 апреля 2016 в 11:15

Как ONLYOFFICE помирил два поколения формул Microsoft

• Блог компании ONLYOFFICE,
• Разработка веб-сайтов,
• Canvas

Когда мы разрабатывали наши редакторы документов, мы хотели дать пользователю возможность удобно работать с любым объектом. Одним из препятствий, возникших на пути к редактированию всего и сразу и прямо в этом окне, стали формулы, а точнее — их двойственность. Студенты технических вузов сталкивались с этим явлением почти со стопроцентной вероятностью: речь идет о существовании «старых» (бинарный .doc) и «новых» (прогрессивный XML) формул в редакторах пакета MS Office.

В этой статье мы расскажем, как эта проблема решается в редакторах ONLYOFFICE. Ответ прост: К – «Конвертация». Мы конвертируем старые формулы в доступные для редактирования новые формулы и крайне довольны своей идеей. Почему мы пошли таким путем и как устроена конвертация, читайте далее.

Читать дальше →

Dlin 29 марта 2016 в 10:35

Интерактивное видео и с чем его едят

• Блог компании Innopolis University,
• Разработка веб-сайтов,
• JavaScript,
• HTML,
• Canvas

Полгода назад за чашечкой кофе программист, режиссер и геймдизайнер вели дружескую беседу на тему того, что кинематограф становится скучным. «Да, спецэффекты становятся круче, количество D становится больше, но этим сейчас малого кого можно удивить. Людей цепляет сюжет. А теперь представьте, что когда-нибудь мы будем смотреть смотреть фильмы, которыми можно управлять?»
— Я бы убил Джона Коннора.
— А я бы не выбросил бузинную палочку и стал плохим волшебником.
— А я бы на месте Поттера воспользовался маховиком времени, чтобы спасти его родителей, а не клювокрыла.



И, как говорится, понеслось…

На прошлой неделе мы спросили Хабражителей интересно ли узнать о технических аспектах создания игры. Сейчас мы готовы представить плоды нашей работы и рассказать с какими трудностями столкнулись, как с ними боролись и какие результаты получили.

Читать дальше →

jsPDF + canvas: экспорт в PDF многостраничной таблицы на русском языке

• Canvas,
• PDF,
• Angular

VitaZheltyakov 22 февраля 2016 в 19:37

Сборка гибридного приложения под Android

• Разработка мобильных приложений,
• Разработка под Android,
• Canvas

Многие считают, что гибридные приложения не могут иметь хорошую производительность, особенно в плане построения страницы (то есть имеют низкий FPS). Это ошибочное мнение. Если умело собрать приложение, то можно добиться хороших показателей. В статье рассмотрен пример сборки такого гибридного приложения под Android в Windows 7 (хотя для iOs будет почти тоже самое).

Читать дальше →

lavrton 6 февраля 2016 в 02:15

Про использование React с элементом canvas

• JavaScript,
• HTML,
• Canvas,
• ReactJS

Есть такой замечательный фреймворк React, который позволяет работать с огромным и мутабельным DOM в красивом иммутабельном функциональном стиле. Это действительно круто.

Но я бы хотел рассказать про опыт использования React, который позволяет работать с мутабельной абстракцией над "иммутабельным" canvas элементом. Звучит странно, но работает отлично.

Мотивация

Я использую элемент <canvas> очень часто. Я сделал несколько достаточно сложных веб-приложений, в которых canvas — это основной элемент представления данных. Использовать canvas без всяких фреймворков и библиотек может быть действительно сложно в крупных приложениях. Поэтому я начал часто использовать фреймворки. Сейчас я поддерживаю фреймворк Konva (есть обзорная статья https://habrahabr.ru/post/250897/).

Konva помогает очень сильно, но хочется большего. Так же я начал использовать React в своих приложениях, и он мне действительно нравится. И я подумал, как же я могу использовать React для рисования графики на canvas?

Читать дальше →

oshibka404 30 января 2016 в 18:28

Простейшие клеточные автоматы и их практическое применение

• JavaScript,
• Программирование,
• Алгоритмы,
• Canvas,
• Математика

Этот мир просто охренеть какой сложный, каждый день поражаюсь.

Чтобы хоть как-то его познавать и при этом не съехать с катушек, нам, людишкам, с нашими жалкими мозгами приходится задумчиво смотреть на происходящее, анализировать увиденное и строить модели — абстракции, с помощью которых мы с некоторой точностью кое-что иногда можем предсказывать и даже наивно полагать, что понимаем, что же на самом деле происходит.

И знаете, что удивительно? Этот подход замечательно работает. Ну, почти всегда. По крайней мере, ничего лучше мы до сих пор не придумали.

Но вообще-то я не об этом. Я хочу рассказать об одной чрезвычайно интересной как с эстетической, так и с математической точки зрения категории этих самых моделей.



Да, я о клеточных автоматах, а именно — об их подмножестве, простейших клеточных автоматах (Elementary cellular automaton). В этой статье я поведаю, что это такое, какие они бывают, какими свойствами обладают, а также отвечу на главный, на мой взгляд, и совершенно правильный вопрос, который часто несправедливо игнорируется в подобных статьях. Звучит он так: А это всё вообще зачем?

Забегая вперед, скажу, что простейшие клеточные автоматы используются в криптографии, моделировании физических процессов, поведения людей, в биологии, и в целой куче других важных и интересных штук. И вообще: во-первых, это красиво.

Я искренне надеюсь, что после прочтения статьи вы сами захотите поиграться с ними, и на этот случай у меня припасен собранный из JS и палок генератор.

Хватит воды, давай к сути

xkorolx 21 января 2016 в 11:59

Одиннадцать важных функций ONLYOFFICE, которых нет ни в MS Office Online, ни в Google Docs

• Блог компании ONLYOFFICE,
• Разработка веб-сайтов,
• Canvas

Нас часто спрашивают, а чем мы вообще лучше других онлайн-редакторов документов. Вместо того, чтобы использовать опробованный Лордом Вейдером прием удушения Силой на всех, кто этот вопрос задает, мы решили написать о том, чем же хороши наши редакторы и чем они отличаются от, пожалуй, основных своих конкурентов — Office Online от Microsoft и Google Docs.

Начнем с текстовых редакторов.

Читать дальше →

spmbt 5 января 2016 в 08:24

Анимация падающего снега на Canvas эффективнее анимации на DOM в несколько раз

• JavaScript,
• Алгоритмы,
• Canvas

• Tutorial

.В сравнении с нативным JS на элементах DOM, реализация анимационных алгоритмов на Canvas обычно производительнее во много раз. Это известный факт (но с особенностями для малого числа частиц, как выяснится позже), и он может найти реализацию так всем мешающего традиционного под НГ, но гонимого рациональными пользователями «падающего снега». Чтобы нагрузки было мало, в последние годы считается хорошим тоном «запускать» снег на сайте едва заметным, с минимальным количеством снежинок (5-15). Тут и эффект есть, и нагрузки на процессор почти никакой.

Поэтому, пока до НГ ещё несколько дней ещё зима, предлагаю устроить хакатончик по реализации лучших алгоритмов на канвасе и их аналогов на DOM, взяв за основу в основном древние нативные алгоритмы, которые как максимум обёртывались в плагин jQuery, чтобы было удобно подключать. Большая часть этих алгоритмов не соразмеряет нагрузку на процессор или сделана неэффективно, поэтому даже при малом числе снежинок грузят процессор на 100%. Вот пример обзорной статьи, где рассмотрены более 10 реализаций, не все, встречающиеся в природе. В дополнение, рассмотрим несколько избранных, чтобы получить задел на развитие алгоритма и реализацию его с хорошей эффективностью (получится ещё 5-6 вариантов). На этой основе можно построить доработку. Github с 12 демо (ссылки повторяются ниже) и несколькими алгоритмами.

подробности

antirek 28 декабря 2015 в 11:49

Asterisk: каждый звонок как прыгающий мячик

• Node.JS,
• Canvas,
• Asterisk,
• Визуализация данных,
• Разработка систем связи

В эти предпраздничные дни, когда отчасти должен проводить время на работе, но изменения в рабочие системы уже не вносятся, ибо «скоро праздники, кому нужны твои свежие баги?», можно заняться вырезанием звездочек и снежинок из бумаги и маленькими экспериментами.

В общем, мы с вами не раз слышали такое выражение: «мой звонок пинали как мячик от оператора к оператору, и в итоге отфутболили», а может даже сами когда-то такое сказали в сердцах. И подумалось, а ведь если представить звонок как скачуший мячик от стенке к стенке, а так как у нас несколько десятков звонков бывает на астериске одномоментно, то это должно выглядеть как минимум забавно.

Что получилось? Далее детали и небольшое видео.

Читать дальше →

TheShock 24 ноября 2015 в 12:09

Пользовательские плагины в JavaScript играх

• Блог компании Wargaming,
• JavaScript,
• Git,
• Разработка игр,
• Canvas

Wargaming сейчас разрабатывает тактическую карточную игру WoT: Generals. Веб-версия написана на JS, используются LibCanvas и AtomJS. Я принимал непосредственное участие в разработке и хочу рассказать про функционал, который мне кажется интересным и может быть полезным во всех веб-играх. А именно — о системе плагинов игры, которая вдохновлялась пакетными менеджерами в Linux и имеет следующие возможности:

— История изменений плагинов
— Автоматическое обновление плагина при обновлении версии игры
— Разработка плагинов на localhost
— Неограниченное количество веток, например, для нестабильных версий
— Зависимости (плагин А автоматически подключает плагин Б)
— Встроенная возможность делать паки (следствие предыдущего пункта)
— Легкое изменение любой части клиента игры
— Полный административный контроль авторов игры над всеми плагинами
— Поиск по базе плагинов
— При этом простая установка юзером и удобная работа для плагинописцев.

Читать дальше →

Keyten 5 ноября 2015 в 20:24

100 строк на canvas-е: часть 1

• JavaScript,
• Canvas

• Tutorial

Рецепт вращения планет в космосе на HTML5 + JavaScript

• Разработка веб-сайтов,
• JavaScript,
• HTML,
• Canvas

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

Вычеркиваем

После непродолжительного подбора различных способов реализации, сразу были исключены варианты:

• с gif-анимацией (из-за низкого качества изображения);
• с Flash (по договоренности, Flash-технологии решили в проекте не использовать);
• с анимацией с помощью JQuery посредством функции $().animate (по причине ее прожорливости).

CANVAS в помощь!

Итак, остановились мы на использовании Canvas и JavaScript, посчитав этот вариант оптимальным для реализации нашей задачи.

Читать дальше →