NoiseSimplex2D

A NoiseSimplex2D object.

This game object is a quad which displays simplex noise. You can manipulate this object like any other, make it interactive, and use it in filters and masks to create visually stunning effects.

Behind the scenes, a NoiseSimplex2D is a {@see Phaser.GameObjects.Shader} using a specific shader program.

Simplex noise is a smooth pattern ideal for soft, natural phenomena. It is useful for clouds, flame, water, and many other effects. Ken Perlin, the creator of Perlin Noise, created Simplex Noise to improve performance and quality over the original.

By default, the noise pattern is periodic: it repeats. You can scroll in X and Y. You can also change the noiseFlow value to evolve the pattern along a periodic course.

You can set the cell count, color and transparency of the pattern. You can add fine detail with noiseIterations. You can add turbulence with noiseWarpAmount.

You can change the basic pattern with noiseSeed. Different seeds create completely different patterns.

You can set noiseNormalMap to output a normal map. This is a quick way to add texture for lighting.

For advanced users, you can configure the characteristics of octave iteration. Use noiseDetailPower, noiseFlowPower, and noiseContributionPower to adjust the exponential scaling rate of these values. Use noiseWarpDetailPower, noiseWarpFlowPower, and noiseWarpContributionPower to do the same for the warp effect.

Constructor

new NoiseSimplex2D(scene, [config], [x], [y], [width], [height])

Parameters

name	type	optional	default	description
scene	Phaser.Scene	No		The Scene to which this Game Object belongs.
config	Phaser.Types.GameObjects.NoiseSimplex2D.NoiseSimplex2DQuadConfig	Yes		The configuration for this Game Object.
x	number	Yes	0	The horizontal position of this Game Object in the world.
y	number	Yes	0	The vertical position of this Game Object in the world.
width	number	Yes	128	The width of the Game Object.
height	number	Yes	128	The height of the Game Object.

---

Scope: static

Extends

Phaser.GameObjects.Shader

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L12
Since: 4.0.0

Inherited Members

From Phaser.GameObjects.Components.BlendMode:

• blendMode

From Phaser.GameObjects.Components.ComputedSize:

• displayHeight
• displayWidth
• height
• width

From Phaser.GameObjects.Components.Depth:

• depth

From Phaser.GameObjects.Components.Filters:

• filterCamera
• filters
• filtersAutoFocus
• filtersFocusContext
• filtersForceComposite
• maxFilterSize
• renderFilters

From Phaser.GameObjects.Components.Origin:

• displayOriginX
• displayOriginY
• originX
• originY

From Phaser.GameObjects.Components.ScrollFactor:

• scrollFactorX
• scrollFactorY

From Phaser.GameObjects.Components.Transform:

• angle
• hasTransformComponent
• rotation
• scale
• scaleX
• scaleY
• w
• x
• y
• z

From Phaser.GameObjects.Components.Visible:

• visible

From Phaser.GameObjects.GameObject:

• active
• body
• cameraFilter
• data
• displayList
• ignoreDestroy
• input
• isDestroyed
• name
• parentContainer
• renderFlags
• scene
• state
• tabIndex
• type
• vertexRoundMode

From Phaser.GameObjects.Shader:

• drawingContext
• glTexture
• renderNode
• renderToTexture
• texture
• textureCoordinateBottomLeft
• textureCoordinateBottomRight
• textureCoordinateTopLeft
• textureCoordinateTopRight
• textures

---

Public Members

noiseCells

noiseCells: Array.<number>

Description:

The number of cells in each dimension.

This must be an array of 2 numbers.

Try to keep the cell count between 2 and about an eighth of the resolution of the texture. A cell count greater than the resolution of the texture will essentially be expensive white noise.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L97
Since: 4.0.0

---

noiseColorEnd

noiseColorEnd: Phaser.Display.Color

Description:

The color when the adjusted noise value is 1. This blends with noiseColorStart.

The default is white. You can set any color, and change the alpha.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L395
Since: 4.0.0

---

noiseColorStart

noiseColorStart: Phaser.Display.Color

Description:

The color when the adjusted noise value is 0. This blends with noiseColorEnd.

The default is black. You can set any color, and change the alpha.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L383
Since: 4.0.0

---

noiseContributionPower

noiseContributionPower: number

Description:

How much value to take from subsequent noise octaves.

