Files
sunny9898/_ref/code/scattereddots
louiscklaw 5637fbf94f update,
2025-02-01 02:07:58 +08:00
..
2025-02-01 02:07:58 +08:00
2025-02-01 02:07:58 +08:00

Scattered dots

scattered dots gif

code

comments

This animation is simple but has had a lot of success on tumblr.

It's using particles following a single path with replacement technique.

First the positions of the path are computed at setup, using jumps of random length, in 8 different directions. There are checks to go in opposite direction when the jump crosses a margin.

From this list, the position at parameter p in [0,1] is found using interpolation between positions of the list (tutorial). The interpolation uses an easing function, which makes the dots stop and move smoothly. Once we've got this parametrization of the path, the replacement technique is used, with less dots on the path than its number of jumps.

Similarly to position, there is a list of sizes of dot, and interpolation between these sizes.

Year: 2018

On bleuje site: https://bleuje.com/gifanimationsite/single/scattereddots/

On social media: