Feature Request: Expose prop to adjust particle rotation

[nicksiscoe]

I'd like to be able to turn down the degree by which particles rotate and the speed by which they rotate. I'm imagining two properties:

particleRotationDegrees: number between 0 and 360 ?
particleRotationSpeed: number multiplier between 0 and 1 ?

Totally open to suggestions on implementation :)

[Chetan2708]

What do you mean ? can you please elaborate

[lenargum]

i would also like to be able to disable 3d rotation of the particles to use it as simple particle emitter

[C4RC0]

This is an example of how to reset the rotations of react-confetti using inverse transformations and then apply a custom rotation.

function drawSnowflake(ctx) {

    //reverse internal transformations
    ctx.rotate(-this.angle);
    ctx.scale(1, 1 / this.rotateY);
    ctx.rotate(-this.angle);

    //set up custom transformations
    const t = this;

    const scale = 0.2
    const maxSize = 10
    const scaledMaxSize = maxSize * scale

    if (!this.userData) {
        this.userData = {

            //for custom transformations
            rotateY: t.rotateY,
            angle: t.angle,
            rotationDirection: t.rotationDirection,

            //for snowflake
            opacity: getRandomInt(0, 10) / 10,
            maxBranchRadius: getRandomInt(1, maxSize) * scale,

        }
    }

    if(this.userData.rotateY >= 1 && this.userData.rotationDirection === 1) {
        this.userData.rotationDirection = -1
    } else if(this.userData.rotateY <= -1 && this.userData.rotationDirection === -1) {
        this.userData.rotationDirection = 1
    }

    const rotateDelta = 0.01 * this.userData.rotationDirection

    this.userData.rotateY += rotateDelta
    this.userData.angle += this.angularSpin / 40

    ctx.rotate(this.userData.angle)
    ctx.scale(1, this.userData.rotateY)
    ctx.rotate(this.userData.angle)

    //snowflake

    const numPoints = 6;
    const numCirclesPerBranch = 2;

    const maxBranchRadius = this.userData.maxBranchRadius;
    const circleSizeStep = maxBranchRadius / (numCirclesPerBranch * 2);

    ctx.globalAlpha = Math.min(0.7, Math.max(0.1, this.userData.opacity + (maxBranchRadius - scaledMaxSize)))

    for (let i = 0; i < numPoints; i++) {

        const angle = (i * Math.PI * 2) / numPoints;
        const startX = 0;
        const startY = 0;
        const endX = Math.cos(angle) * maxBranchRadius;
        const endY = Math.sin(angle) * maxBranchRadius;

        ctx.beginPath();
        ctx.moveTo(startX, startY);
        ctx.lineTo(endX, endY);
        ctx.stroke();
        ctx.closePath();

        for (let j = 1; j <= numCirclesPerBranch; j++) {
            const radius = j * circleSizeStep;
            const circleX = Math.cos(angle) * (radius * 2);
            const circleY = Math.sin(angle) * (radius * 2);

            ctx.beginPath();
            ctx.arc(circleX, circleY, radius / 4, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.closePath();
        }

    }

    ctx.restore()
    ctx.globalAlpha = 1
}

[alampros]

@C4RC0 thanks for the impressive solution!

I think it might be worth it to just parameterize the particle rotation. I'd definitely take a PR if anyone is interested.

[librarykrystal]

I'm making some really fun custom shape options and would love to see this feature!