Generative Art | Перемещения частиц по гексагональной сетке | PROGHUB

[@dvladyko8258]

Как же расслабляет покодить такое в конце дня. Это потрясающие уроки с очень качественным и приятным звуком и картинкой. Ушла советовать всем

[@ThreePixDroid_RU]

Круто, спасибо)

[@Dark-jh2wn]

Топовый контент! Автору респект!

[@ThreePixDroid_RU]

спасибо;)

[@alkqwe-123]

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

[@ThreePixDroid_RU]

Больше, спасибо) забрасывать не собираюсь)

[@TneHarazion]

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

[@ThreePixDroid_RU]

Очень рад , что вам нравится) успехов вам с другом!;)

[@villiamjetwings]

Видео просто супер! Автор, большое спасибо за этот урок! Больше видео в такой тематике!

[@Zhigalivan]

Спасибо автору за видео, очень круто! Только угол по-английски произносится как "энгл", а "энджел" - это ангел)

[@ThreePixDroid_RU]

Спасибо, рад что понравилось;) Постараюсь быть внимательнее, при произношении )

[@demidovmaxim1008]

Большое спасибо за выпуск.

[@ThreePixDroid_RU]

Пожалуйста)

[@vyvyex3815]

Крутое видео , спасибо за старания )))

[@ThreePixDroid_RU]

Спасибо)

[@ашотпдполмдплплпл]

Дружище, хорошее видео! Дальше делай, классный контент, жду с нетерпением, подписался!

[@ThreePixDroid_RU]

Большое спасибо)

[@ашотпдполмдплплпл]

@@ThreePixDroid_RU да главное как нестандартно все у тебя, я давно такого не видел.

[@Vlafder]

Жалко, что такой контент до сих пор не в топах, автору удачи

[@ThreePixDroid_RU]

Спасибо большое) Это моя вино ,что контент не в топе) Я почти никак не продвигаю его и видео выходят редко..

[@alexredcross]

Супер! Случайно нашел, и прям контент мегакрутой) залип вконце) сегодня повторю!) Автору спасибо огромное!) Побольше крутых штук) однозначно подписался)

[@ThreePixDroid_RU]

Спасибо)

[@yavomax]

Спасибо за видео. По ним, потом, делаю что-то свое, внося свои идеи и правки. Что бы убрать остаточный след - попробуй в стилях задать не чисто черный цвет, а максимально приближенный к цвету заливки канваса при анимации. В твоем случае что-то типа: ``` js >>> {bgFillColor: rgba(50, 50, 50, 0.05)} css >>> canvas{background-color: rgba(45, 45, 45, 1);} ``` Добавление тени там где это не нужно - дополнительная нагрузка, что может сказаться на скорости

[@ThreePixDroid_RU]

Спасибо! Это круто, что модифицируешь код под себя, было бы интересно посмотреть. Да тень создает лишнюю нагрузку, но были предприняты действия для получения необходимого мне оттенка;) К концу в видео с остаточным следом не будет проблемы, хвост станет более длинным, а след оставаться не будет совсем.

[@ВячеславВоронов-н2ю]

Очень, круто

[@ThreePixDroid_RU]

Спасибо!;)

[@H336-p1v]

Это, пожалуй, единственный канал, на который я подписываюсь с первого видео) И самые быстрые 40 минут в моей жизни :0 Отдельное спасибо за "ответы на вопросы" в конце видео. Обожаю подобные эксперименты с кодом :D

[@ThreePixDroid_RU]

Большое спасибо) Рад что принес пользу)

[@stanislavmalyshev5209]

Контент как музыка в конце - неплохо неплохо ;) Интересно посмотреть на твою реализацию симуляции полета птиц "boids"

[@ThreePixDroid_RU]

Думаю, будет очень неожиданно) Когда наконец доберусь до этой темы. У меня есть 8 проектов с использованием этого алгоритма)

[@stanislavmalyshev5209]

@@ThreePixDroid_RU звучит многообещающе) Моя реализация мне не нравится, так что ищу что получше

