Hash Simplex Noise Movement

Demonstrates how to use Hash Simplex noise to generate organic, fluid motion and rotation for a sprite, creating a natural wind-blown effect.

Hash Simplex Noise Movement, running
1280 × 720
GitHub
class Example extends Phaser.Scene
{
    config = {
        noiseCells: [ 16 / 2, 9 / 2 ],
        noiseIterations: 3,
        noiseWarpAmount: 0.5,
        noiseColorStart: 0x88aaff,
        noiseColorEnd: 0x4466aa,
    };
    leaf;
    noise;

    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('leaf', 'assets/particles/leaf2.png');
    }

    create()
    {
        const { width, height } = this.scale;

        this.noise = this.add.noisesimplex2d(this.config, width / 2, height / 2, width, height);

        this.leaf = this.add.image(640, 200, 'leaf');

        this.leaf.enableFilters().filters.internal.addGlow(0x88aaff);
    }

    update (time, delta)
    {
        const { width, height } = this.scale;

        this.noise.noiseFlow = time / 500;
        this.config.noiseFlow = this.noise.noiseFlow;

        const contourX = Phaser.Math.HashSimplex([this.leaf.x / width, this.leaf.y / height], config);
        const contourY = Phaser.Math.HashSimplex([this.leaf.x / width, this.leaf.y / height], { ...config, noiseSeed: [ 3, 4 ] }) + 1;

        this.leaf.x += contourX * delta / 64;
        this.leaf.y += contourY * delta / 64;

        const angle = Phaser.Math.Angle.GetShortestDistance(this.leaf.rotation, Math.atan2(contourY, contourX));

        this.leaf.rotation += angle * 0.03;

        if (this.leaf.x < -100 || this.leaf.x > 1500) {
            this.leaf.x = 640;
            this.leaf.y = -100;
        }

        if (this.leaf.y > 900) { this.leaf.y = -100; }
        if (this.leaf.y < -300) { this.leaf.y = -100; }
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.WEBGL,
    parent: 'game-container',
    width: 1280,
    height: 720,
    scene: Example
};

const game = new Phaser.Game(config);

More in Hash Simplex3 examples