New Extension: Particle Engine #1724

SharkPool-SP · 2024-10-15T07:49:50Z

Create Powerful Particle Engines with NO Clones

Screen.Recording.2024-10-15.at.12.31.42.AM.mov

wow.particles.mp4

BludIsAnLemon · 2024-10-15T08:03:15Z

Peak!!

Brackets-Coder · 2024-10-15T12:07:25Z

Two questions I have:

Does high quality pen affect rendering quality?
I've noticed that a lot of your extensions have gradient blocks. This looks cool, but the way you're implementing it with the patch is very weird. I think it'd be sick if we could use CSS colors and gradients as the color values for blocks instead of just hex values. How involved in the scratch-gui would it be to be able to do this?

circledude64 · 2024-10-15T12:17:33Z

yes

hammouda101010 · 2024-10-15T14:21:26Z

WOW! a new particle engine with no clones! that's great for performance and now overflow your projects with clones! (even if i use clones, a lot)

SharkPool-SP · 2024-10-15T14:27:45Z

Two questions I have:

Does high quality pen affect rendering quality?

I've noticed that a lot of your extensions have gradient blocks. This looks cool, but the way you're implementing it with the patch is very weird. I think it'd be sick if we could use CSS colors and gradients as the color values for blocks instead of just hex values. How involved in the scratch-gui would it be to be able to do this?

no, this is not a "pen" canvas, to change quality, you'd need to use the set stage size block, but it comes at a cost of lower performance.
The gui doesn't allow gradients in blocks at all. So I can't simply just put it in the extension block code. So I have to use the patch.

Additionally, blocks in the editor are all SVGs, which means you can't color them with any html property. You have do what I do and make SVG gradients or patterns.

hammouda101010 · 2024-10-15T16:40:10Z

Two questions I have:

Does high quality pen affect rendering quality?

I've noticed that a lot of your extensions have gradient blocks. This looks cool, but the way you're implementing it with the patch is very weird. I think it'd be sick if we could use CSS colors and gradients as the color values for blocks instead of just hex values. How involved in the scratch-gui would it be to be able to do this?

well, i just ~~stole~~ borrowed code for you to use the patch:

   function add2Body() {
    var svg = document.createElement("div");
    svg.innerHTML = \`<svg><defs>
      <linearGradient x1="100" y1="0" x2="100" y2="200" id="SPpartEngine-GRAD1" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0090ff"></stop><stop offset="50%" stop-color="#0000ff"></stop></linearGradient>
      </defs></svg>`;
    document.body.appendChild(svg);
  }
  if (Scratch.gui) Scratch.gui.getBlockly().then((SB) => {
    add2Body();
    if (!SB?.SPgradients?.patched) { // Gradient Patch by 0znzw & SharkPool
      SB.SPgradients = {gradientUrls: {}, patched: false};
      const BSP = SB.BlockSvg.prototype, BSPR = BSP.render;
      BSP.render = function(...args) {
        const res = BSPR.apply(this, args);
        let category;
        if (this?.svgPath_ && this?.category_ && (category = this.type.slice(0, this.type.indexOf("_"))) && SB.SPgradients.gradientUrls[category]) {
          const urls = SB.SPgradients.gradientUrls[category];
          if (urls) this.svgPath_.setAttribute("fill", urls[0]);
        }
        return res;
      }
      SB.SPgradients.patched = true;
    }
    SB.SPgradients.gradientUrls["SPpartEngine"] = ["url(#SPpartEngine-GRAD1)"];
  });

Brackets-Coder · 2024-10-15T16:42:06Z

Two questions I have:

Does high quality pen affect rendering quality?

I've noticed that a lot of your extensions have gradient blocks. This looks cool, but the way you're implementing it with the patch is very weird. I think it'd be sick if we could use CSS colors and gradients as the color values for blocks instead of just hex values. How involved in the scratch-gui would it be to be able to do this?

well, i just ~~stole~~ borrowed code for you to use the patch:

function add2Body() { var svg = document.createElement("div"); svg.innerHTML = <svg><defs> <linearGradient x1="100" y1="0" x2="100" y2="200" id="SPpartEngine-GRAD1" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0090ff"></stop><stop offset="50%" stop-color="#0000ff"></stop></linearGradient> </defs></svg>; document.body.appendChild(svg); } if (Scratch.gui) Scratch.gui.getBlockly().then((SB) => { add2Body(); if (!SB?.SPgradients?.patched) { // Gradient Patch by 0znzw & SharkPool SB.SPgradients = {gradientUrls: {}, patched: false}; const BSP = SB.BlockSvg.prototype, BSPR = BSP.render; BSP.render = function(...args) { const res = BSPR.apply(this, args); let category; if (this?.svgPath_ && this?.category_ && (category = this.type.slice(0, this.type.indexOf(""))) && SB.SPgradients.gradientUrls[category]) { const urls = SB.SPgradients.gradientUrls[category]; if (urls) this.svgPath.setAttribute("fill", urls[0]); } return res; } SB.SPgradients.patched = true; } SB.SPgradients.gradientUrls["SPpartEngine"] = ["url(#SPpartEngine-GRAD1)"]; });

I've already looked at the code, but I don't intend to use it for my extensions. Thank you anyway though.

Brackets-Coder · 2024-10-15T16:44:09Z

Two questions I have:

Does high quality pen affect rendering quality?

I've noticed that a lot of your extensions have gradient blocks. This looks cool, but the way you're implementing it with the patch is very weird. I think it'd be sick if we could use CSS colors and gradients as the color values for blocks instead of just hex values. How involved in the scratch-gui would it be to be able to do this?

no, this is not a "pen" canvas, to change quality, you'd need to use the set stage size block, but it comes at a cost of lower performance.

The gui doesn't allow gradients in blocks at all. So I can't simply just put it in the extension block code. So I have to use the patch.

Additionally, blocks in the editor are all SVGs, which means you can't color them with any html property. You have do what I do and make SVG gradients or patterns.

Interesting. I was just curious as to if we could change the scratch-gui repo to add some sort of functionality for gradients and CSS colors in the block color APIs, but I guess not - It didn't occur to me that the SVGs can't use CSS gradients. Maybe we could use this patch though, and manually inject the colors into the patch? IDK, it's just an idea. Probably won't be done though. What might be more possible is expanding the customizable block colors addon to allow for gradients.

SharkPool-SP · 2024-10-30T21:16:51Z

Theres now an interpolation option! :)

CubesterYT · 2025-04-21T22:53:25Z

!format

SharkPool-SP · 2025-04-21T23:19:31Z

!format

SharkPool-SP · 2025-04-21T23:21:03Z

Rewritten in WebGL! This is now much faster and efficient :)

Brackets-Coder · 2025-09-18T18:49:06Z

Basically just remove the text from the banner then I guess we're good to merge this peak

SharkPool-SP · 2025-09-18T18:58:40Z

Basically just remove the text from the banner then I guess we're good to merge this peak

I think documentation can be saved for another time, the blocks are in order of usability. So it should be easy to pickup. It works closely to the geometry dash particle engine as well.

We can always go back and add it if need be

Brackets-Coder · 2025-09-18T19:03:27Z

Basically just remove the text from the banner then I guess we're good to merge this peak

I think documentation can be saved for another time, the blocks are in order of usability. So it should be easy to pickup. It works closely to the geometry dash particle engine as well.

We can always go back and add it if need be

In my testing it didn't take me long to figure out but I couldn't get engines working on sprites, only the stage? Maybe I was doing something wrong

SharkPool-SP · 2025-09-18T19:14:11Z

Basically just remove the text from the banner then I guess we're good to merge this peak

I think documentation can be saved for another time, the blocks are in order of usability. So it should be easy to pickup. It works closely to the geometry dash particle engine as well.

We can always go back and add it if need be

In my testing it didn't take me long to figure out but I couldn't get engines working on sprites, only the stage? Maybe I was doing something wrong

Wdym. The engines don't follow sprites, they're just attached to them

Brackets-Coder · 2025-09-18T20:21:47Z

Wdym. The engines don't follow sprites, they're just attached to them

No, I meant I for some reason couldn't get them working when attached to a sprite, I rushed through it so I must've done something wrong

extensions/SharkPool/Particle-Engine.js

add punctuation to end of description comment

SharkPool-SP · 2025-09-18T20:59:03Z

Wdym. The engines don't follow sprites, they're just attached to them