[@НикитаЕгоров-ы3у]

Очень понравилось. Спасибо огромное автору канала! Продолжай в том же духе и успехов в развитии!

[@ThreePixDroid_RU]

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

[@utecats8323]

спасибо хороший контент

[@a.osethkin55]

Огонь!!! Спасибо

[@ThreePixDroid_RU]

Пожалуйста)

[@scr89shadow]

Просто огонь!! Так учить JS гораздо интереснее!!!

[@ThreePixDroid_RU]

Спасибо)

[@scr89shadow]

@@ThreePixDroid_RU можно ли сделать, чтобы когда точка исчезает на ее месте появлялись две ( как будто она разделилась )?

[@ThreePixDroid_RU]

конечно можно) просто в тот момент когда точка умирает, нужно два раза вызвать функцию addDot(). и передать в неё текущие координаты той точки которую удаляем. Там естественно их нужно принять и передать уже непосредственно в новый объект точки. Достаточно понятно? если нет, то я сделаю и ссылку на код тут в комментарии прикреплю. Там сам разберёшься.

[@scr89shadow]

@@ThreePixDroid_RU я примерно так себе и представлял это, только непойму пока как передать и принять координаты в новый объект. Если не затруднит можешь показать как?

[@ThreePixDroid_RU]

codepen.io/ThreePixDroid/pen/QWbpBYO тут они делятся.. отредактированные точки отмечены комментарием //* надеюсь дальше разберёшься) Успехов!)

[@oldaccount6308]

Браво друг

[@BrooklynDesigne]

Очень красивый урок!!!!!

[@ThreePixDroid_RU]

спасибо)

[@taras577]

очень круто!

[@kirilotur2208]

Вау! Вау! Вау! Автору респект! Ты Молодец!

[@ThreePixDroid_RU]

благодарю)

[@Ирина-т5м7в]

Привет, очень качественный контент и ты в общем молодец . Но у меня есть одна проблема , эта анимация как отдельный объект на странице , и не мог бы ты подсказать как сделать это фоновой анимацией?

[@ThreePixDroid_RU]

Привет) Если правильно понял то элемент с анимацией прокручивается, а нужно чтоб на месте стоял и на заднем плане. Если так, то в стилях Canvas нужно задать position: absolute; z-index: -1; вроде должно помочь и холст окажется под другими элементами. точно сказать не могу, не взглянув на код.

[@Ирина-т5м7в]

@@ThreePixDroid_RU спасибо, помогло!

[@РептилоидЖдмасон]

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

[@ThreePixDroid_RU]

Спасибо) знаний о html, css и JavaScript - обычно достаточно для работы фронтенд разработчиком. Конечно это не все условия для работы в данной сфере, в зависимости от компании требований может быть намного больше, но есть места где и таких навыков вполне хватит.

[@pavelarseyev452]

Спасибо за видео! До конца еще не досмотрел, но возник вопрос. Зачем бесконечно увеличивать количество сделанных шагов, если можно каждый раз по достижении 20 обнулять количество сделанных шагов? Т.е. менять направление если сделано 20 шагов и тут же обнулять. Мне кажется так экономичней по вычислениям :)

[@ThreePixDroid_RU]

Привет;) хороший вопрос. Досмотрев видео до конца, всё станет ясно;) Переменная step будет использоваться в одном из методов и до бесконечности ей увеличиваться не получится;)

[@pavelarseyev452]

ох, досмотрел...просто супер, что тут сказать...единственное что, все-таки, количество сделанных шагов для каждой точки все равно увеличивается до бесконечности. То что вы проверяете остаток от деления количества сделанных шагов на количество шагов до поворота ничего не делает со значением поля this.steps. Поэтому они продолжают увеличиваться, просто каждые 20 шагов остаток от деления равен 0. 20-40-60-80-100 и т.д.

[@ThreePixDroid_RU]

Привет, оно не может увеличиваться до бесконечности. Проведи простой тест, создай одну частицу и выводи количество её шагов в консоль, через некоторое время в зависимости от параметра distance , частица просто удалится, после чего добавится новая с 0 кол-вом шагов.