This is used as the base of an exponent. The default 2 halves the contribution every octave. Lower values decay slower, prioritize high frequency detail. Higher values decay faster, prioritize low frequency detail.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L249
Since: 4.0.0

---

noiseDetailPower

noiseDetailPower: number

Description:

How much to increase detail frequency between noise octaves.

This is used as the base of an exponent. The default 2 doubles the frequency every octave. Lower values scale slower. Higher values scale higher.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L219
Since: 4.0.0

---

noiseFlow

noiseFlow: number

Description:

The current flow of the noise field. The pattern changes in place with flow. This is a rotation, so the pattern returns to its original state after flow increases by PI * 2.

Use flow to evolve the pattern over time with periodic repeats.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L157
Since: 4.0.0

---

noiseFlowPower

noiseFlowPower: number

Description:

How much to increase flow progression between noise octaves.

This is used as the base of an exponent. The default 2 doubles the flow progression every octave. Lower values scale slower. Higher values scale higher.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L234
Since: 4.0.0

---

noiseIterations

noiseIterations: number

Description:

How many octaves of noise to apply. This adds fine detail to the noise, at the cost of performance.

This value should be an integer of 1 or higher. Values above 5 or so have increasingly little effect. Each iteration has a cost, so only use as much as you need!

Use noiseDetailPower, noiseFlowPower and noiseContributionPower to configure differences between octaves.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L186
Since: 4.0.0

---

noiseNormalMap

noiseNormalMap: boolean

Description:

Whether to convert the noise output to a normal map.

Control the curvature strength with noiseNormalScale.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L312
Since: 4.0.0

---

noiseNormalScale

noiseNormalScale: number

Description:

Curvature strength of normal map output. This is used when noiseNormalMap is enabled.

The default is 1. Higher values produce more curvature; lower values are flatter.

Surface angle is determined by the rate of change of the noise.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L324
Since: 4.0.0

---

noiseOffset

noiseOffset: Array.<number>

Description:

The offset of the noise in each dimension: [ x, y ]. Animate x and y to scroll the noise pattern.

This must be an array of 2 numbers.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L135
Since: 4.0.0

---

noisePeriod

noisePeriod: Array.<number>

Description:

The number of cells before the pattern wraps.

This must be an array of 2 numbers.

By default, this is the same as noiseCells.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L114
Since: 4.0.0

---

noiseSeed

noiseSeed: Array.<number>

Description:

The seed for the noise.

This offsets the simplex grid, causing its hashes to evaluate differently. Any change to the seed results in a new pattern. It must be an array of 2 numbers.

Use a custom seed to create different, but reproducible, randomness.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L412
Since: 4.0.0

---

noiseValueAdd

noiseValueAdd: number

Description:

Value added to the raw noise output.

Raw noise is emitted in the range -1 to 1. It is adjusted by (rawNoise * noiseValueFactor + noiseValueAdd) ^ noiseValuePower.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L357
Since: 4.0.0

---

noiseValueFactor

noiseValueFactor: number

Description:

Factor applied to the raw noise output.

Raw noise is emitted in the range -1 to 1. It is adjusted by (rawNoise * noiseValueFactor + noiseValueAdd) ^ noiseValuePower.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L344
Since: 4.0.0

---

noiseValuePower

noiseValuePower: number

Description:

Exponent applied to the raw noise output.

Raw noise is emitted in the range -1 to 1. It is adjusted by (rawNoise * noiseValueFactor + noiseValueAdd) ^ noiseValuePower.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L370
Since: 4.0.0

---

noiseWarpAmount

noiseWarpAmount: number

Description:

How much to warp the noise texture. Warp can add a sense of turbulence to the output.

This runs several octaves of noise to generate a random warp offset. It adds to the expense of the shader.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L172
Since: 4.0.0

---

noiseWarpContributionPower

noiseWarpContributionPower: number

Description:

How much value to take from subsequent noise octaves in the warp.

This is used as the base of an exponent. The default 2 halves the contribution every octave. Lower values decay slower, prioritize high frequency detail. Higher values decay faster, prioritize low frequency detail.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L296
Since: 4.0.0

---

noiseWarpDetailPower

noiseWarpDetailPower: number

Description:

How much to increase detail frequency between noise octaves in the warp.

This is used as the base of an exponent. The default 2 doubles the frequency every octave. Lower values scale slower. Higher values scale higher.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L264
Since: 4.0.0

---

noiseWarpFlowPower

