New Extension: Particle Engine by SharkPool-SP · Pull Request #1724 · TurboWarp/extensions

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 :)

SharkPool-SP · 2026-01-20T20:26:33Z

the problem with that is it wont be interpolation per engine anymore. What youre suggesting is that all engines should have interpolation enabled when runtime turns it on?

It's complicated since there's two methods of toggle, one with the block and one without. Ideally both should "just work" intuitively but the two-way communication between both methods doesn't work "intuitively." To be honest I would just say keep either one and remove the other method, but if you can get both to work together that'd be better

okay I just removed the option to toggle interpolation, I just made it automatically turn on

Brackets-Coder · 2026-01-21T00:21:48Z

okay I just removed the option to toggle interpolation, I just made it automatically turn on

Fantastic! If you're going to do it that way make sure you explain in the docs :D

Brackets-Coder · 2026-01-21T00:22:17Z

I'll take a look later when I have time and probably approve

SharkPool-SP · 2026-01-21T01:26:18Z

I'll take a look later when I have time and probably approve

Already changed the docs

Brackets-Coder

Turning on interpolation and then creating an engine/emitter causes the emitter to be created without interpolation enabled.

Executing the "delete and wait" block still appears to disable interpolation on the emitter

Spamming the following block stack in the editor results in the There are too many active WebGL contexts on this page, the oldest context will be lost error.

It seems to be mostly working and these are very nitpicky "polishing" issues but in general I approve of this PR

SharkPool-SP · 2026-01-25T08:22:38Z

@Brackets-Coder I fixed all those issues, the There are too many active WebGL contexts on this page, the oldest context will be lost bug I fixed in my previous commit, I used the same script in a forever loop, without refresh loop, and more... and couldnt get it

Brackets-Coder

Interpolation before creating an emitter has been fixed
Delete and wait lacking interpolation has been fixed
The WebGL error still appears, I got it by spam-clicking the above stack in the running editor. The issue seems to be the following:

    const disposeEngine = (target) => {
        const engine = target[engineTag];
        if (!engine)
            return;
        vm.off("STAGE_SIZE_CHANGED", engine.drawable.stageSZChange);
        render.destroyDrawable(engine.drawableId, "sprite");
        render.destroySkin(engine.skinId);
        runtime.requestRedraw();

        engine.gl.deleteProgram(engine.programInfo.program);
        const glExtension = engine.gl.getExtension("WEBGL_lose_context");
        // >>>> here
        if (glExtension)
            glExtension.loseContext();
        engine.canvas.remove();
        target[engineTag] = undefined;
        allEngines.delete(target.getName());
    };

I'm getting the "Too many contexts, last context will be lost" error before I get a
"WebGL: INVALID_OPERATION: loseContext: context already lost"

It implies that loseContext isn't working because the browser automatically disposes of the context, which reveals a potential flaw with remove all. Maybe, if the argument is all, try simply deleting every existing WebGL context every time, so that when the block is spammed you'll never create too many?

I don't know. This seems like a non-trivial issue and something that could be looked further into. I don't know what's going on and since you can't replicate it on your machine, I don't know how to help you.

I'm literally this 🤏 close to approval. You can probably show a video demonstrating how this issue is not reproducible, fix it really quick (which I doubt this is an easy-fix), or do something... But if you don't know what's going on and I don't know what's going on, I can either approve this right away or we can get another moderator to review and help us out

SharkPool-SP · 2026-01-25T21:48:00Z

Is that safari?

Brackets-Coder · 2026-01-25T22:02:35Z

Is that safari?

Ah... That might be what's causing the issue. I'll test in Firefox and probably chrome too if I feel like it

PPPDUD · 2026-01-25T22:04:05Z

@SharkPool-SP Are you sure that this shouldn't be a draft? It looks like you all still need a fair bit of work before merging.

Brackets-Coder

That's the issue.

Working properly in Firefox, only returned WebGL context was lost. 93 times and no error.

I'm going to approve since the issue on Safari really only shows up in the console and doesn't seem to affect performance

Brackets-Coder · 2026-01-25T22:05:49Z

Are you sure that this shouldn't be a draft? It looks like you all still need a fair bit of work before merging.

Based on what I've tested the most recent version is working as expected aside from the negligible issue above which only affects a small fraction of the population if they're looking in the console.

Any other issues I might've missed may be weeded out with a second review

GarboMuffin

Writing something. Hold on

GarboMuffin · 2026-01-25T22:12:29Z

It's pixelated compared to the cat. I guess we never made this thing follow high quality pen?