[@user-bg1mp8ij3u]

Спасибо ты топ, лайк Я разрабатываю масштабный проэкт, и ты мне очень помог

[@ThreePixDroid_RU]

Отлично!) Это очень крутая инфа!) Что видео оказалось полезным!)

[@JesseJames-mh5kb]

Здравствуйте, подскажите пожалуйста как сделать ПООЧЕРЕДНУЮ анимацию элементов на JS. Чтобы елементы начинали анимироваться один после другого. Нигде не могу найти доходчивые уроки.

[@ThreePixDroid_RU]

например добавить их в массив и вызывать следующий элемент после того как отыграл текущий.

[@JesseJames-mh5kb]

@@ThreePixDroid_RU спасибо за ответ. но зачем массив? я уже сделал при помощи функции, цикла и таймаута

[@user-uf7wz7ru5e]

На 13 минуте вы спрашивали, как избавиться от Цвета, который затухает. Если я правильно понял вопрос, то нужно увеличить прозрачность в cfg.bgFillColor

[@ThreePixDroid_RU]

Привет) я имел ввиду способ избавиться от следа при этом сохранить длину хвоста) впрочем к концу видео этой проблемы не будет)

[@neonbrickchannel2136]

Очень круто. А избавиться от следа можно если каждый раз очищать холст, а шлейф от частиц хранить в массиве в каждой частице и удалять хвост когда его яркость ниже чем нужно.

[@ThreePixDroid_RU]

Привет) Такой вариант хорош, но только не в этом случае) Так как нагрузка на обработку увеличится в несколько раз, в зависимости от длинны хвоста. А вот заливка полупрозрачным фоном нагрузку не увеличивает.

[@neonbrickchannel2136]

@@ThreePixDroid_RU хм, да думаю ты прав. Путь получается довольно длинный и отрисовывать придется очень много объектов.

[@ThreePixDroid_RU]

@Neon Bricks Channel У меня была такая же идея как и у тебя, так как нечто подобное делал в Unreal Engine, но когда собрал на канвасе такую систему, всё встало) около 6 кадров в секунду) Думаю на WebGl прокатит)

[@o.voytyn]

Что с математики нужно подучить что б делать такие ефекты как у вас ? Тригонометрию ? И что вообще подучить что б так делать.

[@ThreePixDroid_RU]

Привет) Не сказать что я хорошо знаю математику, так уж на базовом уровне. Но вообще геометрия и очень желательно линейная алгебра. Конкретно в этой анимации было чутка геометрии, JavaScript и canvas разумеется. Разработка подобных алгоритмов очень пригодится в геймдеве) там конечно другие языки используют, но всё же поняв алгоритм его очень просто перенести куда угодно)

[@fokker1192]

как поставить этот код фоновым изображением сайта??

[@ThreePixDroid_RU]

Привет) Нужно разместить все элементы сайта над Canvas или изменить z - index на подходящий.

[@mchl_plstv]

Привет, спасибо за видео! Начал делать по видосу, не получается залить след (shadowColor), хотя свойство в пропсах ctx имеется : ``` shadowBlur: 1 shadowColor: "#000000" ```. Что делал: менял порядок в коде, задавал жестко фиксированный цвет, менял порядок расположения функций в коде, лазил в исходники. Все равно отрисовывает красным. Какие предположения есть ? Где я мог промахнуться?) (Понимаю что удаленно тяжко это сделать)

[@mchl_plstv]

Вопрос отпадает, исправил у bgFillColor, прозрачность на по-больше, до 0.1. Вдруг кому пригодиться. Но все работает права немного по другому, след остается с красным оттенком

[@ThreePixDroid_RU]

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

[@channeldamsee1557]

Выдаёт ошибку на let dot = new Dot(); Якобы dot какой-то не правильный либо что-то ему не хватает ....

[@ThreePixDroid_RU]

