​​Раз в несколько месяцев я люблю участвовать в челенджах от Codepen. Особенно в тех, где можно что-то порисовать на канвасе. На прошлой неделе я дождалась очередную интересную мне тему: частицы и их физика!

https://codepen.io/gnykka/pen/oNQQqwG

Немного о том, как именно это сделано.
1. Я взяла изображение и, отрисовав его на канвасе, считала информацию о пикселях. Чтобы уменьшить размер и создать эффект частиц я отфильтровала часть, оставив только каждый третий пиксель в строке и столбце.

2. Эффект движения частиц возникает при движении мыши. Идею я взяла из вот этого примера, упростив и подстроив его под себя.

3. При каждом движении мыши для каждой частицы считается квадрат расстояние от неё до положения курсора. Если это значение меньше заданного параметра forceDist, то частица должна будет сдвинуться. Вопрос, куда и насколько?

4. Для вычисления направления можно использовать функцию Math.atan2, которая считает угол между точкой и положительной частью оси Х. А расстояние можно узнать, взяв синус и косинус этого угла и умножив на коэффициент force (он зависит от расстояния между частицей и курсором).

5. Чтобы частицы возвращались в исходное положение, когда на них не оказывает влияние курсор, введён ещё один коэффициент — dragValue. Если он меньше 1, то он постепенно сводит изначально посчитанное расстояние к 0. В итоге частица оказывается на своём старом месте.

Визуализируй это!

​​Раз в несколько месяцев я люблю участвовать в челенджах от Codepen. Особенно в тех, где можно что-то порисовать на канвасе. На прошлой неделе я дождалась очередную интересную мне тему: частицы и их физика!

https://codepen.io/gnykka/pen/oNQQqwG

Немного о том, как именно это сделано.
1. Я взяла изображение и, отрисовав его на канвасе, считала информацию о пикселях. Чтобы уменьшить размер и создать эффект частиц я отфильтровала часть, оставив только каждый третий пиксель в строке и столбце.

2. Эффект движения частиц возникает при движении мыши. Идею я взяла из вот этого примера, упростив и подстроив его под себя.

3. При каждом движении мыши для каждой частицы считается квадрат расстояние от неё до положения курсора. Если это значение меньше заданного параметра forceDist, то частица должна будет сдвинуться. Вопрос, куда и насколько?

4. Для вычисления направления можно использовать функцию Math.atan2, которая считает угол между точкой и положительной частью оси Х. А расстояние можно узнать, взяв синус и косинус этого угла и умножив на коэффициент force (он зависит от расстояния между частицей и курсором).

5. Чтобы частицы возвращались в исходное положение, когда на них не оказывает влияние курсор, введён ещё один коэффициент — dragValue. Если он меньше 1, то он постепенно сводит изначально посчитанное расстояние к 0. В итоге частица оказывается на своём старом месте.

0:16

hottg.com/visualize_it/87

3.7K viewsJul 31, 2023 at 10:19