noiseWarpFlowPower: number

Description:

How much to increase flow progression between noise octaves in the warp.

This is used as the base of an exponent. The default 2 doubles the flow progression every octave. Lower values scale slower. Higher values scale higher.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L280
Since: 4.0.0

---

noiseWarpIterations

noiseWarpIterations: number

Description:

How many octaves of noise to apply when warping the noise.

This behaves much like noiseIterations, but is used in the warp calculations instead. It is only used when noiseWarpAmount is not 0. You may need fewer warp iterations than regular iterations.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L204
Since: 4.0.0

---

Inherited Methods

From Phaser.Events.EventEmitter:

• addListener
• emit
• eventNames
• listenerCount
• listeners
• off
• on
• once
• removeAllListeners
• removeListener
• shutdown

From Phaser.GameObjects.Components.BlendMode:

• setBlendMode

From Phaser.GameObjects.Components.ComputedSize:

• setDisplaySize
• setSize

From Phaser.GameObjects.Components.Depth:

• setAbove
• setBelow
• setDepth
• setToBack
• setToTop

From Phaser.GameObjects.Components.Filters:

• enableFilters
• focusFilters
• focusFiltersOnCamera
• focusFiltersOverride
• renderWebGLFilters
• setFiltersAutoFocus
• setFiltersFocusContext
• setFiltersForceComposite
• setFilterSize
• setRenderFilters
• willRenderFilters

From Phaser.GameObjects.Components.GetBounds:

• getBottomCenter
• getBottomLeft
• getBottomRight
• getBounds
• getCenter
• getLeftCenter
• getRightCenter
• getTopCenter
• getTopLeft
• getTopRight

From Phaser.GameObjects.Components.Origin:

• setDisplayOrigin
• setOrigin
• setOriginFromFrame
• updateDisplayOrigin

From Phaser.GameObjects.Components.RenderSteps:

• addRenderStep
• renderWebGLStep

From Phaser.GameObjects.Components.ScrollFactor:

• setScrollFactor

From Phaser.GameObjects.Components.Transform:

• copyPosition
• getLocalPoint
• getLocalTransformMatrix
• getParentRotation
• getWorldPoint
• getWorldTransformMatrix
• setAngle
• setPosition
• setRandomPosition
• setRotation
• setScale
• setW
• setX
• setY
• setZ

From Phaser.GameObjects.Components.Visible:

• setVisible

From Phaser.GameObjects.GameObject:

• addedToScene
• addToDisplayList
• addToUpdateList
• destroy
• disableInteractive
• getData
• getDisplayList
• getIndexList
• incData
• removedFromScene
• removeFromDisplayList
• removeFromUpdateList
• removeInteractive
• setActive
• setData
• setDataEnabled
• setInteractive
• setName
• setState
• setVertexRoundMode
• toggleData
• toJSON
• update
• willRender
• willRoundVertices

From Phaser.GameObjects.Shader:

• getUniform
• preDestroy
• renderImmediate
• setRenderToTexture
• setTextureCoordinates
• setTextureCoordinatesFromFrame
• setTextures
• setUniform
• setupUniforms

---

Public Methods

randomizeNoiseSeed

<instance> randomizeNoiseSeed()

Description:

Randomize the noise seed, creating a unique pattern.

Returns: Phaser.GameObjects.NoiseSimplex2D - This game object.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L496
Since: 4.0.0

---

setNoiseColor

<instance> setNoiseColor([start], [end])

Description:

Set the colors of the noise, from a variety of color formats.

• A number is expected to be a 24 or 32 bit RGB or ARGB value.

• A string is expected to be a hex code.

• An array of numbers is expected to be RGB or RGBA in the range 0-1.

• A Color object can be used.

Parameters:

name	type	optional	default	description
start	number | string	Array.<number>	Phaser.Display.Color	Yes
end	number | string	Array.<number>	Phaser.Display.Color	Yes

Returns: Phaser.GameObjects.NoiseSimplex2D - This game object.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L430
Since: 4.0.0

---

wrapNoise

<instance> wrapNoise()

Description:

Set the noise texture to wrap seamlessly.

This sets noisePeriod to equal noiseCells in all dimensions.

Returns: Phaser.GameObjects.NoiseSimplex2D - This game object.

Source: src/gameobjects/noise/noisesimplex2d/NoiseSimplex2D.js#L513
Since: 4.0.0

---