[JS html5 Canvas] Эффект волнистые кольца + sources
![ThreePixDroid [RU]](http://yt3.ggpht.com/ytc/AIdro_m9hY0wSlD4ygQJ9MwISJSheP6X-5dtaCYYZ-hmk6ytX8k=s48-c-k-c0x00ffffff-no-rj)
HTML-код
- Опубликовано: 11 окт 2024
- В видео создадим эффект перемещения волн по окружности,
данная анимация набирает популярность и всё чаще встречается на просторах интернета в разных вариациях.
При создании кода не будут использованы дополнительные библиотеки, только чистый JS.
В ролике что-то было не понятно? Пишите в комментарии или отправьте сообщение в группу вконтакте : im?medi...
Редактор кода: Visual Studio Code + дополнение Live Server для просмотра изменений на странице браузера в реальном времени.
sources:
threepi...
codepen.io/Thr...
v2: codepen.io/Thr...
v3: codepen.io/Thr...
Забыл упомянуть в видео, что переменные centerX и centerY нужно перенести с 28 - 29 строчки наверх и разместить над функцией init() и установить их значения внутри функции - для адаптивности, теперь анимация при изменении размеров области просмотра всегда будет в центре.
Вот так должно быть начиная с 5 строчки:
let centerX = 0;
let centerY = 0;
function init() {
cnv.width = innerWidth;
cnv.height = innerHeight;
centerX = cnv.width / 2;
centerY = cnv.height / 2;
}
init();
fixed:
codepen.io/Thr...
Видео - топ
канал - шикарный
дикция - высший уровень
Я - тупой(
Теперь я знаю у кого я буду тыр.... кхм, кхм, учиться делать анимацию на JS. Спасибо!
Забыл упомянуть в видео, переменные centerX и centerY нужно перенести с 28 - 29 строчки наверх и разместить над функцией init() и установить их значения внутри функции - для адаптивности, теперь анимация при изменении размеров области просмотра всегда будет в центре.
Вот так должно быть начиная с 5 строчки:
let centerX = 0;
let centerY = 0;
function init() {
cnv.width = innerWidth;
cnv.height = innerHeight;
centerX = cnv.width / 2;
centerY = cnv.height / 2;
}
init();
Дуже гарно! Дякую за пояснення!
какое обнадеживающее вступление! приступаю )
воткнул лайк просто потому что еще с прошлого видоса до сих пор осталось приятное впечатление. Теперь можно и посмотреть :)
Круто, спасибо)
Прикольно, спасибо, ты отличный фантастик для новичков
Как всегда прекрасное видео! Побольше бы таких как ты, вот только я недавно ушёл из Front-End на Back-End и теперь не пописать мне такую красоту, хотя я и нодой доволен)
Спасибо;)
Просто очишуеть.Залипал минут двадцать.Спасибо за видео.
Не за что)
Друг спасибо тебе. Я просто в шоке с твоих работ. СПАСИБО!!! ВИДИШЬ КОД СТАВИШЬ ТУТ ЖЕ ЛАЙК!!!!
Спасибо большое)
Очень круто объясняешь!!! Спасибо за видео!!!
Не за что)
очередное огромное спасибо за урок)
asmr для разрабов 😍
Отличный урок. Спасибо.
Не за что)
Вчера наконец-то воспользовался знаниями из этого видоса и из видоса про кривые безье для набросков для будущего проекта. pavelarseyev.github.io/uniq-menu-hover/ Спасибо большое еще раз!
не за что)
какава красота. ну кака, все-таки, ва!
Спасибо !)
Этим голосом должны зачитываться вопросы для Евгения Понасенкова.
Не бросай дело, одно видео переубедило на тебя подписаться.
хорошо) спасибо)не собираюсь бросать)
Привет! Очень здорово получается! Спасибо большое! Было бы интересно сделать анимацию чего-нибудь сыпучего. Например песка или сахара. Что б сверху постоянно сыпалась тонкая струйка, а внизу насыпалась горка. При этом что б частички скатывались с горки)
Не за что)
В планах есть урок с шариками которые упираются друг на друга, думаю это будет похоже на то что ты хочешь. Но без понятия когда запишу видео на эту тему....
21:04 А ещё лучше записать startAngle %= 360 после инкремента)
И #771122 вообще можно записать как #712 (а ещё лучше вовсе сделать ctx.fillStyle = `hsl(0, 100%, ЯРКОСТЬ%)`, чтоб можно было много колец создать и чтоб не вводить их цвета вручную).
К слову, вместо cnv.width |= 0 можно просто использовать cnv.width += 0 или вообще cnv.width = cnv.width :D (прост этот оператор может немного сбить с толку новичков).
P.s. но из-за изменения размера канваса сбрасывается состояние контекста, к примеру ctx.font :(
А так эффект супер, я б не догадался.. :D Спасибо)
Напомнило ещё эффект "вжимания" круга в agar.io: i.ibb.co/ygYqG97/0.png
Спасибо за отзыв) Да в оригинале подбирал цвета в ручную, чтоб глазу приятно было) но в примерах к уроку есть и другие варианты, если правильно помню)
Круто. Я раньше только слышал за канвас, но твое видео очень замотивировало разобраться. Не подскажешь, как начать изучение? А то я сам нашел только старые туториалы (с англом дела не очень).
Привет) Сам в основном изучал по этой документации developer.mozilla.org/ru/docs/Web/JavaScript и подобным ей . А ещё по онлайн книжке Nature of code - natureofcode.com/book/introduction/
@@ThreePixDroid_RU, Спасибо
как говорится - нихрена не понял, но было очень интересно !
ну это тоже хорошо)
Насчет смещения угла для волн...разве не логичней было бы добавить это смещение в том месте где объявляется переменная с этим углом? А вообще, спасибо, конечно за видео, и особенно за такую подробную демонстрацию пошаговой реализации задумки. Очень круто 🙂
Спасибо, возможно было бы и логичнее;) Уверен, там ещё есть что исправлять и даже более, если хорошо покопаться в коде, то думаю получится сократить его ещё на строк 10, а может и 30.
Аа, как найти эту математическую формулу? Видео очень классное и залипательное!
Это полностью мой код - любые математические вычисления в нём это мои решения и я не думаю что в интернете есть о них информация кроме этого видео ) Но очень вероятно, что если поискать, то можно найти аналогичные решения с куда более изящным решением.
Не могу сказать что не понравилось , но к стилистике и архитектуре кода есть вопросы. И есть сомнения в правильности такого подхода...
Привет;) Вся архитектура основана на советах оставленных к предыдущим видео в комментариях и сообщениях вк.
Конечно, вряд ли когда нибудь будет код способный угодить всем.
Просто скажи что бы ты изменил в коде и возможно это повлияет на следующие видео.
Было бы неплохо предусмотреть ресайз страницы (особенно критично при поворотах планшета или телефона). А то я окно подергал а отрисовка не подстраивается и кольца за пределами вьюпорта.
@@OXAYAZA Да, это правда) Во время записи постоянно забываю о таких мелочах;) Это можно исправить если переменные centerX & centerY поместить в функцию init.
Чтоо?! |= 0 для ширины...что-то новенькое...а об этом можно где-то почитать?
По ссылке ниже возможно будет чуть более понятно -
github.com/lionleaf/dwitter/wiki/Canvas-specific-Golfing-Tricks
На этом сайте постоянно пользуются таким способом очистки - www.dwitter.net/
@@ThreePixDroid_RU спасибо
жду новых видосов как посылку с али
спасибо) оригинальный комментарий, ценю такие!)
Вроде такие классные вещи делает, а код на гитхаб заливать не научился.
P.S. Ты классный
спасибо) в гитхабе пока нет смысла , когда канал станет более популярным, то да) начну заливать на гитхаб, а сейчас специально ссылка на вк группу, для трафика .
@@ThreePixDroid_RU а не надо. пусть пишут ручками. полезно
очень точно подмечено!)
Обещаний по поводу канала как у призидента по поводу страны
Ни разу не произнес слово "обещаю".
Лишь сообщаю о планах на будущее, не более.
Да, и последний вопрос. Где можно наверстать упущенное и освоить все эти геометрическо-математические штуки с синусами, косинусами и т.д. Понимаю, что это элементарные школьные вещи, но не хочется снова вычитывать их в школьных учебниках...
Павел Арсеев в школьном учебнике 6-7 класса по геометрии
Прямо тут, на RUclips, полно хороших обучающих видео, точно найдешь про синус и косинус, что бы освежить память.
@@johnd1431 прикольно отвечать на вопрос, в котором уже описано то, что ваш ответ не подходит?
Я бы не использовал такие трюки с очисткой канваса. Однажды это поведение может измениться и код сломается.
Но разве плохо знать о такой возможности?
Господи какой же я тупой (
Спасибо!
ШИКАРНО!
не за что)
Спасибо большое за гарный контент:)
не за что;)