NoiseCell4D

A NoiseCell4D Game Object.

This game object is a quad which displays cellular 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 NoiseCell4D is a Phaser.GameObjects.Shader using a specific shader program.

Cellular noise, also called Worley Noise or Voronoi Noise, consists of a pattern of cells. This is good for modeling natural phenomena like waves, clouds, or scales.

You can set the color and transparency, cell count, variation, and seed value of the noise. You can change the detail level by increasing noiseIterations. You can change the noise mode to output sharp edges, soft edges, or flat colors for the cells.

You can scroll the noise by animating the noiseOffset property.

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

The 4D version of NoiseCell has two extra dimensions: Z and W. The shader only renders the XY slice through the noise field. Because the centers of cells typically lie elsewhere in the hypervolume, cells appear with variation in brightness. You can scroll on the Z axis to shift the slice, smoothly changing the cell pattern. In 4D, you can instead move the ZW offset in a circle, creating a constantly changing pattern which repeats without reversing or resetting. This ZW circling technique is advised for long-term effects, because it avoids large offsets which can cause floating-point precision issues.

Constructor

new NoiseCell4D(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.NoiseCell4D.NoiseCell4DQuadConfig	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/noisecell4d/NoiseCell4D.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

keepAwake

keepAwake: boolean

Description:

Whether to jitter shader inputs to force continuous high precision. This is an advanced setting.

Chromium browsers seem to switch between WebGL rendering modes, which changes the precision available to the noise shader. This can change the noise calculation, causing parts of the output to flicker unpredictably. The keepAwake setting adds an imperceptible amount to the offset during rendering, which seems to force Chromium to be consistent and eliminate the flickering.

Don't disable this unless you know what you're doing. It prevents an unpredictable problem that might not appear in your browser or device, but will appear for other users.

Source: src/gameobjects/noise/noisecell4d/NoiseCell4D.js#L369
Since: 4.0.0

---

noiseCells

noiseCells: Array.<number>

Description:

The number of cells in each dimension.

This must be an array of 4 numbers.

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

Source: src/gameobjects/noise/noisecell4d/NoiseCell4D.js#L104
Since: 4.0.0

---

noiseColorEnd

noiseColorEnd: Phaser.Display.Color

Description:

The color of the edge of the cells.

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

Source: src/gameobjects/noise/noisecell4d/NoiseCell4D.js#L329
Since: 4.0.0

---

noiseColorStart

noiseColorStart: Phaser.Display.Color

Description:

The color of the middle of the cells.

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

Source: src/gameobjects/noise/noisecell4d/NoiseCell4D.js#L318
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.

Each octave of noise has twice the resolution, and contributes half as much to the output.

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!

Source: src/gameobjects/noise/noisecell4d/NoiseCell4D.js#L220
Since: 4.0.0

---

noiseMode

noiseMode: number

Description:

What mode to output the noise in.

• 0: Sharp boundaries between cells.

• 1: Index mode. Cells have a single flat color.

  It is random and may not be unique.

• 2: Smooth boundaries between cells.

  Use noiseSmoothing to control smoothness.

Source: src/gameobjects/noise/noisecell4d/NoiseCell4D.js#L242
Since: 4.0.0

---

noiseNormalMap

noiseNormalMap: boolean

Description:

Whether to convert the noise output to a normal map.

This works properly with noise modes 0 and 2, which form curves.

Control the curvature strength with noiseNormalScale.

Source: src/gameobjects/noise/noisecell4d/NoiseCell4D.js#L282
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. Noise with more iterations tends to change more rapidly, thus have more pronounced normals.

Source: src/gameobjects/noise/noisecell4d/NoiseCell4D.js#L296
Since: 4.0.0

---

noiseOffset

noiseOffset: Array.<number>

Description:

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

This must be an array of 4 numbers.

Moving too far from 0 will introduce floating-point precision issues. This can cause the noise to appear blocky. We start to see obvious blockiness at offsets of a few thousand, so stay below that.

You can evolve the noise pattern by scrolling the Z axis. However, this will eventually meet those floating-point precision issues.

In four dimensions, you can instead evolve the noise pattern by moving along a circle in the ZW plane. This changes the pattern smoothly, without leaving the safe region, and without needing to stop and reverse or reset. 4D noise is very useful for continuously scrolling patterns.

Source: src/gameobjects/noise/noisecell4d/NoiseCell4D.js#L158
Since: 4.0.0

---

noiseSeed

noiseSeed: Array.<number>

Description:

Seed values for the noise. Vary these to change the shape of cells in the pattern. A different seed creates a completely different pattern.

This must be an array of 16 numbers.

Noise seed values should be fairly small. Numbers between 0 and 1, or 0 and 16, are recommended. Very large seed values may lose floating-point precision and cause the noise to appear blocky.

Source: src/gameobjects/noise/noisecell4d/NoiseCell4D.js#L345
Since: 4.0.0

---

noiseSmoothing

noiseSmoothing: number

Description:

How much smoothing to apply in smoothing mode.

The default value is 1, which applies moderate smoothing between cells. The value is a factor. Values from 0-1 reduce the smoothing. Values above 1 intensify the smoothing. Intensification slows above 4 or so.

Source: src/gameobjects/noise/noisecell4d/NoiseCell4D.js#L262
Since: 4.0.0

---

noiseVariation

noiseVariation: Array.<number>

Description:

How much each cell can vary from its grid position. High values break further from the grid.

At 0, cells are perfectly square. At 1, cells are fully chaotic. Never go higher than 1, as this can distort the cell matrix so much that the nearest cell is outside the sampling range, causing seams in the noise.

Source: src/gameobjects/noise/noisecell4d/NoiseCell4D.js#L199
Since: 4.0.0

---

noiseWrap

noiseWrap: Array.<number>

Description:

How many cells wide the pattern is.

By default, this is set to the same dimensions as noiseCells. This causes the output to wrap seamlessly at the edges. To restore wrapping if you changed settings, call this.wrapNoise().

A lower value causes the output to repeat.

A higher value breaks visible wrapping. The cell pattern still repeats off-camera. Try to keep this value as low as possible, as it helps avoid floating-point precision errors.

This must be an array of 4 numbers.

Source: src/gameobjects/noise/noisecell4d/NoiseCell4D.js#L126
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.NoiseCell4D - This game object.

Source: src/gameobjects/noise/noisecell4d/NoiseCell4D.js#L459
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.NoiseCell4D - This game object.

Source: src/gameobjects/noise/noisecell4d/NoiseCell4D.js#L393
Since: 4.0.0

---

wrapNoise

<instance> wrapNoise()

Description:

Set the noise texture to wrap seamlessly.

This sets noiseWrap to equal noiseCells in all dimensions.

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

Source: src/gameobjects/noise/noisecell4d/NoiseCell4D.js#L476
Since: 4.0.0

---