If I want to make the particle engine work the same as high quality pen then what code am I expected to write?

The default transparency mode is also doing something wrong. The default particle colors are pink/purple/blue once they finish fading in, but while they're fading in, we see one here that is pure red. That doesn't make sense

Now zoom in on one of the particles. These particles are a solid purple but the edges are clearly pink. Not the same color. Probably related to the same transparency issue

There's also weird things going on with stacked transparent particles. These two particles overlapping should not form a deep red

Brackets-Coder · 2026-01-25T22:27:39Z

I guess we never made this thing follow high quality pen?

@GarboMuffin see #1724 (comment)

GarboMuffin · 2026-01-25T22:46:17Z

Here's a concrete example of a simple project using this extension

Untitled-48.zip (sb3 inside the zip)

What blocks will make the particles look good at any resolution?

Stopping project maybe should delete all the emitters. Currently if you use dynamic emitter names at all, if you want to stop seeing a screen full of particles your easiest way out is to manually run the delete engine block on whatever sprite. Which seems silly.

This throws an uncaught error

PPPDUD · 2026-01-26T00:00:34Z

See what I mean?

SharkPool-SP · 2026-01-26T00:15:16Z

Is that safari?

Ah... That might be what's causing the issue. I'll test in Firefox and probably chrome too if I feel like it

Might be the cause, safari is garbage

SharkPool-SP · 2026-01-26T00:15:53Z

@SharkPool-SP Are you sure that this shouldn't be a draft? It looks like you all still need a fair bit of work before merging.

I mean not really anymore, at the time I pull requested it, it was ready. Now it's just minor changes

- framebuffers - bug fixes - better canvas quality

SharkPool-SP · 2026-02-01T08:37:30Z

!format

SharkPool-SP · 2026-02-01T08:39:23Z

Okay I fixed all the issues and more

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

SharkPool-SP requested a review from Brackets-Coder January 22, 2026 19:41

Brackets-Coder requested changes Jan 23, 2026

View reviewed changes

bug fixes

14512a7

SharkPool-SP requested a review from Brackets-Coder January 25, 2026 08:22

Brackets-Coder reviewed Jan 25, 2026

View reviewed changes

Brackets-Coder approved these changes Jan 25, 2026

View reviewed changes

GarboMuffin requested changes Jan 25, 2026

View reviewed changes

SharkPool-SP added 3 commits February 1, 2026 00:34

Particle Engine 2.0.5

a26c56d

- framebuffers - bug fixes - better canvas quality

Update Particle-Engine.md

bc024b3

unused variable

3bcaad1

SharkPool-SP requested a review from GarboMuffin February 1, 2026 08:37

[Automated] Format code

d1baaa5

GarboMuffin mentioned this pull request Feb 1, 2026

Provide a long-term policy for LLM usage #2260

Closed

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!

SharkPool-SP commented Jan 20, 2026

Uh oh!

Brackets-Coder commented Jan 21, 2026

Uh oh!

Brackets-Coder commented Jan 21, 2026

Uh oh!

SharkPool-SP commented Jan 21, 2026

Uh oh!

Brackets-Coder left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SharkPool-SP commented Jan 25, 2026

Uh oh!

Brackets-Coder left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SharkPool-SP commented Jan 25, 2026

Uh oh!

Brackets-Coder commented Jan 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

PPPDUD commented Jan 25, 2026

Uh oh!

Brackets-Coder left a comment

Choose a reason for hiding this comment

Uh oh!

Brackets-Coder commented Jan 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

GarboMuffin left a comment

Choose a reason for hiding this comment

Uh oh!

GarboMuffin commented Jan 25, 2026

Uh oh!

Brackets-Coder commented Jan 25, 2026

Uh oh!

GarboMuffin commented Jan 25, 2026

Uh oh!

PPPDUD commented Jan 26, 2026

Uh oh!

SharkPool-SP commented Jan 26, 2026

Uh oh!

SharkPool-SP commented Jan 26, 2026

Uh oh!

SharkPool-SP commented Feb 1, 2026

SharkPool-SP commented Oct 15, 2024 •

edited

Loading

hammouda101010 commented Oct 15, 2024 •

edited

Loading

Brackets-Coder commented Oct 15, 2024 •

edited

Loading

Brackets-Coder left a comment •

edited

Loading

Brackets-Coder left a comment •

edited

Loading

Brackets-Coder commented Jan 25, 2026 •

edited

Loading

Brackets-Coder commented Jan 25, 2026 •

edited

Loading