tsparticles Migrate from single size value to two dimensional values

What is your request?

Actually particles options have a single size value that creates and uses only regular shapes, in math and in the canvas drawing methods.

It would be a great addition to have irregular shapes like rectangles or ellipses instead of squares and circles, this requires moving from single size (radius) to width/height values.

This task is not that easy, since a lot of math is part of this refactoring, and both values (width and height) must be animated too, like the actual one.

Another thing to be updated have to be canvas shapes (external and internal), because both sizes must be used when drawing.

Checklist

[X] engine/src/Core/Particle.ts ✅ Commit 80bf3b7

• Replace the `size` property with `width` and `height` properties. • Update all references to the `size` property in the class to use the new `width` and `height` properties.

[X] engine/src/Options/Classes/Particles/ParticlesOptions.ts ✅ Commit 5d6d708

• Replace the `size` option with `width` and `height` options. • Update all references to the `size` option in the class to use the new `width` and `height` options.

Sandbox Execution Logs

trunk init 1/16 ✓

⡿ Downloading Trunk 1.15.0...
⡿ Downloading Trunk 1.15.0...
⢿ Downloading Trunk 1.15.0...
⣻ Downloading Trunk 1.15.0...
⣽ Downloading Trunk 1.15.0...
⣾ Downloading Trunk 1.15.0...
⣷ Downloading Trunk 1.15.0...
✔ Downloading Trunk 1.15.0... done
⡿ Verifying Trunk sha256...
✔ Verifying Trunk sha256... done
⡿ Unpacking Trunk...
✔ Unpacking Trunk... done










































✔ 14 linters were enabled (.trunk/trunk.yaml)
  actionlint 1.6.25 (5 github-workflow files)
  checkov 2.4.9 (759 json, 15 yaml files)
  git-diff-check (2429 files)
  markdownlint 0.36.0 (221 markdown files) (created .markdownlint.yaml)
  osv-scanner 1.4.0 (1 lockfile file)
  oxipng 8.0.0 (35 png files)
  prettier 3.0.3 (4 html, 178 javascript, 759 json, 221 markdown, 1 prettier_supported_configs, 2 sass, 864 typescript, 14 yaml files)
  renovate 36.93.7 (2 renovate-config files)
  shellcheck 0.9.0 (1 shell file) (created .shellcheckrc)
  shfmt 3.6.0 (1 shell file)
  svgo 3.0.2 (11 svg files) (created svgo.config.js)
  trivy 0.45.0 (1 lockfile, 14 yaml files)
  trufflehog 3.56.0 (2430 files)
  yamllint 1.32.0 (14 yaml files) (created .yamllint.yaml)
Next Steps
 1. Read documentation
    Our documentation can be found at https://docs.trunk.io
 2. Get help and give feedback
    Join the Trunk community at https://slack.trunk.io

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 2/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/LK9hw.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 3/16 ❌ (`1`)




  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/Ey9qu.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 4/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/SQFb9.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 5/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/k10xO.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 6/16 ❌ (`1`)


  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/CHaGC.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 7/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/BwJKx.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 8/16 ❌ (`1`)




  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/3RmtQ.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 9/16 ❌ (`1`)





  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/cguxW.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 10/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/qCjDx.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 11/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/YLxxe.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 12/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/lum7h.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 13/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/AbxNC.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 14/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/YnEGl.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 15/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/F8asC.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 16/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/KbDBZ.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

[X] engine/src/Core/Utils/QuadTree.ts ✅ Commit 8ec1448

• Update the collision formulas to work with the `width` and `height` properties of particles.

[X] engine/src/Core/Canvas.ts ✅ Commit 9a6324b

• Update the shape drawing methods to draw shapes using the `width` and `height` properties of particles.

Sep 26 '21 13:09 matteobruni

Thanks for opening a new issue. The team has been notified and will review it as soon as possible.

For urgent issues and priority support, visit https://xscode.com/matteobruni/tsparticles

Sep 26 '21 13:09 xscode-auto-reply[bot]

Hi, I'd like to try working on this, can you assign this to me?

Oct 01 '21 21:10 deepto98

Hey @matteobruni !

As I look into the code, I see that you've managed to create a width-height based particle system, am I right?

If it's not "really" done, can you guide me through a little your "new" request?

Oct 28 '21 15:10 nobalpha

Hey @matteobruni !

As I look into the code, I see that you've managed to create a width-height based particle system, am I right?

If it's not "really" done, can you guide me through a little your "new" request?

The issue is specific to the particle object and particles options, not the entire system.

The Particle object actually has only one size (radius), but I'd like to have it to two (width and height). This will affect all size options, since it should be converted in two distinct objects, one for width and one for height.

Also, all the collisions formulas should be updated to work with the two new dimensions, and not just with a radius.

This will result also in changes when drawing shapes, circle won't be drawing an arc from 0° to 360° anymore, but an ellipse with the desired width and height.

