Canvas JavaScript | Blurred gradient animation
![ThreePixDroid [RU]](http://yt3.ggpht.com/ytc/AIdro_m9hY0wSlD4ygQJ9MwISJSheP6X-5dtaCYYZ-hmk6ytX8k=s48-c-k-c0x00ffffff-no-rj)
HTML-код
- Опубликовано: 26 окт 2020
- #Урок #JavaScript #Сanvas
Всем привет и добро пожаловать на канал, в этот раз создадим анимацию градиента на html5 Canvas.
Видео подойдёт начинающим, тем кто уже понимает JS и хочет попрактиковаться на чём-то более интересном чем вывод текста в Alert или Console.
На канале вы найдете и другие подобные видео! Приятного просмотра!
исходники / sources:
vk: threepixdroid?w=wall-9...
CodePen: codepen.io/ThreePixDroid/pen/...
playlist / плейлист:
• Generative Art | JavaS...
Ура! Каждый новый видос - как глоток радости. Только видишь оповещение о выходе - бросаешь все дела - и бегом смотреть!
Спасибо за приятные слова!)
Досмотрел, очень круто! Такая простая задумка - но как красиво получилось, капец! )) Надо присмотреться к градиентам и режимам наложения в канвасе...чудеса прям )
Жду следующего видео, лайк!
Видео прям вах, клас. Вообще не ожидал что так можно использовать градиенты.
Лайк не глядя
Спасибо за видео, оно очень приятное. Желаю роста подписчиков, контент топовый!
Благодарю!)
Топ! То что я искал!
Спасибо, интересный эффект.
Пожалуйста)
Thank you for sharing your amazing content with us. I always look forward to your new video and ideas. I don't really understand Russian but I can still read the code. I think these videos would get very popular if you made them in English version as well :)
Hey, this channel was created 4 years ago and unfortunately it has only 2.6k subscribers for now. Do you really think that translation into English is going to be enough?
Many thanks! I also watch your channel!)
And in general, I understand very well what you say and code!
I would translate into English, but it takes a lot of time, and this may delay the release)
Future plans include a desire to add English subtitles.
sorry for my English)
@@pavelarseyev452 The first video is only 2 years old!
The first good video is only a ~year old. :D
+ there were 2 breaks in the release of videos 3 and 5 months)
just clarified)
@@ThreePixDroid_RU I know man these videos take so much work, I can relate. There isn't much content like this on RUclips, I think your channel has a huge growth potential. RUclips punishes the channel if there are breaks in uploads which favours people who can do this full time. Looking forward to your new video, good luck :)
very nice, thanks
круто, этот канал надеюсь не заброшен )
Очень круто! Попробую еще поиграться с параметрами. Кста, очень жду урок по webgl ;)
Привет! Понемногу подготавливаю материалы о WebGl, но не тороплюсь.
@@ThreePixDroid_RU ничего, мы подождем, нам не привыкать)))
Удивительно кстати, что canvas не лагает, обычно такие вычисления даются ему с трудом.
Нууу, у кого-то наверное лагает)
А может это не особо заметно из за медленно движения и плавного перехода цвета.
Приветствую. Кажется потерял видео, где ты рассказываешь про 3 дабл числа для вычисления градиента изображения. Не подскажешь в каком? Спасибо!
Привет! пользую похожим эффектом и везде стоит рандомайзер цветов, не подскажешь пожалуйста как поставить определенный градиент?
Здравствуйте, мне интересно где Вы этому научились? Вы заканчивали курсы? Если да то какие? Хочу научиться так же. ))
Привет! Всему учился в интернете)
Начал с бесплатной онлайн книжки the Nature of code..) natureofcode.com/book/
@@ThreePixDroid_RU , за какое время Вы вышли на этот уровень?
@@BoffkaBoffka 1,5 - 2 года с нуля, без знания программирования.
Имею ввиду: обучаться программированию на JS с нуля начал примерно 2 года назад. Легко проследить изменения в стиле кода если смотреть видео в порядке их выхода или даже просто посмотреть последнее и первое по js. Думаю можно было бы добится лучших результатов, если бы не тратил время на съёмку этих самых видео и хорошо бы иметь профессию связанную с программированием или где то в IT, но в моём случае это даже близко не так.
@@ThreePixDroid_RU слушай, ну у тебя уже хорошие результаты, за два года набить такой скилл - это круто
@@ThreePixDroid_RU Чудесные видео, очень понравился канвас. Но как-то по восприятию, первые видео легче воспринимаются чем последние. Похоже уже начинающего скила и опыта не хватает мне. Но вам удачи) Жду следующих видео)
супер но процессор сразу напрягается))) - можно нагрузку както уменьшить?
Да, Оптимизировать точно можно.
Конкретный пример сейчас привести не могу, тестить надо.
Иногда даже бывает желание записать видео на тему оптимизации...
@@ThreePixDroid_RU а может какуюто паузу поставить в рендер или вызывать его раз в секунду?
Есть видео про игровой цикл, в какой то степени оно решает проблему.
ruclips.net/video/ewn6YFeaT9Y/видео.html
А смысла делать задержку в секунду нету.
Ещё в браузере желательно активировать аппаратное ускорение.
Можно так же округлять все используемые значения: радиус окружностей их координаты и т.п. до целого числа.
Заменить все знаки деления на умножение. например вместо ' / 2 ' - '*.5'
Не понял к чему произносить каждый метод да еще и еще и с произношением, только уши режет))
Новые ролики по другому пишу, но раньше казалось, что так понятнее информация доходит до слушателя)