No, I meant I for some reason couldn't get them working when attached to a sprite, I rushed through it so I must've done something wrong

Maybe you didn't make an emitter for that engine?

Brackets-Coder · 2025-09-18T21:05:05Z

Maybe you didn't make an emitter for that engine?

Oops I got it working sorry

Brackets-Coder · 2025-09-18T21:05:16Z

Yeah just change the banner and we should be good to go

PPPDUD · 2025-09-18T21:28:59Z

Is that a gradient for the block colors? Looks really nice.

Brackets-Coder · 2025-09-18T21:30:52Z

Is that a gradient for the block colors? Looks really nice.

Yes

PPPDUD · 2025-09-18T21:33:17Z

Is that a gradient for the block colors? Looks really nice.

Yes

I didn't know that block colors could use gradients!

Brackets-Coder · 2025-09-18T21:37:28Z

Is that a gradient for the block colors? Looks really nice.

Yes

I didn't know that block colors could use gradients!

They can't by default, it's an SVG patch.

PPPDUD · 2025-09-18T21:55:39Z

Is that a gradient for the block colors? Looks really nice.

Yes

I didn't know that block colors could use gradients!

They can't by default, it's an SVG patch.

I see.

SharkPool-SP · 2025-09-18T22:03:58Z

alright fixed

Brackets-Coder

Thanks, everything looks good!

Brackets-Coder · 2025-09-18T22:45:55Z

@PPPDUD

PPPDUD · 2025-09-18T23:03:16Z

@PPPDUD

I'm going to have to pass for tonight, but I might be willing to review tomorrow.

extensions/SharkPool/Particle-Engine.js

GarboMuffin

when i change the VM fps to 60, i would expect the particles to not move twice as fast. there does seem to be delta time logic at least in some places. is it not being used? ✅
when i have an emitter going and i resize the stage, i would expect the particle canvas to resize too and at least appear in the right spot after the resize (as is, stage emitter is very offset to the right after resizing 480x360 to 640x360) ✅
the dropdowns in the flyout only update after exiting the editor and going back in; newly creates sprites will not show up ✅
uploading one webgl context to another context seems to be slow. create like 10 particle engines, even with almost nothing going on, it gets really slow: https://share.firefox.dev/4gty2bI ✅ [Not Fixing, other gallery extensions use this method]
chrome limits max webgl contexts per tab to something like 16, so by the time someone makes their 16th particle context, the context used by the vm will be lost until a full refresh ✅
even if unused engines are removed with the block, it's not guaranteed that chrome will garbage collect them and release the webgl slot right away (make a "create engine for x / remove engine for x" script and duplicate it on top of itself 20 times to see example)
blend modes are seemingly affected by same problems as in #2142 (set particle blend mode to subtract in light mode for an example) ✅
the particles are highly pixelated in fullscreen and on high dpi displays outside of fullscreen ✅ [Not Fixing]

extensions/SharkPool/Particle-Engine.js

GarboMuffin · 2025-09-19T01:51:19Z

extensions/SharkPool/Particle-Engine.js

+    }
+  }
+
+  if (Scratch.gui)


i think if you want gradients i think you should make a documented pr with a couple test cases so all the extensions get it. as-is this also breaks colored context menus

Colored context menus is bug with the addon, even if you make this a actual thing, the addon would still be broken

and Id rather not wait 6+ months just to get a PR merged from you

extensions/SharkPool/Particle-Engine.js

Brackets-Coder · 2025-09-19T03:09:59Z

Next time I'll review more thoroughly...

SharkPool-SP · 2025-09-20T05:29:55Z

!format

Create Particle-Engine.js

e49b845

SharkPool-SP mentioned this pull request Oct 15, 2024

Create Particle Tools #1000

Closed

SharkPool-SP added 2 commits October 15, 2024 00:54

bye bye lint

98bd3d4

Create Particle-Engine.svg

400dbd1

GarboMuffin added the pr: new extension Pull requests that add a new extension label Oct 15, 2024

Particle-Engine -- Interpolation

f7e0b86

This comment was marked as abuse.

Sign in to view

SharkPool-SP added 5 commits November 24, 2024 00:26

Particle-Engine -- Waves and Exports

6a349c1

Particle-Engine -- Improve Tinting

