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