Add easing functions to particles values animations

matteobruni commented 1 year ago

The size, opacity and maybe other animation options could benefit an easing option, to change the animation speed accordingly to the given easing function. This could create an effect where the opacity starts fading slow accelerating in the end, the same could be for size or other animations.

Checklist

- [X] `engine/src/Utils/EasingFunctions.ts` ✅ Commit [`ad52bfc`](https://github.com/tsparticles/tsparticles/commit/ad52bfce0087c7c0d17f9d6d13781530e939f105) - [X] `engine/src/Options/Interfaces/Particles/Size/ISizeAnimation.ts` ✅ Commit [`122a704`](https://github.com/tsparticles/tsparticles/commit/122a704be2c0b867e8f6e32ad1fb0716a6999388) - [X] `engine/src/Options/Interfaces/Particles/Opacity/IOpacityAnimation.ts` ✅ Commit [`452ec04`](https://github.com/tsparticles/tsparticles/commit/452ec041eea22002fb2cbbf0ee42aa254983a03c) - [X] `engine/src/Updaters/SizeUpdater.ts` ✅ Commit [`99b1544`](https://github.com/tsparticles/tsparticles/commit/99b1544beee63efa2c74c27ac95eac2cae5e77d2) - [X] `engine/src/Updaters/OpacityUpdater.ts` ✅ Commit [`fc5208a`](https://github.com/tsparticles/tsparticles/commit/fc5208a26b43b37668b129aa2d8391e2f92abb3c) - [X] `markdown/Options/Particles/Size.md` ✅ Commit [`aeceee4`](https://github.com/tsparticles/tsparticles/commit/aeceee480a9dbb22221329ea6a0a143ac1722abb) - [X] `markdown/Options/Particles/Opacity.md` ✅ Commit [`7f50afb`](https://github.com/tsparticles/tsparticles/commit/7f50afb71a234d3676f3207aaa789d6aaf8dbe57)

sweep-ai[bot] commented 9 months ago

Here's the PR! https://github.com/tsparticles/tsparticles/pull/5224.

⚡ Sweep Free Trial: I'm creating this ticket using GPT-4. You have 3 GPT-4 tickets left for the month and 1 for the day. For more GPT-4 tickets, visit our payment portal.

Actions (click)

[ ] ↻ Restart Sweep

Step 1: 🔎 Searching

I found the following snippets in your repository. I will now analyze these snippets and come up with a plan.

Some code snippets I looked at (click to expand). If some file is missing from here, you can mention the path in the ticket description.

https://github.com/tsparticles/tsparticles/blob/21c7989e7b2f2471a8901599a55eeec72f70985a/engine/src/Options/Interfaces/IOptions.ts#L1-L142 https://github.com/tsparticles/tsparticles/blob/21c7989e7b2f2471a8901599a55eeec72f70985a/markdown/Options/Themes.md#L1-L32 https://github.com/tsparticles/tsparticles/blob/21c7989e7b2f2471a8901599a55eeec72f70985a/plugins/emitters/src/Options/Interfaces/IEmitter.ts#L1-L86 https://github.com/tsparticles/tsparticles/blob/21c7989e7b2f2471a8901599a55eeec72f70985a/markdown/Options/Particles/Life.md#L1-L20 https://github.com/tsparticles/tsparticles/blob/21c7989e7b2f2471a8901599a55eeec72f70985a/engine/src/Options/Interfaces/Background/IBackground.ts#L1-L48

Step 2: ⌨️ Coding

[X] engine/src/Utils/EasingFunctions.ts ✅ Commit ad52bfc

• Create a new file `EasingFunctions.ts` in the `engine/src/Utils` directory. • Define several easing functions in this file. Each function should take a single parameter `t` that represents the current time and return a value between 0 and 1 that represents the progress of the animation at that time.
[X] engine/src/Options/Interfaces/Particles/Size/ISizeAnimation.ts ✅ Commit 122a704

• Import the easing functions from `EasingFunctions.ts`. • Add a new property `easing` to the `ISizeAnimation` interface. The type of this property should be a function type that matches the signature of the easing functions.
[X] engine/src/Options/Interfaces/Particles/Opacity/IOpacityAnimation.ts ✅ Commit 452ec04

• Import the easing functions from `EasingFunctions.ts`. • Add a new property `easing` to the `IOpacityAnimation` interface. The type of this property should be a function type that matches the signature of the easing functions.
[X] engine/src/Updaters/SizeUpdater.ts ✅ Commit 99b1544

• Import the `ISizeAnimation` interface. • In the `update` method, use the `easing` function from the `size.animation` options to calculate the new size of the particle.
[X] engine/src/Updaters/OpacityUpdater.ts ✅ Commit fc5208a

• Import the `IOpacityAnimation` interface. • In the `update` method, use the `easing` function from the `opacity.animation` options to calculate the new opacity of the particle.
[X] markdown/Options/Particles/Size.md ✅ Commit aeceee4

• Add a new section to the documentation that describes the `easing` property of the `size.animation` options. • Explain how to use the easing functions to adjust the animation speed.
[X] markdown/Options/Particles/Opacity.md ✅ Commit 7f50afb

• Add a new section to the documentation that describes the `easing` property of the `opacity.animation` options. • Explain how to use the easing functions to adjust the animation speed.

Step 3: 🔁 Code Review

I have finished reviewing the code for completeness. I did not find errors for sweep/easing-functions.

.

🎉 Latest improvements to Sweep:

Getting Sweep to run linters before committing! Check out Sweep Sandbox Configs to set it up.
Added support for self-hosting! Check out Self-hosting Sweep to get started.
[Self Hosting] Multiple options to compute vector embeddings, configure your .env file using VECTOR_EMBEDDING_SOURCE

💡 To recreate the pull request edit the issue title or description. To tweak the pull request, leave a comment on the pull request. ^{Join Our Discord}

wwzeng1 commented 9 months ago

Hi @matteobruni! We're working through some improvements, and I'll rework all of these shortly. Really sorry about the bad PRs here.

wwzeng1 commented 9 months ago

By the way, big fan of particles.js. https://sweep.dev/ you can click our logo in the center here for an easter egg that Sweep wrote :D

matteobruni commented 9 months ago

Hi @matteobruni! We're working through some improvements, and I'll rework all of these shortly. Really sorry about the bad PRs here.

No problem, sometimes the generated code can be very helpful, it was worth a try

tsparticles / tsparticles