[Canvas JS] Волна из текста : часть 1 + исходники | Wavy text : part 1 + sources

#getImageData #putImageData #measureText
В первой части видео создадим довольно популярный эффект - волну из текст.
К концу видео у вас будет код в котором можно будет легко контролировать такие параметры как: высоту волны, скорость волны, количество фрагментов текста, скорость перемещения текста..
Код можно развивать для получения куда более интересных эффектов...
и в этом видео вы найдёте почти всю необходимую информацию для этого.
Тайм-код :
00:00 Заставка и описание проекта
01:10 Пошаговый план и базовые настройки
02:20 Объявляем 2 класса: Animation и Canvas
03:40 Создаём и настраиваем холст
07:20 Подключаем контекст и рисуем текст
10:30 Получаем данные изображения getImageData
12:10 Помещаем данные изображения на холст putImageData
14:00 Узнаём ширину текста используя measureText
18:20 Нарезаем текст на части
24:00 Делаем волну из фрагментов текста используя Math.sin
31:50 Анимируем волну с помощью Date().getMilliseconds и requestAnimationFrame
35:30 Добавляем эффект бесконечной бегущей строки
40:20 Заключение и финальные слова
Вторая часть: • [Canvas + JS] Волна из...
Исходники первой части:
CodePen: codepen.io/ThreePixDroid/pen/...
VK threepixdroid?w=wall-9...
Исходники второй части:
CodePen: codepen.io/ThreePixDroid/pen/...
VK: threepixdroid?w=wall-9...

[@ThreePixDroid_RU]

Исходники первой части:
CodePen: codepen.io/ThreePixDroid/pen/QWKMBRW
VK vk.com/threepixdroid?w=wall-97964493_94

[@dvladyko8258]

у меня нет слов. Как же круто! Тут тебе и классы, и стрелочные функции, и подробный разбор. Так ещё и сам по себе эффект бомбический! Просто потрясающе!

[@ThreePixDroid_RU]

Спасибо большое!)

[@taras577]

Очень понятно объясняете, спасибо в очередной раз)

[@ThreePixDroid_RU]

Пожалуйста)

[@pavelarseyev452]

Ой, я когда-то докапывался за неправильное объяснение "убирания полос прокрутки с боди". А сейчас вижу - все абсолютно шикарно! Приятно думать, что я мог на это повлиять, теоретически ) Продолжаю смотреть :)

[@ThreePixDroid_RU]

Привет) Да, это я сделал по твоим советам (ты мне об этом вроде раза 3 точно писал)... :)

[@Frankslaboratory]

Another unique effect, great job

[@stas_kats]

Круть !

[@ThreePixDroid_RU]

Спасибо!)

[@eloh1mZ]

Я думаю, пока ты обговариваешь что-то ты должен писать код.
Например: «создадим класс Canvas» (на экране печатается - class Canvas {...) и не диктуешь что писать
Это сделает видео более динамичным
Ещё: «поместим его в body» (на экране в это время - document.body.appendChild(this.cnv);)

[@ThreePixDroid_RU]

Спасибо..) Принято)

[@neonbrickchannel2136]

Как всегда топ, как раз хотел недавно разобраться с measureText

[@neonbrickchannel2136]

32:10 прикольно, никогда бы не додумался так сделать)))

[@neonbrickchannel2136]

И ещё один момент, текст - довольно дорогой по производительности примитив для рисования, поэтому, если вы много работаете с ним, советую задавать его размер с помощью ctx.scale(). Так производительность очень заметно возрастает

[@ThreePixDroid_RU]

Да, но тут мы используем текст всего 1 раз, в другом случае, когда текста много - это правда)

[@eloh1mZ]

Красиво. Ждём webgl

[@ThreePixDroid_RU]

Привет) Это будет.. точно не ближайшие 8 видео. Сейчас пытаюсь сократить разрыв между выходом видео и смена темы с JS на шейдеры этому не поможет...

[@neonbrickchannel2136]

Поддерживаю, я ему в ВК уже давно пишу об этом

[@neonbrickchannel2136]

Кстати, если подключить сюда класс WaveNoise из видео про анимацию кривых, можно сделать волну хаотичной

[@ThreePixDroid_RU]

Точно) Интересная идея)

[@MusiienkoVS]

А будет ли контент с фреймворком(React, Vue, Angular)+canvas or WebGL?

[@ThreePixDroid_RU]

да, очень не скоро. В приоритете сейчас другие видео.

[@MsTim159]

Подскажите, что за тема у вас в vs code?

[@ThreePixDroid_RU]

Привет Horizon Bold )