I know it's a huge change in the code, but it would be awesome to have it done. The target branch must be dev since it contains v2 and breaking changes are allowed.

Oct 28 '21 15:10 matteobruni

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

⚡ Sweep Free Trial: I used GPT-3.5 to create this ticket. You have 1 GPT-4 tickets left for the month and 0 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/dcae1abc7bfeaef40067bd7d1e2c6489b494026d/engine/src/Core/Utils/QuadTree.ts#L1-L160

https://github.com/tsparticles/tsparticles/blob/dcae1abc7bfeaef40067bd7d1e2c6489b494026d/utils/tests/src/Options.ts#L298-L388

Step 2: ⌨️ Coding

[X] engine/src/Core/Particle.ts ✅ Commit 80bf3b7

• Replace the `size` property with `width` and `height` properties. • Update all references to the `size` property in the class to use the new `width` and `height` properties.

[X] engine/src/Options/Classes/Particles/ParticlesOptions.ts ✅ Commit 5d6d708

• Replace the `size` option with `width` and `height` options. • Update all references to the `size` option in the class to use the new `width` and `height` options.

Sandbox Execution Logs

trunk init 1/16 ✓

⡿ Downloading Trunk 1.15.0...
⡿ Downloading Trunk 1.15.0...
⢿ Downloading Trunk 1.15.0...
⣻ Downloading Trunk 1.15.0...
⣽ Downloading Trunk 1.15.0...
⣾ Downloading Trunk 1.15.0...
⣷ Downloading Trunk 1.15.0...
✔ Downloading Trunk 1.15.0... done
⡿ Verifying Trunk sha256...
✔ Verifying Trunk sha256... done
⡿ Unpacking Trunk...
✔ Unpacking Trunk... done










































✔ 14 linters were enabled (.trunk/trunk.yaml)
  actionlint 1.6.25 (5 github-workflow files)
  checkov 2.4.9 (759 json, 15 yaml files)
  git-diff-check (2429 files)
  markdownlint 0.36.0 (221 markdown files) (created .markdownlint.yaml)
  osv-scanner 1.4.0 (1 lockfile file)
  oxipng 8.0.0 (35 png files)
  prettier 3.0.3 (4 html, 178 javascript, 759 json, 221 markdown, 1 prettier_supported_configs, 2 sass, 864 typescript, 14 yaml files)
  renovate 36.93.7 (2 renovate-config files)
  shellcheck 0.9.0 (1 shell file) (created .shellcheckrc)
  shfmt 3.6.0 (1 shell file)
  svgo 3.0.2 (11 svg files) (created svgo.config.js)
  trivy 0.45.0 (1 lockfile, 14 yaml files)
  trufflehog 3.56.0 (2430 files)
  yamllint 1.32.0 (14 yaml files) (created .yamllint.yaml)
Next Steps
 1. Read documentation
    Our documentation can be found at https://docs.trunk.io
 2. Get help and give feedback
    Join the Trunk community at https://slack.trunk.io

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 2/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/LK9hw.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 3/16 ❌ (`1`)




  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/Ey9qu.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 4/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/SQFb9.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 5/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/k10xO.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 6/16 ❌ (`1`)


  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/CHaGC.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 7/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/BwJKx.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 8/16 ❌ (`1`)




  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/3RmtQ.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 9/16 ❌ (`1`)





  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/cguxW.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 10/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/qCjDx.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 11/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/YLxxe.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 12/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/lum7h.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 13/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/AbxNC.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 14/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/YnEGl.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 15/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/F8asC.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt engine/src/Options/Classes/Particles/ParticlesOptions.ts 16/16 ❌ (`1`)



  FAILURES  
 prettier  engine/src/Options/Classes/Particles/ParticlesOptions.ts  .trunk/out/KbDBZ.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

[X] engine/src/Core/Utils/QuadTree.ts ✅ Commit 8ec1448

• Update the collision formulas to work with the `width` and `height` properties of particles.

[X] engine/src/Core/Canvas.ts ✅ Commit 9a6324b

• Update the shape drawing methods to draw shapes using the `width` and `height` properties of particles.

Step 3: 🔁 Code Review

Here are my self-reviews of my changes at sweep/migrate-to-two-dimensional-values.

Here is the 1st review

Good job on implementing the changes for the issue. However, there is a small mistake in the `engine/src/Options/Classes/Particles/ParticlesOptions.ts` file.

In the ParticlesOptions class, you replaced the size option with only the width option. However, the requirement is to replace the size option with both width and height options. Please make sure to add a height option in the ParticlesOptions class similar to the width option.

Keep up the good work!

I finished incorporating these changes.

🎉 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}

Sep 18 '23 00:09 sweep-ai-deprecated[bot]

tsparticles tsparticles copied to clipboard

Migrate from single size value to two dimensional values

What is your request?

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

Actions (click)

Step 1: 🔎 Searching

Step 2: ⌨️ Coding

Step 3: 🔁 Code Review

tsparticles
tsparticles copied to clipboard