Все потоки
Поиск
Написать публикацию
Обновить
6.07

Canvas *

Элемент HTML5

Сначала показывать
Порог рейтинга
Уровень сложности

Как мы создаём редакторы документов. Ядро и его роль в кроссплатформенной разработке

Время на прочтение10 мин
Количество просмотров4.2K

В МойОфис мы создаем ПО для корпоративного пользования, и одни из ключевых продуктов нашей линейки — редакторы документов «МойОфис Текст» и «МойОфис Таблица». Эти приложения представлены на всех популярных платформах, включая мобильные устройства. Они позволяют создавать, изменять, просматривать текстовые и табличные документы различных форматов, а также совместно работать над ними в веб-версии редакторов.

Сегодня мы расскажем об общем технологическом устройстве редакторов МойОфис, с акцентом на их центральный элемент: ядро, написанное на C++. Именно ядро обеспечивает основную функциональность приложений и даёт нам возможность эффективно унифицировать её для разных платформ.

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

Читать далее

Математика наклона в картах, или как мы сделали небо

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров9K

Недавно в карте 2ГИС появились небо и туман, которые можно увидеть, увеличив масштаб и наклон. 

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

Читать далее

Как я повысил производительность flutter приложения с помощью FragmentShader. Часть 2

Уровень сложностиСредний
Время на прочтение11 мин
Количество просмотров3K

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

В этой части разберем, какие решения можно использовать для оптимизации данного кейса.

Читать далее

Как я повысил производительность flutter приложения с помощью FragmentShader. Часть 1

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров2.3K

Статья о том, как я добавил фичу с рисованием пальцем на экране с помощью CustomPaint во flutter приложении и далее пошагово занимался оптимизацией

Читать далее

Создание сетевой игры с помощью Collagen_2, Node.js и библиотеки socket.js

Время на прочтение12 мин
Количество просмотров3.7K

В данной статье будет описан простой способ создания сетевой онлайн мини игры на подобии небольшой чат комнаты. Игроки могут передвигаться по полю игры, прятаться за деревьями, также есть возможность управлять камерой вида. Для тестирования игры необходимо скачать редактор зайти в папку collagen_2/games/game_3, ввести в командной строке forever start app.js. Для работы игры требуются модули socket.js и forever(глобальная инсталяция).

Читать далее

Пишем 2D игру на JavaScript и Canvas. Часть 2. Графика

Уровень сложностиПростой
Время на прочтение18 мин
Количество просмотров9.3K

Привет!

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

Читать далее

Мои первые шаги в создании браузерных 2D игр на чистом JavaScript + Canvas. Часть 1. Прототип

Уровень сложностиПростой
Время на прочтение20 мин
Количество просмотров27K

Всем привет!

Поделюсь с Вами моим первым опытом в создании двумерных браузерных игр на языке JavaScript.

Читать далее

Треугольник Серпинского — Canvas, JS

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров4.3K

Треугольник Серпинскогофрактал, математическое описание которого опубликовал польский математик Вацлав Серпинский в 1915 году.

В этом посте мы напишем рекурсивный алгоритм отрисовки данного известного фрактала в canvas с помощью JS

Читать далее

Spatium: цифровой завод в браузере или 3D в контексте клиент-серверных web приложений

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров3.2K

Всем привет! Меня зовут Евгений, я backend‑разработчик в компании Bimeister. Сегодня я хочу рассказать о нашем 3D движке Spatium для рендеринга сводных моделей масштаба промышленного предприятия в браузере.

Материал может представлять интерес для разработчиков и пользователей BIM-систем, а также для инженеров и конструкторов, которые выполняют работы по проектированию 3D моделей, получению фотограмметрических моделей и облаков точек для таких систем.

Читать далее

Collage_n — редактор для создания коллажей и спрайтов

Уровень сложностиПростой
Время на прочтение1 мин
Количество просмотров1.9K

Collagen работает на новой ссылке: https://sergey1234ovechkin.github.io/collagen_2/index.html

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

Читать далее

Основные приемы работы с Canvas [Part 2]

Время на прочтение6 мин
Количество просмотров6.9K

Привет! Мы продолжаем цикл статей по базовым принципам работы с canvas. Сегодня мы рассмотрим L-системы в качестве примера для создания различных интересных визуализаций.

Так что же такое L-ситемы? L-системы (или системы Линденмайера) — это набор простых правил, которые используются для моделирования роста водорослей (и не только), созданные венгерским биологом Аристидом Линденмайером в 1968 году.

Читать далее

Конструктор базы для браузерной стратегии в духе Dune 2/2000 на Three.js, Vue3 + TS

Время на прочтение11 мин
Количество просмотров5.3K

Самой успешной моей статьей для сообщества был подробный отчет о разработке браузерного FPS. Судя по статистике в базе данных — неожиданно огромное количество людей зашло и попробовало сыграть, я получал заинтересованные вопросы в личку и так далее. В дальнейшем, я предпринял еще одну попытку крафтового браузерного геймдева «на javascript», и попробовал создать конструктор для стратегии в духе культовой Dune из детства. В какой-то момент я уперся в неудовлетворительную производительность получающейся разработки, заскучал и уже почти год как забросил это дело. Но у меня вполне получилось построить работающий полноценный контрол, сейчас можно возводить и демонтировать здания. Поэтому хочу, прежде всего, поставить точку для себя самого, немного рассказав и о данной затее — возможно, для кого-то окажутся полезными мои усилия, изыскания. Статья не будет такой объемной, дотошной и разнообразной как первая о создании действительно полноценного шутера, зато сам код репозитория, кажется, немного интереснее, так как использует более актуальный стек из Vue3 и TypeScript. Во многом, эта разработка продолжает идеи и методы первой, с тем отличием, что мы пилим стратегию, а не шутер от первого лица. Я совсем не буду повторять то что было уже пройдено и рассмотрено на первом примере, бегло покажу только «новые фичи».

