Canvas JavaScript | Bezier curves animation | rus
![ThreePixDroid [RU]](http://yt3.ggpht.com/ytc/AIdro_m9hY0wSlD4ygQJ9MwISJSheP6X-5dtaCYYZ-hmk6ytX8k=s48-c-k-c0x00ffffff-no-rj)
HTML-код
- Опубликовано: 27 апр 2020
- Привет! В видео создадим простую анимацию кривых Безье на #Canvas
используя #JS
Молния на js: • Lightning with Vanilla...
Перемещение частиц по шестигранной сетке: • Generative Art | Перем...
Плейлист с другими анимациями: • Generative Art | JavaS...
Ссылка на исходники : threepixdroid?w=wall-9...
CODEPEN1: codepen.io/ThreePixDroid/pen/...
CODEPEN2: codepen.io/ThreePixDroid/deta...
CODEPEN3: codepen.io/ThreePixDroid/pen/...
CODEPEN4: codepen.io/ThreePixDroid/pen/...
![[JS html5 Canvas] Эффект волнистые кольца + sources](/img/1.gif)
единственный канал от которого я жду уведомлений :)
Сначала лайк, а потом уже можно смотреть :)
Круто:D
крутой голос и подача, запоминается урок . продолжай
Спасибо за старания, прекрасная работа)
Не за что :)
Как всегда офигенно!!!
Благодарю;) Рад что угодил!
Отличная работа! Слов нет!
спасибо)
опять красота и в результате, и в коде. Очень рад, что я нашел ваш канал. Не успокоюсь пока все не пересмотрю и не законспектирую)
Спасибо) Очень рад, что нравится)
Спасибо огромное за твои видео! У тебя отлично получается, код читабельный и приятный, а все твои эффекты на канвас просто чудесные!!Вдохновляешь, поскорее бы увидеть твой новый ролик
Спасибо за добрые слова;)
просто нет слов. Браво!!!
Спасибо!)
Спасибо, прекрасный контент! Не знаю почему у тебя так мало подписчиков, всё по делу и понятно, приятный голос и хорошая подача. Удачи, желаю тебе много подписчиков и столько же идей для видео)
Хотя... Две тысячи... Много)
Спасибо большое! Очень приятно)
Очепушеительный канал. Автору огромный респект и уважение.*интро огонь
Спасибо!)
Очень круто!
Спасибо!
Очень круто. Большое спасибо
Спасибо) не за что)
Класс... Очень круто!
Спасибо!
как я рад что решил выучить руский язык
отличное видео
Спасибо!)
NIce effect
Thank you!)
Очень круто! Скажи, где ты работаешь?)
Привет) это чисто хобби..
Моя работа не связанна с компьютерами.
8:00 resize можно повесить так же как и onload на стрелочную функцию, пример:
window.onresize = () => callback...
Все офигенно, как и всегда. Подскажи пожалуйста музычку на фоне
Сюда бы еще добавить какой-нибудь Шум Перлина для стартовых и конечных точек, чтобы кривые ползали по краям экрана плавно, и при этом еще и извивались )
Можно использовать тот же самый шум что и для точек контроля :) он очень похож на шум перлина 1d...
Немного поправила для чёткости.
В setCanvasSize() задаем размер экрана в 2 раза больше,
this.size.w = this.cnv.width = window.innerWidth * 2;
this.size.h = this.cnv.height = window.innerHeight * 2;
а потом в css возвращаем canvas { width: 100vw; height: 100vh }.
Надеюсь, кому-нибудь пригодится ^^
Droid, уроки невероятные, смотрю не отлипая
Спасибо) очень приятно!)
для чего размер в 2 раза больше делать? на ту же видимую область больше работы в 2 раза будет, разве нет?
@@user-hy7uu2yf9z для ретины, чтобы не было мыльно
@@dvladyko8258 надеюсь, информацию о типе монитора можно получить в рантайме. Не хотелось бы грузить двойными расчетами пользователя, у которого монитор не с высокой плотностью.
было бы интересно посмотреть на какие-либо реализации интересных анимаций для реальных проектов.
Смотря о каких реальных проектах идёт речь) Анимацию то любую можно на сайт вставить.... другое дело сам алгоритм - его можно перенести на любой другой язык программирования. Особенно если учесть возможность скриптинга в таком ПО как blender например.
31:26 И тут я заплакал
Невероятно, как до такого самому додуматься? Или с опытом придет?
Спасибо за контент:)
Спасибо) С опытом точно придёт, но кроме этого, я постоянно ищу идеи в интернете, например по запросу "2d abstract gif") Почти такую же анимацию кривых Безье видел в интернете и решил реализовать её сам, а вот предыдущее видео - Stardust, просто пришел как то вечером и хотел сделать анимацию чёрной дыры, но получилось не очень красиво, тогда немного изменил код, добавил красок и вот - сочная анимация Звёздной пыли)
@@ThreePixDroid_RU Спасибо большое за информацию! :)
Привет, большое спасибо за качественный контент. Если можно, вопрос - какая тема/color scheme здесь использовалась, уж больно она мне зашла... Желаю успехов. Спасибо
Привет! В редакторе Horizon Bold если не ошибаюсь) Спасибо!;)
@@ThreePixDroid_RU Спасибо большое за ответ. Всех благ
Спасибо! )
Можешь ли разбить любое фото на множество частичек и чтоб при клике на фото, оно рассыпалось как стекло, а при еще одном клике собиралось обратно?
да, конечно)
Ну не знаю, к чему этот напыщенный джаваподобный синтаксис..)
Реализация на этапе 8:07 вполне может уложиться в 15 строк кода - jsfiddle.net/r1g6wsun/ :D
Захотелось так в этот раз, для разнообразия:) Да, ты прав насчёт меньшего кол-ва строк!)
а как просто анимировать синусоидальную волну ? просто что то типа сигнала, что бы просто была волна как на 0:51
Привет, у меня такой вопрос, озадачился вопросом анимации круглого графика, как сделать анимацию его раскрытия
Вот пример того, что хотелось бы сделать codepen.io/a-hoshi/pen/LRbmwk
А я тут с самого начала, если меня кто-то помнит))
Я помню!)
Как можно сделать этот график более ломанным, холмистым?
pls don't use english titles if you aren't gonna speak english
sorry, but why?)I like the way English headings look) I would love to speak English, but I don't know it very well.
@@ThreePixDroid_RU Because later when people are searching for videos in english, they end up wasting time clicking on videos they can't even understand. It's really common with indian people doing that and speaking hindu and it's a plague. If you included at least one or two words in russian it wouldn't have showed up for me
@Flamenco Okay, got you. I will edit the title and add Russian words) But some people do not need a lesson, they only need a link to the source code in the description of the video. The code is written in javascript, which is an international language.
Good luck to you!)
p.s.
Added a couple of Russian words!)
@@ThreePixDroid_RU Thanks ^^
@@ThreePixDroid_RU а он прав, я думал рассказ будет на английском, а тут хлоп и на русском. Так что не вводи в заблуждение.
Спасибо!
КРУТЬ!
Не за что!)