Emitter not working as intended

Questions
1

I am trying to have an emitter trigger when the user clicks my logo. I currently have the emitter inside a click event, but since it is the last element to be added to the stage, it appears over the other elements (it should be behind them). Changing the ord() values does not seem to help.
I have also tried adding the emitter at the start of the code, before adding the other elements. In this case, it appears behind them but is triggered constantly. Please tell me what to change to get it working as intended.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM - Code Creativity</title>

<!-- zimjs.com - JavaScript Canvas Framework -->
<script type="module">

import zim from "https://zimjs.org/cdn/017/zim";

const assets = ["surf.png", "water.png", "logo.png"];
const path = "assets/";

new Frame(FIT, 1024, 768, light, dark, ready, assets, path);

function ready() {
    F.color = black;

    const logo = new Pic("logo.png").centerReg();
    const pulseCircle = new Pic("surf.png").centerReg().sca(0.5);

    logo.animate({
        props: { rotation: 360 },
        time: 12,
        loop: true,
        ease: "linear"
    });

    const colors = ["yellow", "hotpink", "pink", "orange", "grey", "black", "white", "aqua"];
    let i = 0;

    const backgroundRect = new Rectangle(W, H, "black").centerReg().ord(-5);

    logo.on("click", () => {
        if (i < colors.length) {
            backgroundRect.animate({
                props: { color: colors[i] },
                time: 1.5
            });
            i++;
        } else {
            backgroundRect.animate({
                props: { color: "burlywood" },
                time: 1.5
            });
            i = 0;
        }
    });

    pulseCircle.on("mouseover", () => {
        pulseCircle.wiggle("rotation", 0, 2, 10, 0.5, 1);
    });

    let meow = new Aud("meow.mp3");
    let splash = new Aud("splash.mp3");

    pulseCircle.on("click", () => {
        meow.play();
        pulseCircle.animate({
            props: { y: 350 },
            time: 0.1,
            rewind: true
        });
    });

    logo.on("click", () => {
        splash.play();
        pulseCircle.animate({
            props: { scale: 0.7, rotation: 360 },
            time: 0.5,
            rewind: true,
            ease: "elasticOut"
        });

        const emitter = new Emitter({
            obj: new Pic("water.png").scaleTo(S, 6),
            interval: 0.01,
            num: 10,
            life: 0.6,
            decayTime: 0.26,
            fade: true,
            shrink: true,
            force: { min: 2, max: 4 },
            angle: { min: 450, max: 900 }
        }).centerReg();

       

        timeout(1, () => {
            zog("works!");
            emitter.spurt(15, 0.2, true);
        });
    });
}

</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body></body>
</html>
2

Good questions - and welcome!

Your options are to add the Emitter() at the start and use the startPaused:true which we do quite often. Then when you want to run the emitter use emitter.spurt(10) or some number of particles. That way, you can make it once and spurt it whenever ;-).

Or the Emitter has a particles property that is actually where the particles are. So do not ord() the emitter, but rather then emitter.particles.ord() or .bot() or whetever.

3

Oh... and you are welcome to make yourself an avatar!