Читать далее

Прикладная архитектура карт в вебе на React и Mapbox. 1 часть — технологический стек

Время на прочтение9 мин
Количество просмотров15K

Всем привет! Меня зовут Никита Русанов, я лид команды фронтенда в компании, где мы создаем продукт, упрощающий переезд. В данной предметной области много задач по взаимодействию с гео данными. Сегодня я расскажу, каким образом можно работать с картами в браузере. В этой части мы с вами поговорим про используемые технологии.

Читать далее

Ближайшие события

«Йо-хо-хо»-2 или перевозка рабов и трупов оппозиционеров

Время на прочтение6 мин
Количество просмотров37K

Я продолжаю работу над своей браузерной игрой про пиратов на Three.js. Пришло время добавить торговлю. Я подумал, раз у нас тут век пиратов, то и в политическом смысле обстановка должна быть весьма фривольной, то есть, без всякой богомерзкой демократии. А чего стесняться? Заходим в порт, а там нам, пиратам, сразу же предлагают приобрести пушечные ядра и выполнить заказы на транспортировку трупов оппозиционеров и доставку рабов. Еще можно отвезти ром на Тортугу или подбросить губернаторскую дочь на вечеринку на Райский остров. Или тайно эвакуировать беглого губернатора за хорошую плату. Действительно, для подобных дел правительству идеально использовать пиратов. В конце концов, рабы сами себе билет на регулярный рейс не купят, а оппозиционеры сами себя не похоронят. А проблему решать надо... Короче говоря, перевозить древесину и шелк, как в обычных играх - это скучно. Пусть будут этакие «девяностые», но в эпоху пиратов. Пираты выполняют не совсем законные задания правительства, а последнее закрывает глаза на их не совсем законные методы обогащения.

Читать далее

Three.js, квантовый спин, сфера Блоха и квантовые вращения

Время на прочтение5 мин
Количество просмотров3.9K

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

Читать далее

Делаем эффекты в видеосвязи, используя Canvas API и MediaPipe

Время на прочтение7 мин
Количество просмотров4.2K

Привет! На связи Влад из команды видеоплатформы Skyeng. Мы отвечаем за аудио и видео коммуникацию в образовательных продуктах, применяем WebRTC и реализуем фичи вокруг Video Conferencing. О реализации одной из них хочу рассказать: мы сделали видеоэффекты для веба.

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

Когда мы поговорили с пользователями, они подтвердили — нужна возможность заменить фон во время урока на альтернативный или размыть на звонке то, что происходит позади. Да и видеоэффекты уже есть на многих видеоплатформах, надо не отставать от трендов. 

Все сошлось. Решили делать.

Читать далее

Team Lead Simulator — маленькая игра про большую ответственность

Время на прочтение4 мин
Количество просмотров25K

 TL;DR: игра по ссылке.

Наверняка многие из вас в детстве баловались игрушками вроде «ПРОГРАММИСТ 1.3» — эдакими текстовыми квестами, в которых игрок должен был прокачаться из начинающего программиста хакером (термина «сеньор» тогда, наверное, еще не было), собрать самый крутой комп, заработать больше всех денег. При этом весь геймплей заключался в нажатии нужных кнопок действий и менеджменте немногочисленных ресурсов. Я, с теплом вспоминая такие игры, а также текстовые квесты в Космических Рейнджерах 2, решил создать игру Teamlead Simulator, в которой...

Читать далее

Браузерная игра про пиратов

Время на прочтение10 мин
Количество просмотров10K

«Йо-хо-хо!» - невольно приходит на ум при любом взаимодействии с морем, передвигаешься ли на речном трамвайчике или же сидишь в баре круизного корабля. В последнем случае еще можно приобрести бутылку рому. Море привлекает своими волнами, закатами и рассветами. А особенно прикольно, когда на море завелись злые пираты. Ну... если это мы, конечно же.

Возьмем шейдер неба и шейдер воды - атмосфера готова! Что может быть проще. И да, я буду писать игру под браузер на Javascript с использованием библиотек Three.js и Cannon.js. Первую я использую для отображения 3D графики, а вторую - в качестве легковесного скриптового физического движка.

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

Читать далее

Общего между фракталами и голографией

Время на прочтение7 мин
Количество просмотров7.5K
Продолжим тему бильярдных фракталов.



В статье присутствуют Gif (трафик!) и контрастные картинки. У эпилептиков может случиться эпилептический припадок.
Читать дальше →

Low Cost Engineering как метод бережливого производства в технологическом стартапе

Время на прочтение6 мин
Количество просмотров4.9K

Тот, кто не готов внедрять новые решения, достаточно скептично относится к такой формулировке как Low Cost Engineering, считая, что создание прототипа – это огромные затраты. Опытные же инженеры все чаще используют данную концепцию как один из инструментов бережливого производства.

Читать далее

Вклад авторов