Как стать автором
Обновить
0

Canvas *

Элемент HTML5

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

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

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

Всем привет!

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

Читать далее
Всего голосов 10: ↑10 и ↓0 +10
Комментарии 14

Новости

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

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

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

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

Читать далее
Всего голосов 7: ↑2 и ↓5 -3
Комментарии 4

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

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

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

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

Читать далее
Всего голосов 17: ↑16 и ↓1 +15
Комментарии 1

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

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

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

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

Читать далее
Всего голосов 9: ↑8 и ↓1 +7
Комментарии 0

Истории

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

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

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

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

Читать далее
Всего голосов 10: ↑10 и ↓0 +10
Комментарии 4

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

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

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

Читать далее
Всего голосов 12: ↑11 и ↓1 +10
Комментарии 1

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

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

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

Читать далее
Всего голосов 14: ↑12 и ↓2 +10
Комментарии 16

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

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

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

Читать далее
Всего голосов 105: ↑95 и ↓10 +85
Комментарии 59

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

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

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

Читать далее
Всего голосов 12: ↑12 и ↓0 +12
Комментарии 0

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

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

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

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

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

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

Читать далее
Всего голосов 14: ↑14 и ↓0 +14
Комментарии 1

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

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

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

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

Читать далее
Всего голосов 46: ↑46 и ↓0 +46
Комментарии 26

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

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

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

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

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

Читать далее
Всего голосов 39: ↑39 и ↓0 +39
Комментарии 35

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

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



В статье присутствуют Gif (трафик!) и контрастные картинки. У эпилептиков может случиться эпилептический припадок.
Читать дальше →
Всего голосов 37: ↑36 и ↓1 +35
Комментарии 15

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

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

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

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

Читать далее
Всего голосов 10: ↑6 и ↓4 +2
Комментарии 4

Как управлять командой разработки

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

Привет! Я Иван Антипин, заместитель директора департамента разработки в AGIMA. За свою карьеру я поработал с десятками команд. Где-то был разработчиком, где-то тимлидом, где-то помогал извне. У меня был миллион возможностей разобраться, как люди ведут себя в коллективе. Но всё же не на все вопросы существуют четкие ответы: что такое команда, как она работает, как ей управлять. В этой статье я попробую описать те методы и подходы, которые лично мне кажутся полезными и правильными.

Читать далее
Всего голосов 27: ↑22 и ↓5 +17
Комментарии 14

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

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

Привет! Сегодня я хотел бы начать цикл статей на тему того, как работать с canvas в HTML5 и как применять знания в области матанализа для реализации необычных и интересных эффектов.

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

Сегодня мы рассмотрим, как рисовать различные фигуры, и реализуем алгоритм fibonacci flower, также известный как golden ratio или phyllotaxis.

Читать далее
Всего голосов 5: ↑5 и ↓0 +5
Комментарии 0

Создаем приложение Art-pixel на Angular и Nest.js. Часть 2.1 (ESLint)

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

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

По умолчанию версия Angular 12 не включает линтеры, потому что стандартный линтер TypeScript называется TSLint (он считается устаревшим и вместо него рекомендуется использовать ESLint).

Читать далее
Рейтинг 0
Комментарии 0

Создаем приложение Art-pixel на Angular и Nest.js. Часть 2

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

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

Читать далее
Рейтинг 0
Комментарии 5

Создаем приложение Art-pixel на Angular и Nest.js. Часть 1

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

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

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

А может кому то просто понравится рисовать, ссылка на демо ниже.

В этой части я буду использовать Angular, CSS фреймворк от  w3schools

Итак, в первой части будет описан процесс создания вот такой мастерской.

Читать далее
Всего голосов 4: ↑2 и ↓2 0
Комментарии 0

7 + 1 способ анимировать спиннер

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

Меня зовут Евгений Подивилов, я фронтенд-разработчик в команде «Лайфстайл». Я разрабатываю раздел «Развлечения». В этом разделе можно купить билеты на мероприятия или забронировать столик в ресторане.

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

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

Читать далее
Всего голосов 32: ↑32 и ↓0 +32
Комментарии 16

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