Значит где то опечатка. Скопируй код по ссылке в описании и сравни со своим.

[@МихаилАгеев-н9и]

Привет, код Ява скрипт почему то не работает, выдаёт ошибки parsing error: unexpected token = ((=>{ , а также expected an identifier and instead saw ')' , хотя все делал как на видео, можешь подсказать в чем проблема

[@ThreePixDroid_RU]

Привет, скобку пропустил судя по всему.

[@ThreePixDroid_RU]

скопируй код по ссылке из описания и сравни с ним..

[@СвятойюношаМарк]

Блин хочу научиттся, очень интересно, но каааак можно запомнить такой объём этих команд. Логика то ясна но вот команды тяжко

[@ThreePixDroid_RU]

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

[@bogdanshelomanov5668]

что бы убрать след и двигать только квадратик, просто нужно очищать на каждый тик канвас и рисовать квадратик заново

[@ThreePixDroid_RU]

Но ведь если отчистить канвас то хвост сотрётся) А нам нужно сохранить хвост при этом удалить след после него.

[@bogdanshelomanov5668]

@@ThreePixDroid_RU сохрани старую позицию, или текщаяя минус длинна хвоста

[@ThreePixDroid_RU]

этот вариант будет хуже. слишком затратно ресурсами) даже если частиц убавить в 4 раза тормозить будет сильно.

[@bogdanshelomanov5668]

@@ThreePixDroid_RU я высчитываю граф раз в 16мс тригерю весь канвас с перерасчетом графа, 2к вершин, ноль лагов

[@ThreePixDroid_RU]

Как не крути, но просто закрасить канвас полупрозрачным цветом эффективнее) Тут только одна проблема - подходит не каждый цвет, но если учесть тот факт что кроме частиц на каждом шаге нужно нарисовать ещё и рандомное свечение , а к концу видео мы полностью избавляемся от следа, то вышло очень даже хорошо. Это мы говорим о 2d контексте , webGL конечно потянет. Оставь ссылку на свой код, это поможет мне изменить мнение.

[@AlekseyNaumov_734]

Остаточный след менее заметен, если увеличить непрозрачность: bgFillColor : 'rgba(50, 50, 50, .2)',

[@ThreePixDroid_RU]

Да, но он так станет короче) эффект изменится)

[@АндрейСилецкий-м4ц]

сайт сильно лагает из за такого?

[@ThreePixDroid_RU]

Привет) вроде нет) на крайняк можно уменьшить размер канвас и количество частиц. Зависит ещё от того, что на сайте будет кроме анимации.

[@gekuymetxd6273]

у меня hsl не работает, т.е у фигуры исчезает цвет , делал все как у вас(

[@ThreePixDroid_RU]

Привет) сегодня в 22:00 по мск выложу код, и прям тут к комменту добавлю ссылку;) возможно просто опечатка.

[@gekuymetxd6273]

@@ThreePixDroid_RU хорошо, спасиб)

[@ThreePixDroid_RU]

@@gekuymetxd6273 Скопируй код тут.. codepen.io/ThreePixDroid/pen/YzXPgam когда устанавливаю hsl цвет использую кавычки с буквы - ` Ё ` на клавиатуре , они отличаются от тех что на букве - ' Э '

[@gekuymetxd6273]

@@ThreePixDroid_RU все теперь работает, спасибо)

[@ThreePixDroid_RU]

@@gekuymetxd6273 Пожалуйста)

[@romanxaaos3501]

Да ты ж гребанный генний анимации! Блин не всем прогерам дано с графой работать, это очень сложно.

[@ThreePixDroid_RU]

Благодарю)

[@stranger271271]

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

[@ThreePixDroid_RU]

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

[@rkhtcya]

clearRect(0, 0, innerWidth, innerHeight) не работает?

[@ThreePixDroid_RU]

работает, но тогда хвост оставленный частицей сотрётся, а он по задумке должен быть.

[@rkhtcya]

от следа ведь можно избавиться

[@ThreePixDroid_RU]

привет)никто и не говорил что нельзя)