bce68d7

Particle-Engine.js -- new gradient patch

b090d57

Particle-Engine.js -- small fixes

1951c96

Particle-Engine.js -- WebGL Rewrite + Improvements

a74f2c8

DangoCat and others added 3 commits April 21, 2025 22:53

[Automated] Format code

e69ef34

Particle-Engine.js -- lint shut

f46bd83

Particle-Engine.js -- LINT SHUT

d42ebc7

[Automated] Format code

4b83125

SharkPool-SP added 2 commits April 21, 2025 16:40

unused log

5d85745

add a cool trails option

610a119

Brackets-Coder reviewed Sep 18, 2025

View reviewed changes

extensions/SharkPool/Particle-Engine.js Outdated Show resolved Hide resolved

Update extensions/SharkPool/Particle-Engine.js

e7bfa70

add punctuation to end of description comment

remove svg text

e6f4eba

Brackets-Coder approved these changes Sep 18, 2025

View reviewed changes

GarboMuffin reviewed Sep 19, 2025

View reviewed changes

extensions/SharkPool/Particle-Engine.js Outdated Show resolved Hide resolved

fix sentence case

9e6a929

GarboMuffin reviewed Sep 19, 2025

View reviewed changes

SharkPool-SP added 3 commits September 18, 2025 20:42

Particle-Engine.js -- fix some garbo issues (1/2)

0a6e390

fix more garbo stuff (2/3)

ee4dc3b

fix garbo issues 3/3

9f85503

[Automated] Format code

4997563

SharkPool-SP requested a review from GarboMuffin September 20, 2025 06:20

New Extension: Particle Engine #1724

Are you sure you want to change the base?

New Extension: Particle Engine #1724

Uh oh!

Conversation

SharkPool-SP commented Oct 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Create Powerful Particle Engines with NO Clones

Uh oh!

BludIsAnLemon commented Oct 15, 2024

Uh oh!

Brackets-Coder commented Oct 15, 2024

Uh oh!

circledude64 commented Oct 15, 2024

Uh oh!

hammouda101010 commented Oct 15, 2024

Uh oh!

SharkPool-SP commented Oct 15, 2024

Uh oh!

hammouda101010 commented Oct 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Brackets-Coder commented Oct 15, 2024

Uh oh!

Brackets-Coder commented Oct 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SharkPool-SP commented Oct 30, 2024

Uh oh!

This comment was marked as abuse.

Uh oh!

CubesterYT commented Apr 21, 2025

Uh oh!

SharkPool-SP commented Apr 21, 2025

Uh oh!

SharkPool-SP commented Apr 21, 2025

Uh oh!

Brackets-Coder commented Sep 18, 2025

Uh oh!

SharkPool-SP commented Sep 18, 2025

Uh oh!

Brackets-Coder commented Sep 18, 2025

Uh oh!

SharkPool-SP commented Sep 18, 2025

Uh oh!

Brackets-Coder commented Sep 18, 2025

Uh oh!

Uh oh!

SharkPool-SP commented Sep 18, 2025

Uh oh!

Brackets-Coder commented Sep 18, 2025

Uh oh!

Brackets-Coder commented Sep 18, 2025

Uh oh!

PPPDUD commented Sep 18, 2025

Uh oh!

Brackets-Coder commented Sep 18, 2025

Uh oh!

PPPDUD commented Sep 18, 2025

Uh oh!

Brackets-Coder commented Sep 18, 2025

Uh oh!

PPPDUD commented Sep 18, 2025

Uh oh!

SharkPool-SP commented Sep 18, 2025

Uh oh!

Brackets-Coder left a comment

Choose a reason for hiding this comment

Uh oh!

Brackets-Coder commented Sep 18, 2025

Uh oh!

PPPDUD commented Sep 18, 2025

Uh oh!

Uh oh!

GarboMuffin left a comment • edited by SharkPool-SP Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

SharkPool-SP commented Oct 15, 2024 •

edited

Loading

hammouda101010 commented Oct 15, 2024 •

edited

Loading

Brackets-Coder commented Oct 15, 2024 •

edited

Loading

GarboMuffin left a comment •

edited by SharkPool-SP

Loading

SharkPool-SP Sep 19, 2025 •

edited

Loading