Simplex Noise Warp Iterations 2D

Compare 2D Simplex noise textures across multiple warp iterations, demonstrating how increasing iterations adds complexity and visual detail to the noise pattern.

Simplex Noise Warp Iterations 2D, running
1280 × 720
GitHub
class Example extends Phaser.Scene
{
    create()
    {
        const { width, height } = this.scale;

        this.add.noisesimplex2d({
            noiseCells: [ 4, 9 ],
            noiseWarpAmount: 0.5
        }, width * 1 / 8, height / 2, width / 4, height);
        this.add.noisesimplex2d({
            noiseCells: [ 4, 9 ],
            noiseWarpAmount: 0.5,
            noiseWarpIterations: 2
        }, width * 3 / 8, height / 2, width / 4, height);
        this.add.noisesimplex2d({
            noiseCells: [ 4, 9 ],
            noiseWarpAmount: 0.5,
            noiseWarpIterations: 3
        }, width * 5 / 8, height / 2, width / 4, height);
        this.add.noisesimplex2d({
            noiseCells: [ 4, 9 ],
            noiseWarpAmount: 0.5,
            noiseWarpIterations: 4
        }, width * 7 / 8, height / 2, width / 4, height);

        this.add.text(10, 10, '1 warp iteration', { fontSize: 24 }).setStroke('#ff8844', 2).setShadow(2, 2, '#333333', 2, true, false);
        this.add.text(width / 4 + 10, 10, '2 warp iterations', { fontSize: 24 }).setStroke('#ff8844', 2).setShadow(2, 2, '#333333', 2, true, false);
        this.add.text(width / 2 + 10, 10, '3 warp iterations', { fontSize: 24 }).setStroke('#ff8844', 2).setShadow(2, 2, '#333333', 2, true, false);
        this.add.text(width * 3 / 4 + 10, 10, '4 warp iterations', { fontSize: 24 }).setStroke('#ff8844', 2).setShadow(2, 2, '#333333', 2, true, false);
    }
}

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 Noise33 examples