Canvas & JavaScript | Притяжение и отталкивание частиц | rus
![ThreePixDroid [RU]](http://yt3.ggpht.com/ytc/AIdro_m9hY0wSlD4ygQJ9MwISJSheP6X-5dtaCYYZ-hmk6ytX8k=s48-c-k-c0x00ffffff-no-rj)
HTML-код
- Опубликовано: 20 сен 2019
- 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
Чел, это просто ахуенно, я давно хотел подтянуть js и тут увидел твой видос в палике по проге, ЭТО ПРОСТО НЕЧТО, ПРОДОЛЖАЙ В ТОМ ЖЕ ДУХЕ, ТЫ КРАСАВА!!!
Большое спасибо:)
1) Для простого обхода массива используют .forEach (не .map).
2) Если симулировать гравитацию, то сила вычисляется как масса, деленная на квадрат расстояния. Но тут и не была заявлена симуляция гравитации, масса умножалась на расстояние, и получился эффект, напоминающий что-то вроде поверхностного натяжения.
(Кстати, известно, что центробежная сила - это фиктивная сила. И здесь видно, что несмотря на то, что она в коде никак не прописана, она "проявляется" как следствие других сил) 25:38
Класс, спасибо за такой полезный урок, видно что работа проделана большая и качественная. Так держать!
Автору спасибо за отличный контент и возможность учиться у мастера.
Пожалуйста. Видел твой предыдущий комментарий.... Видео снято не с целью обучения.. А если в коде есть что то, что с твоей точки зрения стоит поменять то смело пиши)
очень красиво и интересно
Наткнулся на видео в вк, в групе code block, Очень понравилась подача видео и качество сьёмки. Лайк, подписка. Делаешь просто афигенно! Мне как раз нехватало в опыте работы с канвасом и охото было сделать что то красивое.
Круто) рад что угодил)
Шикарненько
Спасибо за такое крутое видео
Это великолепно. Я никогда такого не видел
спасибо)
класс видео! спасибо что ты есть
не за что;) рад что пригодилось!;)
Incredible!
Не когда не оставляю комент, но ты удивил, Респект Мээн)))
Спасибо)
Wow. This is awesome
10X dude ;)
thank you bro, valuable informations !
you're welcome!)
наткнулся случайно и офигел)
Поддерживаю! не новичок в js и не знал, что там можно 0_о
👍👍👍👍👍👍👍👍
круто)
Спасибо)
Ты чёткий чел 😁
Спасибо)
А ты крут
А парнишка то хорош, но почему-то слишком мало зрителей у тебя, нужно это изменить, твои видео помогают и воодушевляют многих. Спасибо.
Спасибо за добрые слова!;)
🤯
Шикарные видео, очень понравились.
Вопрос. А нет более рационального способа проверки расстояние (или других зависимостей) между точками вместо цикла?
Привет. Пройтись по каждой точке из массива в любом случае придется, что бы сравнить её с каждой другой точкой из того же массива.
Но не обязательно использовать именно цикл For
можно например юзать forOf ,
так даже удобнее было бы в этом коде.
А вот расстояние можно найти например методом Math.hypot(dx, dy); или например вообще не получать квадратный корень, а наоборот возвести в квадрат ту дистанцию с которой сравниваем текущее расстояние.
Очень круто вышло! Можете посоветовать ресурсы
по изучению Js?
Спасибо;) learn.javascript.ru/
полезный сайт. Приложение SoloLearn на телефон - бесплатное и тоже полезное. Книга По p5js The nature of code natureofcode.com/book/.
По моему мнению, очень хороший способ изучения - это придумать себе цель, например программу которая делает то, что тебе необходимо и на практике пошагово решать каждую задачу необходимую для реализации твоей задумки.
Классный урок, не подскажешь свою тему в VS
Привет;) Horizon Theme...
Инетересные видосики, давай ещё))
ThreePixDroid, что за редактор кода используешь??
спасибо! редактор visual studio code.
Сейчас мало времени, по этой причине видео выпускаю редко,
в будущем постараюсь стабилизировать этот момент.
ахр*неть
Крутяк, и через сколько лет работы можно писать такое из головы?:) Очень крутые видео!
Зависит от того как быстро учишься)
Вполне реально через пол года с нуля)
Отличный урок! Спасибо.
P.S. Как эту фичу можно поставить на backdround (картинка) верхним слоем ?
Не за что.
Просто использовать элемент Canvas в том месте где необходим данный эффект.
Если Canvas перекроет кнопки, то они перестанут реагировать.
привет, ты офигительный!!! я хочу учить js, но незнаю как, можешь посоветовать как учить js , пожалуйста
Привет) думаю самый простой способ. это придумать себе цель... и пошагово её решать.
Допустим целью будет создание мини игры. Какой-нибудь лабиринт из обычных прямоугольников, а персонаж просто круг.
Тогда мини задачи будут следующие:
определять какая клавиша нажата для того что бы двигать персонажа,
научится рисовать круги и прямоугольники
и всё остальное в том духе..
Как стать таким профи как ты?)
Спасибо, оч приятно) Но я далеко не профи) Нужно просто много практиковаться)
Куча замечаний как по коду, так и по расчетке. Если интересно, можем обсудить в дискорд
Привет) Отправил тебе инвайт в discord.
Объясни пожалуйста, не совсем понял, где мы настроили количество выпускаемых частиц по нажатию? Спасибо за видос!
Мы не настраивали кол-во выпускаемых частиц.. Они создаются всегда пока мышь нажата на Холсте.
вот эта строчка(91- ая строка должна быть):
if (mouse.down) { dots.push(new Dot()); }
@@ThreePixDroid_RU то есть получается за столь короткий промежуток у меня успевает 5-7 дотов создаться? спасибо за обьяснение))
пожалуйста)
а как 1 функцией нарисовать 2 независимых объекта, с которыми можно взаимодействовать ?
какой красивый код, мое почтение и немного зависти)
Вау) Спасибо большое, очень приятно!)
@@ThreePixDroid_RU все никак нормально к canvas добраться не могу, а тут такое вдохновение)) Чисто по самой идее, точнее по практичному использованию даной красоты (или подобной) на сайтах, вопрос: возможно стоит добавить максимальную вмистимость dots (удалять с начала масива ранее созданые, кроме 0-го), чтобы юзер не переусердствовал с созданием шариков и все не начало подлагивать?) или не стоит переживать по этому поводу?
Изменено: попробовал ограничить количество, получилось хорошо (одно свойство в config и пару строк в loop), подлагивания пропали :) Но возник ещё один вопрос: как стартануть этот код на мобильных девайсах? На touchmove, touchstart, touchend?
Конечно стоит ограничить кол-во частиц) Ещё лучше получить данные о устройстве и размере экрана чтоб точно знать на сколько ограничить кол-во 'dots' ;)
Для большей оптимизации можно создать заранее спрайты частиц разного уровня яркости) и просто менять спрайты) и ещё кучу разных оптимизаций можно провести)
Но суть урока в алгоритме)
А все оптимизации описанные выше и прочие которые можно придумать, применимы наверное ко всем моим видео)
Возможно как нибудь запишу урок с управлением жестами) Но это и так довольно просто, в инете вбить, там всё подробно описано и примеры есть)
крутооо )))
function setPos ({layerX,layerY}) - а это как?
спасибо) в контакте отвечал тебе на этот вопрос)
Можно ссылочку на объяснение?
Это называется деструктуризация.
В функцию приходит событие и мы сразу получаем из него нужные свойства.
Простите, а для чего нужна функция line в данном примере?
Над будет глянуть код ) чёт не помню line ... или можешь тайминг скинуть.. посмотрю и сразу вспомню..)
а как называется тема?
все великолепно но не понятно "dots.map(e => e == dots[0] ? e.draw(mouse.x, mouse.y) : e.draw())" что такое e
Привет! Всё просто, мы пробегаемся по каждой сфере в массиве для её отрисовки, но если это самая первая сфера в массиве то мы задаём ей координаты мыши...
dots.map(function(e) {
if(e == dots[0]) {
e.draw(mouse.x, mouse.y)
}else {
e.draw()
}
})
Качество кода = Повелитель.js
Английское произношение = Королевы Англии очумевший внук
Строка 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.
ок
what is theme?)
Horizon bold.
@@ThreePixDroid_RU Thank you :D
Про отталкивание непонятно
От курсора частицы отталкиваются... И от друг друга держится на расстоянии, и одновременно притягиваются..
В чем профит объявлять переменные в начале, а не тогда, когда они нужны? Как по мне, это только ухудшает читаемость кода
Хочу заметить, что это просто урок;)
В своём коде можно сделать так как вам удобнее;)
В следующем видео постараюсь учесть это и объявлять переменные перед их использованием;)
@@ThreePixDroid_RU Благодарю)
А как по мне - наоборот объявление переменных возле операторов ухудшает читаемость кода.
Вместо того, что бы сосредоточиться на алгоритме тратится время на вычленение где объявление, где вызов, особенно если объявление какого-то сложного объекта.
Не говоря уже о том что, искусственно увеличивается высота логического блока. А потом крути экран вверх/вниз.
А вообще, основная суть объявления переменных непосредственно перед использованием - это ограничение их области видимости, а не увеличение/уменьшение читаемости. Читаемость - это очень субъективная оценка.
@@amodeus6701 Если ты объявишь переменную просто чуть ниже, но по делу, область видимости от этого не изменится.
А объявлять переменные в самом начале, а потом искать их и постоянно елозить вверх-вниз - мне, лично, не нравится
@@ThreePixDroid_RU Вообще вполне допустимый вариант. В es5 это было даже правильным вариантом, так как все var переменные "поднимаются" (hoisting), и интерпретатор в любом случае сделает это за вас. В es6 let и const не поднимаются, поэтому допустимы оба варианта я считаю)
Чувак явно не из мира js. Странное форматирование, сравнение с приведением вместо эквивалентности, весьма непривычный стиль объявления переменных через деструктуризацию массива, let там, где нужен const
в точку, даже близко не из мира js, просто хобби