![ThreePixDroid [RU]](/img/default-banner.jpg)
- Видео 28
- Просмотров 229 512
ThreePixDroid [RU]
Таиланд
Добавлен 20 июл 2016
Добро пожаловать на канал посвящённый созданию игр и сопутствующей тематике.
На данный момент Можно найти интересные эффекты реализованные на htm5 Canvas и JavaScript.
В будущем появятся видео по Blender и Unreal engine.
На данный момент Можно найти интересные эффекты реализованные на htm5 Canvas и JavaScript.
В будущем появятся видео по Blender и Unreal engine.
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
подключение 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)
спасибо это помогло исправить мой баг с игрой
ты супер мне прям очень понравился ролик 👍👍❤❤
а как 1 функцией нарисовать 2 независимых объекта, с которыми можно взаимодействовать ?
Здравствуйте меня зовут Анатолий, я просмотрел все ваши видео и очень-очень понравилось, начал изучать Canvas
Жаль, что нельзя отключить фоновую музыку. Я бы поставил свою фоном и смотрел. Эх, Была бы полезная фича на ютуб в такого рода роликах, где фоновая музыка не играет никакой роли, но приходится слушать ее вместо включения своей или вообще прекрасной тишины на заднем плане.
Вырезал заднюю музыку адобовской софтиной. Интересно есть какие то сервисы для таких задач...?
31:26 И тут я заплакал
Чувак явно не из мира js. Странное форматирование, сравнение с приведением вместо эквивалентности, весьма непривычный стиль объявления переменных через деструктуризацию массива, let там, где нужен const
в точку, даже близко не из мира js, просто хобби
Все хорошо, но чистый код из видео работать не будет. 1. Может не успеть декодить по прерыванию Максимального времени, 2. Нет определения, что буква в слове уже совпадает с оригиналом, вроде. И зачем это на Канвасе? Более практично какой то определенный блок текста анимировать ...
нравится canvas
Спасибо
Привет! Сможешь сделать бегущую строку с текстом в форме волны? Контур в форме волны, и по контуру передвигается текст , зацикленно. Похоже на бегущую строку только текст бежит в форме волны🙏🙏🙏
Немогу внедрить на свою страницу,в ней есть выпадаюшее меню с веру и уже есть обоина бекраунд которая двигается линейно вправо в лево
спасибо за уточнение, без live server не запускалось
очень красиво и интересно
Круто!😮
Спасибо за урок! Скажите, пожалуйста, а возможно ли вместо частиц сделать, например, текст, разные слова?
Да, конечно.. , самый простой способ рисовать текст вместо кругов. fillText. developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText
@@ThreePixDroid_RUпривет можно его поставить как лоадер сайта?😮
Когда новые видосы! Просто топ контент!!!!
Очень интересно и красиво, спасибо! Все получислось как в видео, но понимания всех этих гипотенуз и т.д. пока не произошло)
С практикой придёт и понимание:)
Дуже гарно! Дякую за пояснення!
единственный канал от которого я жду уведомлений :)
Вот удоды, неужели вы думаете, что запретив выделять текст или копировать картинки вы сделаете сайт лучше? Бесят удоды, которые так делают. Обходится этот запрет элементарно, при желании можно сохранить html формат на компе и изменить все настройки, скопировать весь текст вместе с картинками и сплагиатить, я бы именно так и делал со всеми сайтами, которые делают на стороне пользователя всякие блокировки встроенных функций, типа сохранить картинку или сохранить текст. Зачастую текст сохраняется для важной информации например какая-то научная ценность и т.д.
Навряд ли, кто-то так думает) Обычно отключаю выделение текста на кнопках и менюшках, чтобы оно не мешало когда случайно мышкой провёл или выделяешь, что то на сайте для копирования)
Это в некоторых моментах удобно!
Топ! То что я искал!
Incredible!
Thank You, I need it
а чё за песня на 25:50 ?
ЛЕГЕНДА 😎😎
Автор где идею скомуниздил? Почему пропускаешь важные моменты такие как, при создании точки направление только из 3х вариков, при смене направления выбор из 2х позиций и самое главное где объяснение почему в экспоненту оборачиваешься шаги.
Нахожу идеи для анимаций в гифках и на codepen.. Например можно загуглить "hexagons 2d animation" в картинках) На codepen есть прям почти такой же эффект, я ориентировался на него. Ну, а если что то не доглядел, то тут ничего поделать не могу) если тока в следующем видео постараться быть внимательнее)
Зачем лишнее условие && this.VelocityX>0 не требуется
Я тебе больше скажу) там вообще условия не обязательны, можно гораздо проще всё считать, но на тот момент я этого не знал) Возможно запишу видос на эту тему... Пока никак не могу вернуться к записи уроков..
Уэльское произношение не может не радовать. А вот стили как то вяло написаны
Супер, спасибо большое за такой годный контент по теме canvas. Автору большой респект)🤘👍
Хорошее видео, подача информации отличная, всё сказано коротко и ясно) хотел спросить как сделать тот же Live Server только в Sublime Text? пересмотрел много сайтов, ничего не помогает, был бы рад если вы подскажете
Вроде в sublime text должен быть похожий плагин.. но я никого не юзал sublime и точно сказать не могу. Но можно установить любой локальный сервер.
Ребята, дайте совет, как можно динамически подставлять другое аудио для такой визуализации? А то я пытаюсь в createMediaElementSource подснуть другое аудио, а мне выдает ошибку: Uncaught DOMException: Failed to execute 'createMediaElementSource' on 'AudioContext': HTMLMediaElement already connected previously to a different MediaElementSourceNode.
Как сделать вместо черного фона в градиент?
Круто, спасибо! а где посмотреть, как привязать это дело к музыке? ужасно хочется попробовать это сделать))
Как астанавииить?
привет, а будут новые ролики? Очень классный материал на канале)
Привет!) Пока точно сказать не могу.. Запал не пропал, но в ближайшее время выпуска точно не будет, Физически не успеваю) единственное что успел подготовить это материалы для следующих видосов... уже думаю может просто ролики минутные делать с демонстрацией и просто ссылку на код оставлять)
@@ThreePixDroid_RU как начать изучение canvas и анимаций
@@gglinof С просмотра видео и повторения за ним как вариант. Самое главное практика, с ней придёт и понимание и всё остальное) Ещё один важный пункт - не опускать руки, если что то не работает, надо просто искать решение)
как вставить круглую картинку в середину этой штуки?
Вставляете элемент с изображением и задаете у него border radius 50%
делал точно так же даже красных частиц не появилось, тупо черный фон(
Ну значит где то ошибка) В описании есть ссылка на файлы, можно скачать и убедиться что всё работает) а ещё сравнить со своим кодом и найти ошибки) Вот ссылка m.vk.com/doc278773966_507731335?hash=iMiD8vVfxfuGW5jmamb4sNZ6CRBinuJjDvEcA3KVQIk
Какой ты красавчик, постоянно нахожу в твоих видео что-то нужное, хотя уже все по 10 раз пересматривал, но потом сталкиваешься с проблемой и именно у тебя нахожу решение
Ахуительно!
Автор, здравствуйте. Очень нравятся ваши ролики, особенно те где вы примиряете различного рода математические формулы для создания анимаций и поэтому хотел у вас поинтересоваться где можно научиться подобному? Я имею ввиду может есть какие то книги, статьи или курсы где на останове математики можно формировать анимации, типо в какой момент нужно вычислить синус, косинус или ещё что-нибудь дабы получить нужный вектор или угол анимации объекта? В интернете нашем и зарубежном обычно пишут про линейную алгебру и аналитическую геометрию мол учебники надо читать, но честно признаться я не всегда понимаю как конкретно потом применить эти знания на практике. Чтобы вы могли посоветовать более конкретное и практичное? Я переодически шарюсь на просторах Codepen, нахожу интересные анимации, но не всегда могу понять зачем та или иная формула здесь написана, а вы так хорошо объясняете, что заметно легче становится понимание происходящего. Как так же погрузиться в тему, как и Вы?
Привет!) The nature of code - отличная бесплатная онлайн книга)
@@ThreePixDroid_RU Спасибо Вам большое за совет 🙏
а как называется тема?
Всё было быстро кратко и понятно! спасибо!👍
Не ведитесь. Видео на самом деле как нарисовать красный круг в середине окна)
Как же ты крут! Невероятно сколько можно сделать без библиотек и фреймворков
Понимаю, сейчас сложное положенип в мире, но Вы будете еще снимать?
Привет! Вообще я собираюсь продолжать вести канал и уже подготовил кучу материалов. Последние полгода с лишним у меня был перерыв, так как пару раз менял работу.. и проходил курсы, но сейчас я не могу точно сказать, что будет дальше.
@@ThreePixDroid_RU спасибо! Я недавно изучаю джаваскрипт и из-за Ваших уроков понял насколько сильный инструмент канвас. Спасибо вам и удачи!
Этот чел очень любит канвас)
спасибо! жаль недоступны "крайне полезные видео"
спасибо за видео, жду еще!
Magic
Алгоритм, добавляющий линии между точками нужно оптимизировать. Во-первых, он рисует линии между двумя одними и теми же точками, а во-вторых он по два раза рисует линии, например при первом проходе он нарисует линию когда индексы цикла будут, скажем, i = 1 и j = 2, а во второй раз нарисует, когда индексы будут i = 2 и j = 1. А вот как улучшить - будет вашим домашним заданием) Изменив циклы можно ускорить проход по точкам в два раза минимум.
Ну и еще есть некоторые нелогичные моменты, но для новичка пойдет