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

Canvas *

Элемент HTML5

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Истории

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Процедурная генерация бумажных снежинок

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

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

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

Как написать собственное свойство CSS

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

Благодаря Paint API из состава Houdini можно не ждать выхода новых возможностей CSS. Шаг за шагом автор этого материала показывает, как написать новое свойство CSS для анимации с фрагментацией. Делимся материалом, пока у нас начинается курс по Frontend-разработке.

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

Как писать на HTML Canvas удобно, или как изобрести очередной renderer на Angular

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

Разработка на canvas с контекстом 2D обычно не предполагает никаких сложностей. Для начала необходимо изучить пару десятков встроенных методов WEB API CanvasRenderingContext2D, прочитать рекомендации по оптимизации, вспомнить школьный курс геометрии. И на этих базовых вещах можно уже строить неплохие приложения на canvas.

Как один из вариантов начала разработки на canvas: из примитивов фигур строят элементы, затем их объединяют в функцию, эти функции складывают в готовый элемент, объединяют их в слой, ну и в конце уже отдают в функцию рендера. Все еще звучит довольно неплохо и с этим можно даже жить, если использовать чистые функции, и придерживаться везде этого подхода. Но не всегда этого удается, всегда есть соблазн выхватить что-либо из контекста. Для примера приведу код из source-map-vizualization замечательный инструмент, сделанный на canvas. Только чтобы понять весь код и привнести какие либо исправления, я думаю придется посидеть не один час.

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

Блюр объектов в реальном времени на видео с помощью canvas

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

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

Сегодня я хочу поделиться реализацией такого блюра/пикселизации видео (изображения) в вебе.

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

Easy canvas — простая js библиотека, которая невероятно упрощает работу с canvas html

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

Ссылка на GitHub

Очень простая библиотека javascript, которая сильно упрощает работу с canvas html.

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

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

Будущее веба: станет ли рендеринг в <canvas> заменой DOM?

Время на прочтение7 мин
Количество просмотров25K
В последнее время было немало горестных рассуждений о последствиях решения Google использовать HTML-элемент <canvas> для рендеринга всего, что видно на экране при работе с Google Docs. И то, что это многих беспокоит, вполне понятно. Когда-то веб был задуман как система для работы с тщательно структурированной информацией, полной осмысленных метаданных и рассчитанной на совместное её использование многими людьми. Но, вместо этого, тот веб, который мы видим сегодня, представляет собой довольно сложно и запутанно устроенные приложения, которые работают в браузерных «песочницах».


Решение Google, которое заключается в том, чтобы перейти от вывода на страницы HTML-элементов к рисованию пикселей на <canvas>, нельзя назвать чем-то таким, чего раньше никто не видел и не пробовал. Другие передовые веб-приложения уже вышли далеко за пределы традиционных схем работы с HTML-элементами. Так, в Google Maps вывод данных на <canvas> используется уже многие годы. В VS Code для отрисовки идеального интерфейса терминала тоже используется <canvas>. А в подающем надежды наборе инструментов Google Flutter, который позволяет создавать кросс-платформенные интерфейсы, в веб-браузере, по умолчанию, используется рендеринг с использованием <canvas>.

Но в этот раз происходящее вызывает несколько иные ощущения. А именно, появляется такое чувство, что рендеринг в <canvas> и другие современные технологии, вроде WebAssembly, увели нас за точку невозврата. Все привыкли к схеме работы, когда страница загружает, в виде обычного текста, JavaScript-код, который выполняется, взаимодействуя с HTML-элементами, видимыми в «инструментах разработчика». Сейчас возникает такое впечатление, что это — лишь небольшой этап на пути постоянно развивающихся технологий веб-разработки.
Читать дальше →
Всего голосов 74: ↑72 и ↓2+70
Комментарии103

Карта метро Москвы с расчётом пути

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

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

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

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

Варианты создания интерактивной экскурсии для пользователей

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

Доброго времени суток, уважаемые читатели!

Меня зовут Евгений Когтев, я ведущий разработчик в команде Web Core в ДомКлик. Мы уже рассказывали подробнее о команде и стоящих перед ней задачах, если не читали, то рекомендую. А сегодня я расскажу, зачем нужен онбординг и как его реализовать в UI-kit.

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

Есть ли жизнь после жизни?

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

Всем доброго дня или ночи! Затронутая в статье, тема может показаться настолько избитой до популярности, что при ее прочтении возникнет стойкое желание взять помидор или, не дай бог, кирпич и кинуть в автора. А изложенные мысли будут напоминать повторное изобретение велосипеда с квадратными колесами. Но идея, побудившая приступить к описанию, буквально зудит и проситься ей поделиться, несмотря на угрозу физического или морального наказания.

Читать далее
Всего голосов 85: ↑84 и ↓1+83
Комментарии42

Шейдеры, Three.js и киберпанк. Как мы делали лендинг в неоново-античной стилистике

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

Привет, это блог «Технократии». Обычно мы занимаемся цифровой трансформацией бизнеса, но сегодня у нас для вас история, как при помощи библиотеки three.js и шейдеров мы сделали лендинг для нашей промо-кампании. Главный рассказчик — разработчик Артем Ибатуллин.

Читать далее
Всего голосов 13: ↑11 и ↓2+9
Комментарии11

Моё знакомство с виртуальными ассистентами Салют, а также с платформой SmartMarket и SmartApp

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

Знакомство с виртуальными ассистентами Салют, а также с платформой SmartMarket и SmartApp.

Путь от chat app до canvas app или как создать canvas app на платформе SmartMarket.

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

Конфетти на канвасе

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

Привет Хабр! Попалась недавно интересная библиотечка , которая создает эффект конфетти на страничке. Решил разобраться , что же там внутри находится и как работает. Подробности под катом

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