ThreePixDroid [RU]
ThreePixDroid [RU]
  • Видео 28
  • Просмотров 229 512
Text Encryption Effect on Vanilla JavaScript | rus
Предыдущие / Связанные видео:
подключение Canvas - ruclips.net/video/XgXGXEqQJqI/видео.html
игровой цикл / цикл анимации - ruclips.net/video/ewn6YFeaT9Y/видео.html
Исходники:
github.com/ThreePixDroid/Scrambletext
Полезные ссылки:
шрифт comfortaa - fonts.google.com/specimen/Comfortaa
Таблица ascii из видео - en.wikipedia.org/wiki/ASCII
Интересное:
Анимация градиента : ruclips.net/video/2k4qqqGoCFA/видео.html
Гексагональная сетка : ruclips.net/video/r6l75hWKpac/видео.html
Молния : ruclips.net/video/d88M_XuB4jA/видео.html
Просмотров: 4 326

Видео

События мыши для игр | JavaScript
Просмотров 3 тыс.3 года назад
В видео демонстрируется как использовать мышь для управления элементом нарисованным на Canvas. Предыдущие / Связанные видео: Подключение Canvas : ruclips.net/video/XgXGXEqQJqI/видео.html Модули | JavaScript : ruclips.net/video/rz_t7t3mzww/видео.html Игровой цикл : ruclips.net/video/ewn6YFeaT9Y/видео.html События клавиатуры для игр : ruclips.net/video/efiN3noqQ9E/видео.html Исходники: начальные ...
События клавиатуры для игр | JavaScript
Просмотров 4,1 тыс.3 года назад
В видео демонстрируется как использовать клавиатуру для управления персонажем. Предыдущие / Связанные видео: Подключение Canvas : ruclips.net/video/XgXGXEqQJqI/видео.html Модули | JavaScript : ruclips.net/video/rz_t7t3mzww/видео.html Игровой цикл : ruclips.net/video/ewn6YFeaT9Y/видео.html Исходники: начальные файлы : github.com/ThreePixDroid/02_game_loop конечный результат : github.com/ThreePix...
Сразу 4 новые анимации | Triangle mesh - upgrade | JavaScript
Просмотров 2,4 тыс.3 года назад
#Анимация #Canvas #JavaScriot Upgrade это новый формат видео на канале. В этом видео прокачиваем ранее созданную анимацию Triangle mesh. Файлы из начала видео (Triangle mesh animation): GitHub: github.com/ThreePixDroid/03_triangle_mesh.js Исходники - финальный результат со всеми анимациями: GitHub: github.com/ThreePixDroid/Triangle_mesh_upgrade_-New_types_of_mesh Предыдущие / Связанные видео: М...
Women's day interactive animation | Canvas & JavaScript | Only code
Просмотров 1,3 тыс.3 года назад
Моя попытка создать интересную анимацию на 8 марта) В исходниках для себя вы можете найти полезным функцию генерирующую путь в виде цифры 8 и другую функцию создающую путь в виде сердца используя синус и косинус, а так же метод получения дистанции между 2-умя точками с погрешностью в 5%, но при этом работающий на 50-70% быстрее Math.hypot Исходники / sources: CodePen - codepen.io/ThreePixDroid/...
Triangle mesh | Canvas & JavaScript | ru
Просмотров 4,7 тыс.3 года назад
#Triangle #mesh #animation with #vanilla #JavaScript В этом видео создадим анимированный меш из треугольников. Приятного просмотра. Исходники - Стартовые файлы: GitHub : github.com/ThreePixDroid/mesh.js Исходники - Финальные файлы: GitHub : github.com/ThreePixDroid/03_triangle_mesh.js Discord для программистов: discord.gg/84ucHTtaz9 Предыдущие / Связанные видео: Подключение Canvas : ruclips.net...
Game loop | JavaScript | rus
Просмотров 6 тыс.3 года назад
В этом видео используя #requestAnimationFrame создадим одну из важнейших частей любой игры - Игровой цикл. Скажи пока таймаутам и интервалам... Предыдущие / Связанные видео: Подключение Canvas : ruclips.net/video/XgXGXEqQJqI/видео.html Модули | JS : ruclips.net/video/rz_t7t3mzww/видео.html Исходники: GitHub: github.com/ThreePixDroid/02_game_loop CodePen: codepen.io/ThreePixDroid/pen/gOLrzRM Пол...
Модули | JavaScript
Просмотров 2,8 тыс.3 года назад
В этом ролике кратко объясняется как разбить файл на модули и в чём преимущество. Видео создано для тех кто ещё не сталкивался с модулями и я буду просто ссылаться на него из других видео где использую модули. Предыдущие / Связанные видео: Подключение Canvas: ruclips.net/video/XgXGXEqQJqI/видео.html Продолжение / Связанные видео: Игровой цикл : ruclips.net/video/ewn6YFeaT9Y/видео.html Напоминан...
Подключение Canvas | JavaScript
Просмотров 4,5 тыс.3 года назад
В этом видео в последний раз* подключаем #Canvas. Некоторые новые видео теперь будут начинаться с того момента когда Canvas уже настроен, а на это видео я буду просто ссылаться в начале ролика. Меня уже несколько раз об этом просили, в ответ я это сделал. Приятного просмотра!) Следующее логическое видео: Модули | JS : ruclips.net/video/rz_t7t3mzww/видео.html Интересное видео: Игровой цикл на JS...
[Canvas + JS] Волна из текста : часть 2 + исходники | Wavy text : part 2 + sources
Просмотров 9543 года назад
#getImageData #putImageData #measureText Во второй части видео раскрасим ранее созданный эффект волны из текст. Часть 1: ruclips.net/video/JqZV_wXDy2w/видео.html К концу видео у вас будет код в котором можно будет легко контролировать такие параметры как: высоту волны, скорость волны, количество фрагментов текста, скорость перемещения текста, а так же наложить любое изображение на текст в качес...
[Canvas JS] Волна из текста : часть 1 + исходники | Wavy text : part 1 + sources
Просмотров 1,9 тыс.3 года назад
#getImageData #putImageData #measureText В первой части видео создадим довольно популярный эффект - волну из текст. К концу видео у вас будет код в котором можно будет легко контролировать такие параметры как: высоту волны, скорость волны, количество фрагментов текста, скорость перемещения текста.. Код можно развивать для получения куда более интересных эффектов... и в этом видео вы найдёте поч...
[HTML5 CSS] Animated gradient text + Исходники
Просмотров 1,5 тыс.3 года назад
Первый ролик на канале посвящённый эффектам CSS. В видео мы создадим анимированный текст с текстурой градиента, для понимания достаточно знания основ css & html. Приятного просмотра! Ссылка на исходники - CodePen: codepen.io/ThreePixDroid/pen/eYzPKGg
Canvas JavaScript | Blurred gradient animation
Просмотров 7 тыс.3 года назад
#Урок #JavaScript #Сanvas Всем привет и добро пожаловать на канал, в этот раз создадим анимацию градиента на html5 Canvas. Видео подойдёт начинающим, тем кто уже понимает JS и хочет попрактиковаться на чём-то более интересном чем вывод текста в Alert или Console. На канале вы найдете и другие подобные видео! Приятного просмотра! исходники / sources: vk: threepixdroid?w=wall-97964493_82 C...
Canvas & JavaScript | Находим точки пересечения окружностей
Просмотров 6 тыс.3 года назад
Привет! В видео создадим простую анимацию движения окружностей по Canvas и найдём точки пересечения контуров этих окружностей. Молния на js: ruclips.net/video/d88M_XuB4jA/видео.html Перемещение частиц по шестигранной сетке: ruclips.net/video/r6l75hWKpac/видео.html Плейлист с другими анимациями: ruclips.net/user/playlist?list... Ссылка на исходники : threepixdroid?w=wall-97964493_80 CODEP...
Canvas JavaScript | Bezier curves animation | rus
Просмотров 10 тыс.4 года назад
Привет! В видео создадим простую анимацию кривых Безье на #Canvas используя #JS Молния на js: ruclips.net/video/d88M_XuB4jA/видео.html Перемещение частиц по шестигранной сетке: ruclips.net/video/r6l75hWKpac/видео.html Плейлист с другими анимациями: ruclips.net/p/PLwNXfMEfLgf6hT9IdBrcFw1mPvK9aqvTA Ссылка на исходники : threepixdroid?w=wall-97964493_73 CODEPEN1: codepen.io/ThreePixDroid/pe...
Vanilla JS | Stardust parallax effect + src | rus
Просмотров 8 тыс.4 года назад
Vanilla JS | Stardust parallax effect src | rus
Generative Art | Перемещения частиц по гексагональной сетке | PROGHUB
Просмотров 13 тыс.4 года назад
Generative Art | Перемещения частиц по гексагональной сетке | PROGHUB
[JS html5 Canvas] Эффект волнистые кольца + sources
Просмотров 11 тыс.4 года назад
[JS html5 Canvas] Эффект волнистые кольца sources
Canvas & JavaScript | Притяжение и отталкивание частиц | rus
Просмотров 26 тыс.4 года назад
Canvas & JavaScript | Притяжение и отталкивание частиц | rus
Lightning with Vanilla JS | Эффект электроразряда + исходники
Просмотров 10 тыс.4 года назад
Lightning with Vanilla JS | Эффект электроразряда исходники
[Canvas JavaScript ] Эффект волны из точек + файлы проекта
Просмотров 8 тыс.4 года назад
[Canvas JavaScript ] Эффект волны из точек файлы проекта
Particles Canvas | Популярная анимация частиц на чистом JS с исходниками
Просмотров 37 тыс.5 лет назад
Particles Canvas | Популярная анимация частиц на чистом JS с исходниками
JavaScript | Визуализация звука с микрофона + файлы проекта
Просмотров 13 тыс.5 лет назад
JavaScript | Визуализация звука с микрофона файлы проекта
JavaScript | Аудио визуализация + исходники
Просмотров 19 тыс.5 лет назад
JavaScript | Аудио визуализация исходники
Как запретить выделение текста html/css
Просмотров 2,1 тыс.5 лет назад
Как запретить выделение текста html/css
Убираем синюю обводку/рамку у input/button
Просмотров 8 тыс.5 лет назад
Убираем синюю обводку/рамку у input/button
Устанавливаем локальный сервер (Open Server)
Просмотров 5415 лет назад
Устанавливаем локальный сервер (Open Server)
Меняем язык в Blender 2.8
Просмотров 14 тыс.5 лет назад
Меняем язык в Blender 2.8

