Particles Canvas | Популярная анимация частиц на чистом JS с исходниками
![ThreePixDroid [RU]](http://yt3.ggpht.com/ytc/AIdro_m9hY0wSlD4ygQJ9MwISJSheP6X-5dtaCYYZ-hmk6ytX8k=s48-c-k-c0x00ffffff-no-rj)
HTML-код
- Опубликовано: 30 июн 2019
- #ParticlesJS #canvas #JS
В видео создадим многим знакомую анимацию #частиц соединяющихся линиями.
Ссылка на файлы проекта : threepixdroid?w=wall-9...
Очень удивлён, что такой контент получает столько внимания. Качество микрофона, структура подачи, не быстрая, понятная и главное, что приятная! Однозначно подписка, буду ожидать такие видео.
Годное руководство, чётко, понятно, без лишнего трепа. Автор молодец!
Боже мой! Это лучший канал по программированию из всех, что я видел! Очень качественная подача материала, всё ну уж очень понятно! Автор продолжай в том же духе!
Однозначно луцык и подписка!
Спасибо большое!)
Супер, спасибо большое за такой годный контент по теме canvas. Автору большой респект)🤘👍
Блин, это гиперкруто. Лично я бы хотел видеть больше видосов, где ты, так сказать, разбираешь популярные библиотеки. Люблю ванильный js)
Top! Спасибо, все очень доступно и понятно.
Пожалуйста)
Замечательно, превосходно, прекрасно.
Очень годно! С меня подписка и лайк.
Твои видео настолько подробны и хороши, что я смог перенести твой код на питон и все заработало как надо. Автор удачи тебе
Спасибо) Да в этом и смысл) Алгоритм можно перенести куда угодно) Рад ,что ты этим воспользовался) как раз python кстати можно использовать в программе Blender для создания 3д анимаций используя тот же самый алгоритм)
@@ThreePixDroid_RU Обязательно расскажу про твой канал друзьям
@@user-zf3ep5ko7p Хорошая новость) Спасибо)
Прям от души! Спасибо
Пожалуйста!)
Гениально.Молодец.С меня подписка и лайк!
Круто!)
Если будешь продолжать делать такие видео, ты обязательно станешь очень популярным. Продолжай)
Да, буду продолжать) Спасибо)
Круто!😮
Супер!
ты супер, спасибо!!!
Очень круто! Подача и уровень знаний и результат притягивают! ..заставляют изучать, разбираться и интересоваться! Попал на твой канал случайно ..в поисках взаимосвязи звука и анимации, созданной на js.
Лайк и подписка!!+
Почему так приятно было слушать ?
ты супер мне прям очень понравился ролик 👍👍❤❤
Идея и видео блестящая!
Спасибо! Идея конечно не моя, это очень популярный эффект в интернете, только реализация моя)
все получилось, спасибо
пожалуйста;)
Очень круто.
Спасибо!!!)
Красиво, капец
Круть!!
Класс мне нратца... ;)
Такой зашел типо думаю да хуйня видел это, а потом как писать начал кучу новых фишек узнал и в голове а пиздато парниша сочиняет))
juda zor
Боже! Моему восхищению нет предела!) огромное спасибо тебе! надеюсь еще будут видео! оч жду!)
А не мог бы ты поподробнее останавливаться, разжевывать что делаешь, что за методы, и как их можно применять?)
Огромное спасибо!)
Спасибо) Вообще видео расчитано на тех кто уже понимает js и хочет практики) Видео будет на днях, ну а в следующем после него попробую подробнее разжевать.
Спасибо
Не за что!)
Чувак ты крут
Очень понравилось. Спасибо большое за интересный контент. Хотелось бы увидеть реализацию движения с музыкой. Спасибо за твой труд.
в планах есть пара уроков по визуализации звука с интересными эффектами на canvas.
Больше подобных уроков пожалуйста! 100 лайков тебе за труд)
спасибо)
Спасибо за видео, уже несколько просмотрел и скажу что тебе однозначно нужно развивать канал, тем более что его в рекомендации вывело. Вижу огромный потенциал.
ахуеть как круто!
Спасибо!)
Doyti do etogo video ya uchilsta god. OGM.
Отлично) на русском мало подобного материала.
Скоро станет намного больше! Уже 8 каналов появилось с тех пор как я стал записывать подобные видео! :D
Круто, спасибо! а где посмотреть, как привязать это дело к музыке? ужасно хочется попробовать это сделать))
Очень круто! Не могли бы подсказать, где найти информацию про анимацию на js, сколько не искал информация либо устаревшая, либо говориться про анимацию на jquery
Алгоритм, добавляющий линии между точками нужно оптимизировать. Во-первых, он рисует линии между двумя одними и теми же точками, а во-вторых он по два раза рисует линии, например при первом проходе он нарисует линию когда индексы цикла будут, скажем, i = 1 и j = 2, а во второй раз нарисует, когда индексы будут i = 2 и j = 1. А вот как улучшить - будет вашим домашним заданием) Изменив циклы можно ускорить проход по точкам в два раза минимум.
Ну и еще есть некоторые нелогичные моменты, но для новичка пойдет
Это лучший гайд из тех которые я видел.
Появился вопрос: Возможно ли сделать так, чтобы курсор считался точкой?
Привет) да можно)Для этого надо добавить слушатель событий перемещения курсора.
и 2 переменные для хранения координат мыши..
будет похоже на это..
AddEventListener('mousemove', e => {
mx = e. clientX;
my = e. clientY;
})
после этого
в методе где двигаем частицы,
берём самую первую из массива и присваиваем ей координаты мыши.
Particles [0].x = mx;
particles [0].y = my....
Почитай про слушатели событий)
Есть видео в котором как раз такой способ используется - Притяжение и отталкивание частиц.. ruclips.net/video/KEQsm2yL6Lg/видео.html
Доброго времени суток.
Видео интересное и полезное.
Кстати, этот код можно несколько оптимизировать: в функции, рисующей линии, во внутреннем цикле можно j приравнять к (i + 1). Таким образом операций нужно делать гораздо меньше, ведь не нужно перебирать те точки, которые уже рассматривались.
Всего доброго
Спасибо, всё верно. Кроме того не обязательно рассчитывать точную дистанцию от точки до точки, можно обойтись сравнением квадрата текущего расстояния и нужного расстояния что в свою очередь увеличит производительность.
Или если расстояние всё таки нужно, можно воспользоваться формулой восьмиугольника и получить расстояние с погрешностью ~5%,
но зато работает тоже намного быстрее чем извлекать корень.
Подскажи, пожалуйста, как анимацию сохранить в видео?? Например эти частицы я хочу запустить на 5 мин и это все сохранить в файл mp4, к примеру.
И как на слабом пк убрать торможение? При движении частицы дергаются.
Так же не получается заменить фон на картинку. Не знаю как это прописать в Properties ((
Я только учусь, поэтому такие возможно вопросы.
Спасибо!
Видео интересное, но могу дать пару советов по поводу кода. Например, те же пробелы. Я понимаю, что это дело личное, но все же лучше, как мне кажется, следовать общепринятым правилам (вроде на learn.js есть). Ну, и смешивание старого и нового синтаксиса довольно странное. Вроде как class и for in, но при этом почему то var. А так ты большой молодец, спасибо за видео
Спасибо) Обязательно буду стараться улучшать код и благодарю за ссылку на "Learn.JS" , уже нашёл нужный раздел - "Советы по стилю кода" называется) Сайт супер , похоже там море полезной информации) Кайф)
Как сделать вместо черного фона в градиент?
Сделай пожалуйста разбор с лепестками сакуры
Это. Просто. Гениально.
Возник вопрос - как перемещать частицы по определенной траектории?
Например создать массив координат по которым должна следовать частица....
@@ThreePixDroid_RU таким же образом получится привязать поведение частиц к курсору? Так, чтобы были (все) частицы, как в случае на видео, но с циклом жизни 6-8сек, но так же и те, что появлялись вокруг курсора и будто бы следовали за ним
В функции drawLines мы типа пытаемся отрисовать линию начиная с точки i до всех оставшихся 69 точек?
И это всё реально так быстро рендерится что мы не замечаем, что всё это выполняется как бы последовательно и заново каждый кадр?
Да. Но это не самая удачная реализация.
Нихуясь это чо, АСМР программирование?
Спасибо за урок! Скажите, пожалуйста, а возможно ли вместо частиц сделать, например, текст, разные слова?
Да, конечно.. , самый простой способ рисовать текст вместо кругов. fillText.
developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText
@@ThreePixDroid_RUпривет можно его поставить как лоадер сайта?😮
а можно ли задать изначальную форму для частиц? то есть какой- то шар или пирамида и весь движ будет в нутри этой формы не зависимо от формы будь то шар или квадрат и тд надеюсь объяснил свои мысли
конечно можно) думаю довольно простым вариантом будет загрузить черно белое изображение и создать частицы например только на черных пикселях. Каждый раз проверять координату частицы и если она выходит на белые пиксели разворачивать её. А направление для отскока можно вычислить например на основе координат самой частицы и пикселя на который она наталкивается.
а на гит дабе есть ?
Привет, не подскажешь почему при смене размера окна в настройках разработчика в гугл скорость частиц возрастает очень? Спасибо за видео!
Тут скорость частиц зависит от частоты обновления экрана - может это как то связанно..
Все очень круто, а как сделать адаптив? Есть идеи? А то на мобильном такой скрипт сильно растягивается и частицы не перемещаются(
Привет;) Вроде должно помочь простое изменение размера Canvas..
если добавить слушатель событий, типа resize. ну и для мобильных устройств количество частиц лучше снижать.
if self.x+self.xspeed >= width or self.x+self.xspeed = height or self.y+self.yspeed
Привет смотрю из будущего,тоесть сегодня, хахахх, красава спасибо норм получилось , да и позновательно,но есть вопросик один, как теперь на анимацию наложить блок, все что мог перепробывал не канает, зарание от души за ответ! с уважением Luko....
да да я тоже пытаюсь поверх как то поставить не получается
можно вставить анимацию не в body а в свой блок, ему назначить position: relative, поверх - блок с position: absolute
КТО ТЫ, БЭТМЕН?!?
о вы из англии
из России..
Привет, спасибо за урок, как плавно менять цвет?
Привет) ниже ссылку прикреплю. там как раз плавно меняется цвет.. ruclips.net/video/r6l75hWKpac/видео.html
А как научиться так понимать язык? Пишу код, но не понимаю некоторые моменты. Начал недавно, есть смысл продолжать?
Просто практиковаться.
Конечно продолжай, это ведь круто и приятно создавать что то самому.
Да и много где пригодится может.
Например можно написать алгоритм генерации плафонов для светильников и распечатать их на 3D принтере, современные фотополимерные 3d принтеры выдают очень хороший результат, очень часто превосходящий по качеству магазинные. Можно конечно просто нарисовать плафон в 3д без программирования.. но это ведь скучно... а если есть генератор, то он каждый раз может выдавать плафон нужной формы если подкрутить настройки, а так же наносить на него уникальный рисунок - это круто.
Привет!
А как в данном случае сделать фото или видео формат самого процесса симуляции, возможно ли ето сделать?
Или где можна найти такую информацию.
Наперед спасибкаю!
Скриншот можно сделать, если кликнуть правой кнопкой мыши по холсту и 'сохронить изображение как'. Видео можно записать с помощью любого доступного скринрекордера. Я обычно так и делаю, просто перехожу в полноэкранный режим в браузере клавишей f11 и включаю запись экрана obs например.
Есть вроде несколько библиотек js, позволяющих делать запись, по крайней мере точно видел библиотеки с помощью которых можно сохранить анимацию с холста в gif. А ещё для начала лучше перенести эту анимацию например на pixi.. чтоб не тормозила.
@@ThreePixDroid_RU
Спасибо очень информативно.
Как можно наложить текст поверх анимаций ?
можно создать текстовый блок и разместить поверх блока canvas или использовать метод filltext в js в самом конце цикла анимации.
например
ctx.fillStyle = "green";
ctx.font = "32px Arial";
ctx.fillText("Text", 300, 300);
Брат объясни как сделать анимацию при наведении мыши на часть этой анимации, чтобы она немного увеличивалась и поворачиваласи типа 3д эффект докрутить, урок гиперактивности понятен спасибо и объясни мне такому как кто можна реализовать
Тогда придётся переделывать
Мне кажется линии оптимальнее чертить:
for(var i = 0; i
Всё верно, так намного лучше) но уже ничего не поделаешь, видео записано) В будущем сниму ремейк🙂
@@ThreePixDroid_RU )) Совершенству нет предела. Мне кажется ремейк не нужен. Видео очень приятное получилось. Разве что загружаемые исходники подредактировать можно. Лучше радуйте всех другими залипательными эффектами. )
А можно сделать так чтобы на одной половине были красные а на другой синие, и чтоб когда частица переходила на другую сторону то меняла цвет соответствующий цвету стороны?
Конечно. Просто получаешь координаты точки по 'X' и ширины холста. Добавляешь условие - если значение координаты Х < половины ширины холста. то цвет устанавливаешь например синий. иначе красный.
напиши в группу ВК если не понятно, там тебе скину готовый код.
У меня вопрос (может и глупым показаться, но мне все равно). Можно ли подобное сделать при работе с ReactJS?
Привет) конечно можно)
@@ThreePixDroid_RU а каким образом? есть библиотеки какие-то? Просто я думаю не корректно будет, если в react приложении использовать файлы подобия script.js
react это и есть библиотека;)
@@ThreePixDroid_RU я имел ввиду библиотека для библиотеки). Ну я нашел парочку - react-konva и react-canvas. Но с их помощью подобное как видосе (судя по описанию) сделать невозможно.
подразумевается , что библиотеки будут использоваться по назначению, а всё что нельзя сделать используя их , напиши на чистом js.
Привет!
Очень интересная тема, я новачок в этом деле.
Но у меня не вышло как у вас на видео, только черный фон.
Хотелось понять почему не вышло.
Спасибо за ответ если прочитатете.
Привет, слушай, ты можешь просто готовый файл скачать по ссылке в описании! там всё работать должно)
Даже вот так! это прямая ссылка на файлы проекта - vk.com/doc278773966_507731335?hash=a3deb8576e131cdf47&dl=f714fb6610f22f7b2a
@@ThreePixDroid_RU Спасибо
Как теперь добавить контент на сайт?
Посмотри тут. ruclips.net/video/XgXGXEqQJqI/видео.html
15:29 что за музыка на заднем плане?
Привет) Видео монтировал на чужом ноутбуке и пока нет возможности посмотреть название трека. сорри...
скорее всего трек взял в фонотеке ютуба
делал точно так же даже красных частиц не появилось, тупо черный фон(
Ну значит где то ошибка)
В описании есть ссылка на файлы, можно скачать и убедиться что всё работает) а ещё сравнить со своим кодом и найти ошибки)
Вот ссылка m.vk.com/doc278773966_507731335?hash=iMiD8vVfxfuGW5jmamb4sNZ6CRBinuJjDvEcA3KVQIk
Здравствуйте а как привязать это к движению мыши?
Привет, воспользуйся слушателем событий. addEventListener(`mousemove`, тут вызываешь нужный метод )
Возможно это видео поможет, там как раз работа с мышью -> ruclips.net/video/KEQsm2yL6Lg/видео.html
@@ThreePixDroid_RU и ещё вопрос, а как разместить этот js на фоне сайта?
Например в свойствах css установить canvas z-index на -1
@@ThreePixDroid_RU я когда вставляю , и прописываю z-index = -1, у меня section и весь первый экран убегают вниз, а если section убрать внутрь canvas то он пропадает
зафиксируй canvas.
position: absolute
top: 0
left: 0
я так понимаю его как фон для сайта не реально сделать?
Ну как же не реально) Просто помещаете его в нужное место и всё..
Если надо что то сверху него разместить , то размещаете..
Если есть знания Сss и html ,то проблем быть не должно)
@@ThreePixDroid_RU я просто начинающий и не понял как его загнать под фон, а в гугле только уже готовые прописаные. С обычной картинкой все норм а вот JS я не знаю совсем
Вот как картинку в body разместить знаешь? Точно так же и Canvas..
Незнаю как понятнее описать..
Давай так... если тебе очень надо напиши мне в группе ВКонтакте..
завтра после работы скину тебе готовый проект с этой анимацией и объясню как подключил...
@@ThreePixDroid_RU мне капец как надо, честное слово. Буду очень благодарен. Я учусь на программиста и нас нихера не обучают из-за этой пандемии, так плюс ещё я за границей учусь. Приходится все самому полностью, мои друзья на сегодня это гугл, гитхаб, ютуб и индийский парень
Чуть не забыл книга Герберта Шилдта
velocity от -0.25 до 0.25
нет, всё правильно : от -.5 до .5
@@ThreePixDroid_RU Верно, что-то я вчера уже уставший был. Извиняюсь
Что-то эти 60 частиц с трудом в 60 фпс рендерятся, а если взять больше 100, то вообще слайдшоу получается
Вся суть в алгоритме, который можно довольно сильно прокачать, чтоб тянуло намного больше частиц )
Моя задача была показать как сделать, а сам перенес этот алгоритм в blender ) там нечему тормозить когда ролик отрендерится)
Да, я уже попробовал немного изменить вложенный цикл, стало работать быстрее, но сложность алгоритма всё равно квадратичная. Не подскажите, какие ещё улучшения можно использовать? Читал про квадродеревья, но они довольно сложны в реализации.
Больше всего тут кушает вычисление квадратного корня для получения расстояния, отрисовка линий и частиц.
Частицы можно изменить с кругов на квадраты.
Вложенный цикл должен начинаться со значения j = i + 1 , что бы повторно не вычислять расстояние между частицами.
Вычисление квадратного корня можно заменить на вычисление гипотенузы с помощью Math.hypot(dx, dy)... или лучше на вычисление приблизительного расстояния - найти формулу можно тут в самом низу en.m.wikibooks.org/wiki/Algorithms/Distance_approximations.
Прежде чем вычислить расстояние можно убедится что dx и dy уже меньше требуемого расстояния.
Сократить к минимуму числа с плавающей запятой.
вместо деления использовать умножение. например вместо / 2, умножить на .5 .
включить аппаратное ускорение в браузере.
Объявить все возможные константы и переменные заранее.
Думаю если сделать вышесказанное, уже будет лучше.
( кстати можно ведь вообще корень не вычислять, а просто возвести в квадрат , максимальное расстояние между частицами. то есть сравнивать квадраты )
ещё хороший вариант - это объединить частицы между которыми рисуется линия в группы, и нарисовать одну длинную зигзаг линию через группу частиц, Это позволит сократить количество вызовов, beginPath.
У меня с половиной условий из перечисленных, уже тянет 250 частиц без намёка на тормоза.
плохо в этом уроке только одно то что ты за кадром код меняешь. Потом новички думают почему не работает)
В смысле за кадром? Ничего в коде не менял всё записано одним дублем и вырезаны простои.. к тому же исходники приклеены. Можешь скинуть время "инцидента"? ..возможно на этапе сведения допустил ошибку.
Ну я низнаю, по мне как, сильно много лишнего в коде.... Нахрен этот конструктор? Не быть тебе Сеньёрам))
Привет, а можешь ответить на вопрос по какой причине линии на мобилках могут не отображаться?
Вот если что мой вариант. Кстати он даже на микро реагирует)
ascilator.github.io/particles/
Привет) Линии пропадают и на пк в некоторых случаях, не могу уловить от чего. Похоже в момент инициализации где-то...
Если сжать окно просмотра - так, чтобы ширина была меньше высоты и обновить страничку, линии не появляются.
Возможно линии получаются просто очень короткими
line_lebg: w / 9, Проблема в этой строчке... поставь фиксированную длину, например 150 и всё работает норм.
Над будет заценить как оно с микрофоном, пока нет возможности к сожалению)
Успехов!)
@@ThreePixDroid_RU да, спасибо, конкретные значения помогли. Хотя почему оно не работает с w /9, ведь w это же по сути тоже конкретное значение
@@ascilator7174 линия просто короткая получается..
Например: ширина окна 500px
w : 9 = 55.5
радиус круга 20..
тоесть 2 круга рядом это уже 40px
значит линия между ними всего 15px
плюс у неё альфа(прозрачность) стоит и по этому их не видно..
@@ThreePixDroid_RU ну тогда справедливо
Почему такая подача материала, Вы же ничего не объясняете? Попробуйте сначала объяснить алгоритм, а уже после покажите как его можно имплементировать на JS. Иначе выглядит, что робот читает написанный код.
вроде , упомянул в видео о том , что отвечу на вопросы если такие остались, не стесняйтесь обращаться. Код довольно простой и не длинный, в нём легко разобраться. вы так же можете посмотреть для начала более простые уроки если у вас не достаточно опыта. спасибо за отзыв, в следующем видео постараюсь быть более подробным.
Уэльское произношение не может не радовать. А вот стили как то вяло написаны
Немогу внедрить на свою страницу,в ней есть выпадаюшее меню с веру и уже есть обоина бекраунд которая двигается линейно вправо в лево
Зачем лишнее условие && this.VelocityX>0 не требуется
Я тебе больше скажу) там вообще условия не обязательны, можно гораздо проще всё считать, но на тот момент я этого не знал) Возможно запишу видос на эту тему... Пока никак не могу вернуться к записи уроков..