This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
Восхищаться красивыми примерами можно бесконечно, но полезные – гораздо… практичнее.
Вот недавно прошла очередная презентация Apple Keynote. Что сделает хороший разработчик? Правильно, воссоздаст анимацию её логотипа: https://codepen.io/Mamboleoo/pen/ZELqMOg
Что же сделает отличный разработчик?
А он не просто воссоздаст, но и покажет, как конкретно. Разложит на шаги и снабдит код подробными комментариями: https://codepen.io/Mamboleoo/pen/qBRQXPN
Кому не хватало понимания, как конкретно пишутся анимации с использованием GSAP – самое время пойти и попробовать.
👉 @htmlshit
#svg #canvas #gsap
Восхищаться красивыми примерами можно бесконечно, но полезные – гораздо… практичнее.
Вот недавно прошла очередная презентация Apple Keynote. Что сделает хороший разработчик? Правильно, воссоздаст анимацию её логотипа: https://codepen.io/Mamboleoo/pen/ZELqMOg
Что же сделает отличный разработчик?
А он не просто воссоздаст, но и покажет, как конкретно. Разложит на шаги и снабдит код подробными комментариями: https://codepen.io/Mamboleoo/pen/qBRQXPN
Кому не хватало понимания, как конкретно пишутся анимации с использованием GSAP – самое время пойти и попробовать.
👉 @htmlshit
#svg #canvas #gsap
#статья дня
Так, осторожно. Шоковый контент 😣
Думаете, на КДПВ шутка? Да хрен вам! Суровая реальность.
Сейчас покажу.
Есть такая ерундовина — CSS Houdini, низкоуровневый API, выкатывающий наружу некоторое внутреннее устройство CSS. И её неотъемлемая часть — Painting API. Он даёт возможность рисовать внутри background-image как на холсте. На canvas, то бишь.
Вы уже поняли, к чему я клоню?
Нам ничего не мешает написать функцию, которая реально подключится к некой базе данных, заберёт оттуда контент и выведет его в качестве фона.
Собственно, к делу:
https://www.leemeichin.com/posts/yes-i-can-connect-to-a-db-in-css.html
TL;DR
…некоторые вещи тупо прокляты, развлекайтесь: https://www.sqlcss.xyz/
#css #houdini #canvas
Так, осторожно. Шоковый контент 😣
Думаете, на КДПВ шутка? Да хрен вам! Суровая реальность.
Сейчас покажу.
Есть такая ерундовина — CSS Houdini, низкоуровневый API, выкатывающий наружу некоторое внутреннее устройство CSS. И её неотъемлемая часть — Painting API. Он даёт возможность рисовать внутри background-image как на холсте. На canvas, то бишь.
Вы уже поняли, к чему я клоню?
Нам ничего не мешает написать функцию, которая реально подключится к некой базе данных, заберёт оттуда контент и выведет его в качестве фона.
Собственно, к делу:
https://www.leemeichin.com/posts/yes-i-can-connect-to-a-db-in-css.html
TL;DR
.query-display {
background: paint(sql-css);
}
main {
--sql-query: SELECT * FROM genre;
--sql-database: url(...);
}
…некоторые вещи тупо прокляты, развлекайтесь: https://www.sqlcss.xyz/
#css #houdini #canvas
🤯28👍4❤1🔥1👏1
#заметка дня
Я подумал, раз уж выкатил выше видео с пультом на Flutter, почему бы не рассказать о процессе создания некоторых элементов оттуда.
Чтобы не напрягать всех лишний раз, примеры будут на JavaScript и Canvas. Ну, вдруг кому-то пригодится нечто похожее.
Да и выглядит такой код чуток попроще, чем на CustomPainter во Flutter (хотя по факту-то тоже просто холст).
Итак, для пульта я решил сделать D-pad (он же джойстик или directional pad). На моём пульте он состоит из четырех кнопок по кольцу и одной центральной.
Чаще всего, d-pad-ом называют всем известную крестовину, которая не всегда обладает отдельным центром.
Проще всего достичь такого эффекта, разделив весь круг на четыре сектора. Каждый сектор — это дуга, занимающая угол
90°. Чтобы они визуально отделялись, добавляем контуры между дугами, а поверх всего накладываем центральный круг — он становится кнопкой.
Для корректного размещения делим полный угол 360° на количество дуг — четыре — и задаём начальный угол сдвига -45°. Он нужен, чтобы первый сектор смотрел строго вверх. А то а чо он.
В результате получаем симметричный D-pad, где каждый сегмент и центр выделены визуально: https://codepen.io/alinaki/pen/oNKmxNe?editors=0010
Ладно, ладно. Это на бумаге кажется, что всё действительно просто. На деле же я жёстко тупил.
1. Я не очень понимал, как обрабатывать клики, поэтому думал в сторону пяти отдельных элементов. А значит, об уравнении арки.
2. Потом я никак не мог врубиться, как же мне сделать отступы одинаковой ширины. Мысль, что это просто контур, граница, вообще не сразу мне в голову пришла.
3. Вроде, в школе учат, как определять, попала ли точка в контур, заданный неким уравнением, но вспоминаешь это тоже далеко не сразу.
В следующих постах расскажу, как решил уравнение в пункте 3, добавив подсветку нужного сегмента при нажатии.
Не переключайтесь, котаны!
#canvas #paint #remote
Я подумал, раз уж выкатил выше видео с пультом на Flutter, почему бы не рассказать о процессе создания некоторых элементов оттуда.
Чтобы не напрягать всех лишний раз, примеры будут на JavaScript и Canvas. Ну, вдруг кому-то пригодится нечто похожее.
Да и выглядит такой код чуток попроще, чем на CustomPainter во Flutter (хотя по факту-то тоже просто холст).
Итак, для пульта я решил сделать D-pad (он же джойстик или directional pad). На моём пульте он состоит из четырех кнопок по кольцу и одной центральной.
Чаще всего, d-pad-ом называют всем известную крестовину, которая не всегда обладает отдельным центром.
Проще всего достичь такого эффекта, разделив весь круг на четыре сектора. Каждый сектор — это дуга, занимающая угол
90°. Чтобы они визуально отделялись, добавляем контуры между дугами, а поверх всего накладываем центральный круг — он становится кнопкой.
Для корректного размещения делим полный угол 360° на количество дуг — четыре — и задаём начальный угол сдвига -45°. Он нужен, чтобы первый сектор смотрел строго вверх. А то а чо он.
В результате получаем симметричный D-pad, где каждый сегмент и центр выделены визуально: https://codepen.io/alinaki/pen/oNKmxNe?editors=0010
Ладно, ладно. Это на бумаге кажется, что всё действительно просто. На деле же я жёстко тупил.
1. Я не очень понимал, как обрабатывать клики, поэтому думал в сторону пяти отдельных элементов. А значит, об уравнении арки.
2. Потом я никак не мог врубиться, как же мне сделать отступы одинаковой ширины. Мысль, что это просто контур, граница, вообще не сразу мне в голову пришла.
3. Вроде, в школе учат, как определять, попала ли точка в контур, заданный неким уравнением, но вспоминаешь это тоже далеко не сразу.
В следующих постах расскажу, как решил уравнение в пункте 3, добавив подсветку нужного сегмента при нажатии.
Не переключайтесь, котаны!
#canvas #paint #remote
👍14❤1
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня
Ну что, будем долбиться в холст и аналитическую геометрию?
Продолжаем разработку D-pad'а aka крестовины. И сегодня на повестке дня — определение попадания координат клика в нужный нам сектор. Ну и подсветка сектора заодно.
В прошлый раз мы нарисовали крестовину (я честно не знаю, как d-pad ещё называть), а сегодня пришла пора по нему покликать. Ссылка для тех, кто забыл: https://t.me/htmlshit/3279
Как я уже писал, основным откровением стало понимание, что мне не нужно пять разных фигур, описывающих виджеты. В данном случае мне повезло и граница между элементами не должна была быть прозрачной. Иначе, пришлось бы решать иными методами.
Заодно мы получили бесконечно возможное число секторов.
Математику отрисовки мы обсудили в прошлом посте. Итак, что же делаем по клику?
Для зануд: мы тут в декартовых координатах работаем.
1️⃣ Определяем, не ткнули ли мы в центральную кнопку.
Это довольно просто: уравнение окружности у нас (х – х0)² + (y – y0)² = R², где x0 и y0 — координаты центра, а R, соответственно, радиус.
Ну и получается, что пока левая часть меньше правой, мы ткнули в центр. Тут всё просто.
2️⃣ Если попали не в центр, то уже однозначно, в какой-то из секторов.
Здесь задача сводится, опять же, к двум вещам: провести луч из центра окружности в точку, чтобы определить его угол относительно оси абсцисс (горизонтали) и простым сравнением определить, в какой же из секторов попали.
Не забыв про то, что мы повернули окружность на 45° влево, чтобы задать верное направление крестовины.
И для этого существует функция Math.atan2 (Википедия на английском или на русском вот тут): арктангенс для заданных координат, в радианах.
Радианы — просто всё умножается на π.
Ну и всё, перерисовали с учётом нового цвета.
Как всегда, демка на CodePen: https://codepen.io/alinaki/pen/Yzmoyyr?editors=0010
Что делаем в следующий раз, анимируем?
#canvas #javascript #remote
Ну что, будем долбиться в холст и аналитическую геометрию?
Продолжаем разработку D-pad'а aka крестовины. И сегодня на повестке дня — определение попадания координат клика в нужный нам сектор. Ну и подсветка сектора заодно.
В прошлый раз мы нарисовали крестовину (я честно не знаю, как d-pad ещё называть), а сегодня пришла пора по нему покликать. Ссылка для тех, кто забыл: https://t.me/htmlshit/3279
Как я уже писал, основным откровением стало понимание, что мне не нужно пять разных фигур, описывающих виджеты. В данном случае мне повезло и граница между элементами не должна была быть прозрачной. Иначе, пришлось бы решать иными методами.
Заодно мы получили бесконечно возможное число секторов.
Математику отрисовки мы обсудили в прошлом посте. Итак, что же делаем по клику?
Для зануд: мы тут в декартовых координатах работаем.
Это довольно просто: уравнение окружности у нас (х – х0)² + (y – y0)² = R², где x0 и y0 — координаты центра, а R, соответственно, радиус.
Ну и получается, что пока левая часть меньше правой, мы ткнули в центр. Тут всё просто.
Здесь задача сводится, опять же, к двум вещам: провести луч из центра окружности в точку, чтобы определить его угол относительно оси абсцисс (горизонтали) и простым сравнением определить, в какой же из секторов попали.
Не забыв про то, что мы повернули окружность на 45° влево, чтобы задать верное направление крестовины.
И для этого существует функция Math.atan2 (Википедия на английском или на русском вот тут): арктангенс для заданных координат, в радианах.
Радианы — просто всё умножается на π.
Ну и всё, перерисовали с учётом нового цвета.
Как всегда, демка на CodePen: https://codepen.io/alinaki/pen/Yzmoyyr?editors=0010
Что делаем в следующий раз, анимируем?
#canvas #javascript #remote
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤4
#статья дня
В чатике всплыл очередной вопрос про эффект ambilight.
Если кто не помнит, фоновая интерактивная подсветка ambilight — от Ambient Light — пришла к нам от телевизоров Филипс, а нынче есть даже на YouTube.
Мы уже рассматривали пару вариантов создания такого эффекта, но не для видео.
А для видео же — есть прекрасная статья на Smashing Magazine: https://www.smashingmagazine.com/2023/07/recreating-youtube-ambient-mode-glow-effect/
Описывается создание нужного эффекта на основе canvas, со всеми пояснениями и кодом. Даже хук для React по пути сделали.
Вообще, до меня не сразу дошло, почему именно холст. Почему бы просто не запустить два видео и одно размыть?
Но, на самом деле, выходит так, что на холст можно отправлять далеко не все кадры, можно по пути накладывать дополнительные эффекты, не нужно заботиться о синхронизации двух видео. Ну и
#ambilight #video #canvas
В чатике всплыл очередной вопрос про эффект ambilight.
Если кто не помнит, фоновая интерактивная подсветка ambilight — от Ambient Light — пришла к нам от телевизоров Филипс, а нынче есть даже на YouTube.
Мы уже рассматривали пару вариантов создания такого эффекта, но не для видео.
А для видео же — есть прекрасная статья на Smashing Magazine: https://www.smashingmagazine.com/2023/07/recreating-youtube-ambient-mode-glow-effect/
Описывается создание нужного эффекта на основе canvas, со всеми пояснениями и кодом. Даже хук для React по пути сделали.
Вообще, до меня не сразу дошло, почему именно холст. Почему бы просто не запустить два видео и одно размыть?
Но, на самом деле, выходит так, что на холст можно отправлять далеко не все кадры, можно по пути накладывать дополнительные эффекты, не нужно заботиться о синхронизации двух видео. Ну и
requestAnimationFrame позволяет здорово снизить нагрузку на клиента. #ambilight #video #canvas
👍8❤2