Комментарии

  • @Lyoshaxxx
    @Lyoshaxxx Месяц назад

    спасибо это помогло исправить мой баг с игрой

  • @DanielPark-lq3oi
    @DanielPark-lq3oi 2 месяца назад

    ты супер мне прям очень понравился ролик 👍👍❤❤

  • @user-bt1wz1xf5e
    @user-bt1wz1xf5e 3 месяца назад

    а как 1 функцией нарисовать 2 независимых объекта, с которыми можно взаимодействовать ?

  • @user-tq4kj5do1s
    @user-tq4kj5do1s 3 месяца назад

    Здравствуйте меня зовут Анатолий, я просмотрел все ваши видео и очень-очень понравилось, начал изучать Canvas

  • @user-mw8ps7up9p
    @user-mw8ps7up9p 3 месяца назад

    Жаль, что нельзя отключить фоновую музыку. Я бы поставил свою фоном и смотрел. Эх, Была бы полезная фича на ютуб в такого рода роликах, где фоновая музыка не играет никакой роли, но приходится слушать ее вместо включения своей или вообще прекрасной тишины на заднем плане.

    • @user-mw8ps7up9p
      @user-mw8ps7up9p 3 месяца назад

      Вырезал заднюю музыку адобовской софтиной. Интересно есть какие то сервисы для таких задач...?

  • @user-uq5bf2qe2s
    @user-uq5bf2qe2s 3 месяца назад

    31:26 И тут я заплакал

  • @renatvlasov4855
    @renatvlasov4855 3 месяца назад

    Чувак явно не из мира js. Странное форматирование, сравнение с приведением вместо эквивалентности, весьма непривычный стиль объявления переменных через деструктуризацию массива, let там, где нужен const

    • @ThreePixDroid_RU
      @ThreePixDroid_RU 3 месяца назад

      в точку, даже близко не из мира js, просто хобби

  • @SergeyChuiko
    @SergeyChuiko 4 месяца назад

    Все хорошо, но чистый код из видео работать не будет. 1. Может не успеть декодить по прерыванию Максимального времени, 2. Нет определения, что буква в слове уже совпадает с оригиналом, вроде. И зачем это на Канвасе? Более практично какой то определенный блок текста анимировать ...

  • @ChelovekVeka
    @ChelovekVeka 5 месяцев назад

    Спасибо

  • @Trendy_Candy
    @Trendy_Candy 6 месяцев назад

    Привет! Сможешь сделать бегущую строку с текстом в форме волны? Контур в форме волны, и по контуру передвигается текст , зацикленно. Похоже на бегущую строку только текст бежит в форме волны🙏🙏🙏

  • @PolAero
    @PolAero 7 месяцев назад

    Немогу внедрить на свою страницу,в ней есть выпадаюшее меню с веру и уже есть обоина бекраунд которая двигается линейно вправо в лево

  • @valeriaiakovleva3961
    @valeriaiakovleva3961 8 месяцев назад

    спасибо за уточнение, без live server не запускалось

  • @Danny-uc6kx
    @Danny-uc6kx 8 месяцев назад

    очень красиво и интересно

  • @gm_Maker
    @gm_Maker 8 месяцев назад

    Круто!😮

  • @party_koala
    @party_koala 9 месяцев назад

    Спасибо за урок! Скажите, пожалуйста, а возможно ли вместо частиц сделать, например, текст, разные слова?

    • @ThreePixDroid_RU
      @ThreePixDroid_RU 9 месяцев назад

      Да, конечно.. , самый простой способ рисовать текст вместо кругов. fillText. developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText

    • @gleuphoria2711
      @gleuphoria2711 9 месяцев назад

      @@ThreePixDroid_RUпривет можно его поставить как лоадер сайта?😮

  • @ultixn
    @ultixn 9 месяцев назад

    Когда новые видосы! Просто топ контент!!!!

  • @vadicus6534
    @vadicus6534 10 месяцев назад

    Очень интересно и красиво, спасибо! Все получислось как в видео, но понимания всех этих гипотенуз и т.д. пока не произошло)

    • @ThreePixDroid_RU
      @ThreePixDroid_RU 8 месяцев назад

      С практикой придёт и понимание:)

  • @mihalt1
    @mihalt1 Год назад

    Дуже гарно! Дякую за пояснення!

  • @xu2593
    @xu2593 Год назад

    единственный канал от которого я жду уведомлений :)

  • @John_Johnson746
    @John_Johnson746 Год назад

    Вот удоды, неужели вы думаете, что запретив выделять текст или копировать картинки вы сделаете сайт лучше? Бесят удоды, которые так делают. Обходится этот запрет элементарно, при желании можно сохранить html формат на компе и изменить все настройки, скопировать весь текст вместе с картинками и сплагиатить, я бы именно так и делал со всеми сайтами, которые делают на стороне пользователя всякие блокировки встроенных функций, типа сохранить картинку или сохранить текст. Зачастую текст сохраняется для важной информации например какая-то научная ценность и т.д.

    • @ThreePixDroid_RU
      @ThreePixDroid_RU Год назад

      Навряд ли, кто-то так думает) Обычно отключаю выделение текста на кнопках и менюшках, чтобы оно не мешало когда случайно мышкой провёл или выделяешь, что то на сайте для копирования)

    • @ChelovekVeka
      @ChelovekVeka 5 месяцев назад

      Это в некоторых моментах удобно!

  • @vladislave4649
    @vladislave4649 Год назад

    Топ! То что я искал!

  • @artemkerez2152
    @artemkerez2152 Год назад

    Incredible!

  • @jdidbsivskwnucj
    @jdidbsivskwnucj Год назад

    Thank You, I need it

  • @llwebstylell242
    @llwebstylell242 Год назад

    а чё за песня на 25:50 ?

  • @l1me2.02
    @l1me2.02 Год назад

    ЛЕГЕНДА 😎😎

  • @stranger271271
    @stranger271271 Год назад

    Автор где идею скомуниздил? Почему пропускаешь важные моменты такие как, при создании точки направление только из 3х вариков, при смене направления выбор из 2х позиций и самое главное где объяснение почему в экспоненту оборачиваешься шаги.

    • @ThreePixDroid_RU
      @ThreePixDroid_RU Год назад

      Нахожу идеи для анимаций в гифках и на codepen.. Например можно загуглить "hexagons 2d animation" в картинках) На codepen есть прям почти такой же эффект, я ориентировался на него. Ну, а если что то не доглядел, то тут ничего поделать не могу) если тока в следующем видео постараться быть внимательнее)

  • @stranger271271
    @stranger271271 Год назад

    Зачем лишнее условие && this.VelocityX>0 не требуется

    • @ThreePixDroid_RU
      @ThreePixDroid_RU Год назад

      Я тебе больше скажу) там вообще условия не обязательны, можно гораздо проще всё считать, но на тот момент я этого не знал) Возможно запишу видос на эту тему... Пока никак не могу вернуться к записи уроков..

  • @stranger271271
    @stranger271271 Год назад

    Уэльское произношение не может не радовать. А вот стили как то вяло написаны

  • @annashalbuzova8124
    @annashalbuzova8124 Год назад

    Супер, спасибо большое за такой годный контент по теме canvas. Автору большой респект)🤘👍

  • @artemdatsko5201
    @artemdatsko5201 Год назад

    Хорошее видео, подача информации отличная, всё сказано коротко и ясно) хотел спросить как сделать тот же Live Server только в Sublime Text? пересмотрел много сайтов, ничего не помогает, был бы рад если вы подскажете

    • @ThreePixDroid_RU
      @ThreePixDroid_RU Год назад

      Вроде в sublime text должен быть похожий плагин.. но я никого не юзал sublime и точно сказать не могу. Но можно установить любой локальный сервер.

  • @pseudonim510
    @pseudonim510 Год назад

    Ребята, дайте совет, как можно динамически подставлять другое аудио для такой визуализации? А то я пытаюсь в createMediaElementSource подснуть другое аудио, а мне выдает ошибку: Uncaught DOMException: Failed to execute 'createMediaElementSource' on 'AudioContext': HTMLMediaElement already connected previously to a different MediaElementSourceNode.

  • @4aek03
    @4aek03 Год назад

    Как сделать вместо черного фона в градиент?

  • @Salem_Witch_
    @Salem_Witch_ Год назад

    Круто, спасибо! а где посмотреть, как привязать это дело к музыке? ужасно хочется попробовать это сделать))

  • @arkadytokaev7016
    @arkadytokaev7016 Год назад

    Как астанавииить?

  • @drth_plgs
    @drth_plgs Год назад

    привет, а будут новые ролики? Очень классный материал на канале)

    • @ThreePixDroid_RU
      @ThreePixDroid_RU Год назад

      Привет!) Пока точно сказать не могу.. Запал не пропал, но в ближайшее время выпуска точно не будет, Физически не успеваю) единственное что успел подготовить это материалы для следующих видосов... уже думаю может просто ролики минутные делать с демонстрацией и просто ссылку на код оставлять)

    • @gglinof
      @gglinof Год назад

      @@ThreePixDroid_RU как начать изучение canvas и анимаций

    • @ThreePixDroid_RU
      @ThreePixDroid_RU Год назад

      @@gglinof С просмотра видео и повторения за ним как вариант. Самое главное практика, с ней придёт и понимание и всё остальное) Ещё один важный пункт - не опускать руки, если что то не работает, надо просто искать решение)

  • @CLAUSTROPHOBIA327
    @CLAUSTROPHOBIA327 Год назад

    как вставить круглую картинку в середину этой штуки?

    • @pseudonim510
      @pseudonim510 Год назад

      Вставляете элемент с изображением и задаете у него border radius 50%

  • @CLAUSTROPHOBIA327
    @CLAUSTROPHOBIA327 Год назад

    делал точно так же даже красных частиц не появилось, тупо черный фон(

    • @ThreePixDroid_RU
      @ThreePixDroid_RU Год назад

      Ну значит где то ошибка) В описании есть ссылка на файлы, можно скачать и убедиться что всё работает) а ещё сравнить со своим кодом и найти ошибки) Вот ссылка m.vk.com/doc278773966_507731335?hash=iMiD8vVfxfuGW5jmamb4sNZ6CRBinuJjDvEcA3KVQIk

  • @user-rx4bi4ks4o
    @user-rx4bi4ks4o Год назад

    Какой ты красавчик, постоянно нахожу в твоих видео что-то нужное, хотя уже все по 10 раз пересматривал, но потом сталкиваешься с проблемой и именно у тебя нахожу решение

  • @user-mu4my8fq2e
    @user-mu4my8fq2e Год назад

    Ахуительно!

  • @lockstock5357
    @lockstock5357 Год назад

    Автор, здравствуйте. Очень нравятся ваши ролики, особенно те где вы примиряете различного рода математические формулы для создания анимаций и поэтому хотел у вас поинтересоваться где можно научиться подобному? Я имею ввиду может есть какие то книги, статьи или курсы где на останове математики можно формировать анимации, типо в какой момент нужно вычислить синус, косинус или ещё что-нибудь дабы получить нужный вектор или угол анимации объекта? В интернете нашем и зарубежном обычно пишут про линейную алгебру и аналитическую геометрию мол учебники надо читать, но честно признаться я не всегда понимаю как конкретно потом применить эти знания на практике. Чтобы вы могли посоветовать более конкретное и практичное? Я переодически шарюсь на просторах Codepen, нахожу интересные анимации, но не всегда могу понять зачем та или иная формула здесь написана, а вы так хорошо объясняете, что заметно легче становится понимание происходящего. Как так же погрузиться в тему, как и Вы?

    • @ThreePixDroid_RU
      @ThreePixDroid_RU Год назад

      Привет!) The nature of code - отличная бесплатная онлайн книга)

    • @lockstock5357
      @lockstock5357 Год назад

      @@ThreePixDroid_RU Спасибо Вам большое за совет 🙏

  • @RemGD
    @RemGD Год назад

    а как называется тема?

  • @radiator8942
    @radiator8942 Год назад

    Всё было быстро кратко и понятно! спасибо!👍

  • @alexfrozen
    @alexfrozen Год назад

    Не ведитесь. Видео на самом деле как нарисовать красный круг в середине окна)

  • @user-sg7pd6rj7q
    @user-sg7pd6rj7q Год назад

    Как же ты крут! Невероятно сколько можно сделать без библиотек и фреймворков

    • @user-sg7pd6rj7q
      @user-sg7pd6rj7q Год назад

      Понимаю, сейчас сложное положенип в мире, но Вы будете еще снимать?

    • @ThreePixDroid_RU
      @ThreePixDroid_RU Год назад

      Привет! Вообще я собираюсь продолжать вести канал и уже подготовил кучу материалов. Последние полгода с лишним у меня был перерыв, так как пару раз менял работу.. и проходил курсы, но сейчас я не могу точно сказать, что будет дальше.

    • @user-sg7pd6rj7q
      @user-sg7pd6rj7q Год назад

      @@ThreePixDroid_RU спасибо! Я недавно изучаю джаваскрипт и из-за Ваших уроков понял насколько сильный инструмент канвас. Спасибо вам и удачи!

  • @user-sg7pd6rj7q
    @user-sg7pd6rj7q Год назад

    Этот чел очень любит канвас)

  • @xu2593
    @xu2593 Год назад

    спасибо! жаль недоступны "крайне полезные видео"

  • @xu2593
    @xu2593 Год назад

    спасибо за видео, жду еще!

  • @vladserhiychuk8925
    @vladserhiychuk8925 Год назад

    Magic

  • @sokolawp
    @sokolawp Год назад

    Алгоритм, добавляющий линии между точками нужно оптимизировать. Во-первых, он рисует линии между двумя одними и теми же точками, а во-вторых он по два раза рисует линии, например при первом проходе он нарисует линию когда индексы цикла будут, скажем, i = 1 и j = 2, а во второй раз нарисует, когда индексы будут i = 2 и j = 1. А вот как улучшить - будет вашим домашним заданием) Изменив циклы можно ускорить проход по точкам в два раза минимум.

    • @sokolawp
      @sokolawp Год назад

      Ну и еще есть некоторые нелогичные моменты, но для новичка пойдет