Canvas & JavaScript | Притяжение и отталкивание частиц | rus
Переглядів 24,937
4 роки томуCanvas | Attraction and repulsion interactive effect on vanilla js
В этом видео мы создадим интерактивный эффект притяжения и отталкивания частиц от начала и до конца не используя библиотек, только чистый JavaScript.
Вам нравится мои видео и вы хотите помочь развитию канала? Просто поделитесь ссылкой на канал или видео в любом сообществе или у себя на страничке в соцсети.
В видео что то было не понятно? Пишите в комментарии или отправьте сообщение в группу вконтакте : im?media=&sel=-97964493
Редактор кода: Visual Studio Code + дополнение Live Server для просмотра изменений на странице браузера в реальном времени.
FILES
Ссылка на файлы vk :
threepixdroid?w=wall-9...
CodePen :
codepen.io/ThreePixDroid/pen/...
Music
Track: KRAK'N - 808 Controls Me
Music Provided by Magic Records
Listen To The Original: • KRAK'N - 808 Controls ...
Free Download: fanlink.to/808ctrlm
#particles #javascript #canvas #html5 #generativeart
#tutorial #sourcecode #particles
@user-ux9mh4bq5g 4 роки тому
Чел, это просто ахуенно, я давно хотел подтянуть js и тут увидел твой видос в палике по проге, ЭТО ПРОСТО НЕЧТО, ПРОДОЛЖАЙ В ТОМ ЖЕ ДУХЕ, ТЫ КРАСАВА!!!
@ThreePixDroid 4 роки тому
Большое спасибо:)
@DenisSvistoplasov Рік тому
1) Для простого обхода массива используют .forEach (не .map). 2) Если симулировать гравитацию, то сила вычисляется как масса, деленная на квадрат расстояния. Но тут и не была заявлена симуляция гравитации, масса умножалась на расстояние, и получился эффект, напоминающий что-то вроде поверхностного натяжения. (Кстати, известно, что центробежная сила - это фиктивная сила. И здесь видно, что несмотря на то, что она в коде никак не прописана, она "проявляется" как следствие других сил) 25:38
@nikolay6143 3 роки тому
Класс, спасибо за такой полезный урок, видно что работа проделана большая и качественная. Так держать!
@bullador457 4 роки тому
Наткнулся на видео в вк, в групе code block, Очень понравилась подача видео и качество сьёмки. Лайк, подписка. Делаешь просто афигенно! Мне как раз нехватало в опыте работы с канвасом и охото было сделать что то красивое.
@ThreePixDroid 4 роки тому
Круто) рад что угодил)
@ajfa9400 2 роки тому
Автору спасибо за отличный контент и возможность учиться у мастера.
@ThreePixDroid 2 роки тому
Пожалуйста. Видел твой предыдущий комментарий.... Видео снято не с целью обучения.. А если в коде есть что то, что с твоей точки зрения стоит поменять то смело пиши)
@Danny-uc6kx 6 місяців тому
очень красиво и интересно
@stanislavmalyshev5209 3 роки тому
Шикарненько
@artemkerez2152 Рік тому
Incredible!
@tytov9608 Рік тому
Спасибо за такое крутое видео
@user-pe1mx7yv5z 3 роки тому
Это великолепно. Я никогда такого не видел
@ThreePixDroid 3 роки тому
спасибо)
@savasyilmaz4003 4 роки тому
thank you bro, valuable informations !
@ThreePixDroid 4 роки тому
you're welcome!)
@evgeniybudaev1690 4 роки тому
класс видео! спасибо что ты есть
@ThreePixDroid 4 роки тому
не за что;) рад что пригодилось!;)
@Frankslaboratory 4 роки тому
Wow. This is awesome
@ThreePixDroid 4 роки тому
10X dude ;)
@yoeyoe7217 3 роки тому
Не когда не оставляю комент, но ты удивил, Респект Мээн)))
@ThreePixDroid 3 роки тому
Спасибо)
@user-nb2xc4jt6c 4 роки тому
👍👍👍👍👍👍👍👍
@anzor3219 3 роки тому
наткнулся случайно и офигел)
@antonyminsky3637 3 роки тому
Поддерживаю! не новичок в js и не знал, что там можно 0_о
@hulumulu1108 2 роки тому
А ты крут
@ggkamv6937 3 роки тому
А парнишка то хорош, но почему-то слишком мало зрителей у тебя, нужно это изменить, твои видео помогают и воодушевляют многих. Спасибо.
@ThreePixDroid 3 роки тому
Спасибо за добрые слова!;)
@Zak0532 3 роки тому
круто)
@ThreePixDroid 3 роки тому
Спасибо)
@gagogoga794 2 роки тому
Ты чёткий чел 😁
@ThreePixDroid 2 роки тому
Спасибо)
@lemarsinerut2456 3 роки тому
🤯
@user-gz5gf4oy8k 4 роки тому
Очень круто вышло! Можете посоветовать ресурсы по изучению Js?
@ThreePixDroid 4 роки тому
Спасибо;) learn.javascript.ru/ полезный сайт. Приложение SoloLearn на телефон - бесплатное и тоже полезное. Книга По p5js The nature of code natureofcode.com/book/. По моему мнению, очень хороший способ изучения - это придумать себе цель, например программу которая делает то, что тебе необходимо и на практике пошагово решать каждую задачу необходимую для реализации твоей задумки.
@user-qb7jg4hx5l 4 роки тому
Шикарные видео, очень понравились. Вопрос. А нет более рационального способа проверки расстояние (или других зависимостей) между точками вместо цикла?
@ThreePixDroid 4 роки тому
Привет. Пройтись по каждой точке из массива в любом случае придется, что бы сравнить её с каждой другой точкой из того же массива. Но не обязательно использовать именно цикл For можно например юзать forOf , так даже удобнее было бы в этом коде. А вот расстояние можно найти например методом Math.hypot(dx, dy); или например вообще не получать квадратный корень, а наоборот возвести в квадрат ту дистанцию с которой сравниваем текущее расстояние.
@andreynenax8099 4 роки тому
Инетересные видосики, давай ещё)) ThreePixDroid, что за редактор кода используешь??
@ThreePixDroid 4 роки тому
спасибо! редактор visual studio code. Сейчас мало времени, по этой причине видео выпускаю редко, в будущем постараюсь стабилизировать этот момент.
@romanmehanov4581 4 роки тому
Отличный урок! Спасибо. P.S. Как эту фичу можно поставить на backdround (картинка) верхним слоем ?
@ThreePixDroid 4 роки тому
Не за что. Просто использовать элемент Canvas в том месте где необходим данный эффект. Если Canvas перекроет кнопки, то они перестанут реагировать.
@redlixdavidof235 3 роки тому
Крутяк, и через сколько лет работы можно писать такое из головы?:) Очень крутые видео!
@ThreePixDroid 3 роки тому
Зависит от того как быстро учишься) Вполне реально через пол года с нуля)
@nikitoshd853 4 роки тому
привет, ты офигительный!!! я хочу учить js, но незнаю как, можешь посоветовать как учить js , пожалуйста
@ThreePixDroid 4 роки тому
Привет) думаю самый простой способ. это придумать себе цель... и пошагово её решать. Допустим целью будет создание мини игры. Какой-нибудь лабиринт из обычных прямоугольников, а персонаж просто круг. Тогда мини задачи будут следующие: определять какая клавиша нажата для того что бы двигать персонажа, научится рисовать круги и прямоугольники и всё остальное в том духе..
@serjantsaygon 4 роки тому
Классный урок, не подскажешь свою тему в VS
@ThreePixDroid 4 роки тому
Привет;) Horizon Theme...
@vasylhorban248 3 роки тому
ахр*неть
@logius84 4 роки тому
крутооо ))) function setPos ({layerX,layerY}) - а это как?
@ThreePixDroid 4 роки тому
спасибо) в контакте отвечал тебе на этот вопрос)
@nikolay6143 3 роки тому
Можно ссылочку на объяснение?
@ThreePixDroid 3 роки тому
Это называется деструктуризация. В функцию приходит событие и мы сразу получаем из него нужные свойства.
@egliens_roman 3 роки тому
Объясни пожалуйста, не совсем понял, где мы настроили количество выпускаемых частиц по нажатию? Спасибо за видос!
@ThreePixDroid 3 роки тому
Мы не настраивали кол-во выпускаемых частиц.. Они создаются всегда пока мышь нажата на Холсте. вот эта строчка(91- ая строка должна быть): if (mouse.down) { dots.push(new Dot()); }
@egliens_roman 3 роки тому
@@ThreePixDroid то есть получается за столь короткий промежуток у меня успевает 5-7 дотов создаться? спасибо за обьяснение))
@ThreePixDroid 3 роки тому
пожалуйста)
@PromiSeDev 3 роки тому
Куча замечаний как по коду, так и по расчетке. Если интересно, можем обсудить в дискорд
@ThreePixDroid 3 роки тому
Привет) Отправил тебе инвайт в discord.
@user-bt1wz1xf5e Місяць тому
а как 1 функцией нарисовать 2 независимых объекта, с которыми можно взаимодействовать ?
@taras577 3 роки тому
какой красивый код, мое почтение и немного зависти)
@ThreePixDroid 3 роки тому
Вау) Спасибо большое, очень приятно!)
@taras577 3 роки тому
@@ThreePixDroid все никак нормально к canvas добраться не могу, а тут такое вдохновение)) Чисто по самой идее, точнее по практичному использованию даной красоты (или подобной) на сайтах, вопрос: возможно стоит добавить максимальную вмистимость dots (удалять с начала масива ранее созданые, кроме 0-го), чтобы юзер не переусердствовал с созданием шариков и все не начало подлагивать?) или не стоит переживать по этому поводу? Изменено: попробовал ограничить количество, получилось хорошо (одно свойство в config и пару строк в loop), подлагивания пропали :) Но возник ещё один вопрос: как стартануть этот код на мобильных девайсах? На touchmove, touchstart, touchend?
@ThreePixDroid 3 роки тому
Конечно стоит ограничить кол-во частиц) Ещё лучше получить данные о устройстве и размере экрана чтоб точно знать на сколько ограничить кол-во 'dots' ;) Для большей оптимизации можно создать заранее спрайты частиц разного уровня яркости) и просто менять спрайты) и ещё кучу разных оптимизаций можно провести) Но суть урока в алгоритме) А все оптимизации описанные выше и прочие которые можно придумать, применимы наверное ко всем моим видео) Возможно как нибудь запишу урок с управлением жестами) Но это и так довольно просто, в инете вбить, там всё подробно описано и примеры есть)
@dzhenishmukashev8626 4 роки тому
все великолепно но не понятно "dots.map(e => e == dots[0] ? e.draw(mouse.x, mouse.y) : e.draw())" что такое e
@ThreePixDroid 4 роки тому
Привет! Всё просто, мы пробегаемся по каждой сфере в массиве для её отрисовки, но если это самая первая сфера в массиве то мы задаём ей координаты мыши...
@Zak0532 3 роки тому
dots.map(function(e) { if(e == dots[0]) { e.draw(mouse.x, mouse.y) }else { e.draw() } })
@BrooklynDesigne 3 роки тому
Простите, а для чего нужна функция line в данном примере?
@ThreePixDroid 3 роки тому
Над будет глянуть код ) чёт не помню line ... или можешь тайминг скинуть.. посмотрю и сразу вспомню..)
@chinyass 3 роки тому
Как стать таким профи как ты?)
@ThreePixDroid 3 роки тому
Спасибо, оч приятно) Но я далеко не профи) Нужно просто много практиковаться)
@RemGD Рік тому
а как называется тема?
@garikdjan6266 2 роки тому
Строка 51. force = a > b ? 1 : 0, а у тебя a > b ? force = 1 : force = 0. Допустим так можно, но это не читаемо. Строка 48 j == 0 и т.д, лучше использовать строгое сравнение j === 0. Строка 71 fill ? ... тогда почему в 91 строке if ( mouse.down ) { ? Используй один code style. тернарные операторы плохо читаемы, в строке 71 лучше использовать if.
@ThreePixDroid 2 роки тому
ок
@jackieuchiha7838 4 роки тому
what is theme?)
@ThreePixDroid 4 роки тому
Horizon bold.
@jackieuchiha7838 4 роки тому
@@ThreePixDroid Thank you :D
@thegulpofenglish4131 2 роки тому
Качество кода = Повелитель.js Английское произношение = Королевы Англии очумевший внук
@user-sk8jh1sb1p 2 роки тому
Про отталкивание непонятно
@ThreePixDroid 2 роки тому
От курсора частицы отталкиваются... И от друг друга держится на расстоянии, и одновременно притягиваются..
@vladislavstepanov7591 4 роки тому
В чем профит объявлять переменные в начале, а не тогда, когда они нужны? Как по мне, это только ухудшает читаемость кода
@ThreePixDroid 4 роки тому
Хочу заметить, что это просто урок;) В своём коде можно сделать так как вам удобнее;) В следующем видео постараюсь учесть это и объявлять переменные перед их использованием;)
@vladislavstepanov7591 4 роки тому
@@ThreePixDroid Благодарю)
@amodeus6701 4 роки тому
А как по мне - наоборот объявление переменных возле операторов ухудшает читаемость кода. Вместо того, что бы сосредоточиться на алгоритме тратится время на вычленение где объявление, где вызов, особенно если объявление какого-то сложного объекта. Не говоря уже о том что, искусственно увеличивается высота логического блока. А потом крути экран вверх/вниз. А вообще, основная суть объявления переменных непосредственно перед использованием - это ограничение их области видимости, а не увеличение/уменьшение читаемости. Читаемость - это очень субъективная оценка.
@vladislavstepanov7591 4 роки тому
@@amodeus6701 Если ты объявишь переменную просто чуть ниже, но по делу, область видимости от этого не изменится. А объявлять переменные в самом начале, а потом искать их и постоянно елозить вверх-вниз - мне, лично, не нравится
@user-ki7de6xq1t 4 роки тому
@@ThreePixDroid Вообще вполне допустимый вариант. В es5 это было даже правильным вариантом, так как все var переменные "поднимаются" (hoisting), и интерпретатор в любом случае сделает это за вас. В es6 let и const не поднимаются, поэтому допустимы оба варианта я считаю)
@renatvlasov4855 Місяць тому
Чувак явно не из мира js. Странное форматирование, сравнение с приведением вместо эквивалентности, весьма непривычный стиль объявления переменных через деструктуризацию массива, let там, где нужен const
@ThreePixDroid Місяць тому
в точку, даже близко не из мира js, просто хобби
Елена Литвинова — Искусство Веб-разработки 🛸
Переглядів 16 тис.
Суспільне Чернігів
Переглядів 1,3 млн
Суспільне Суми
Переглядів 1 млн
Суспільне Львів
Переглядів 726 тис.
SimonDev
Переглядів 26 тис.
Елена Литвинова — Искусство Веб-разработки 🛸
Переглядів 10 тис.
Суспільне Чернігів
Переглядів 1,3 млн