Class: MandelbrotRenderer

MandelbrotRenderer()

MandelbrotRenderer (Rebased Perturbation)

Constructor

new MandelbrotRenderer()

This module defines a MandelbrotRenderer class that inherits from fractalRenderer, implements the shader fragment code for the Mandelbrot set fractal and sets preset zoom-ins.
Author:
  • Radim Brnka
Copyright:
  • Synaptory Fractal Traveler, 2025-2026
License:
  • MIT
Source:

Extends

Members

DEFAULT_PAN :COMPLEX

Type:
  • COMPLEX
Overrides:
Source:

MAX_ITER

IMPORTANT: MAX_ITER must remain constant after shader compilation + orbit buffer allocation.
Source:

PALETTES :Array.<PALETTE>

Palettes loaded from JSON (empty = random only)
Type:
  • Array.<PALETTE>
Source:

PRESETS

Mandelbrot-specific presets
Overrides:
Source:

_colorAnimationResolve

Resolve callback for pending color animation (to handle interruption)
Overrides:
Source:

adaptiveQualityEnabled

Runtime toggle for adaptive quality (initialized from constant)
Overrides:
Source:

adaptiveQualityLastAdjustment

Timestamp of last adaptive quality adjustment
Overrides:
Source:

adaptiveQualityMin

Runtime adjustable min iterations offset (initialized from constant)
Overrides:
Source:

colorPalette :PALETTE

Type:
  • PALETTE
Overrides:
Source:

iterations :number

Type:
  • number
Overrides:
Source:

pan :COMPLEX

Type:
  • COMPLEX
Overrides:
Source:

panDD

DD accumulator mirrors into this.pan
Overrides:
Source:

rotation :number

Rotation in rad
Type:
  • number
Overrides:
Source:

vertexShaderSource

Vertex shader
Overrides:
Source:

zoom :number

Type:
  • number
Overrides:
Source:

Methods

addPan(dx, dy) → {void}

Adjusts the pan values by adding the specified deltas to the current pan values.
Parameters:
Name Type Description
dx number The change in the x-direction to be added to the pan.
dy number The change in the y-direction to be added to the pan.
Overrides:
Source:
Returns:
Type
void

adjustAdaptiveQuality()

Adjusts extraIterations based on GPU performance metrics. Called after each frame when adaptive quality is enabled.
Overrides:
Source:

adjustAdaptiveQualityMin(delta)

Adjusts the minimum iterations offset for adaptive quality.
Parameters:
Name Type Description
delta number Amount to change (positive = less aggressive, negative = more aggressive)
Overrides:
Source:

adjustExtraIterations(delta)

Directly adjusts extraIterations for manual quality control. Useful for finding the right adaptiveQualityMin limit or boosting quality.
Parameters:
Name Type Description
delta number Amount to change (positive = more iterations, negative = fewer)
Overrides:
Source:

(async) animateColorPaletteTransition(newPalette, duration, coloringCallback)

Animates transition to a new palette (theme, frequency, phase). Accepts either: - Object: {theme: [...], frequency: [...], phase: [...]} - Array (legacy): [r, g, b] - uses current frequency/phase - null: generates random palette
Parameters:
Name Type Default Description
newPalette Object | Array.<number> | null
duration number 250
coloringCallback function | null null
Overrides:
Source:

(async) animateDemo(random, coloringCallbackopt, onPresetCompleteopt, userPresetsopt) → {Promise.<void>}

Animates infinite demo loop of traveling to the presets
Parameters:
Name Type Attributes Default Description
random boolean true Determines whether presets are looped in order from 1-9 or ordered randomly
coloringCallback function <optional>
 null Optional callback for UI color updates
onPresetComplete function <optional>
 null Optional callback when each preset completes
userPresets Array.<PRESET> <optional>
 Optional array of user-saved presets to include in the demo
Source:
Returns:
Type
Promise.<void>

(async) animateFullColorSpaceCycle(durationopt, coloringCallbackopt) → {Promise.<void>}

Animates fractalApp.colorPalette by cycling through the entire color space. The palette will continuously change hue from 0 to 360 degrees and starts from the current palette
Parameters:
Name Type Attributes Default Description
duration number <optional>
 15000 Duration (in milliseconds) for one full color cycle.
coloringCallback function <optional>
 null
Overrides:
Source:
Returns:
Type
Promise.<void>

(async) animatePaletteByIdTransition(preset, duration, coloringCallback) → {Promise.<void>}

Transitions between palettes by their unique identifiers, animating the change over the specified duration.
Parameters:
Name Type Description
preset PRESET The configuration object containing the palette definition.
Properties
Name Type Description
paletteId string The unique identifier for the target palette.
duration number The duration of the animation in milliseconds.
coloringCallback function
Overrides:
Source:
Returns:
Resolves once the palette transition animation is complete.
Type
Promise.<void>

(async) animatePanAndZoomTo(targetPan, targetZoom, durationopt, easeFunction) → {Promise.<void>}

Animates pan and zoom simultaneously.
Parameters:
Name Type Attributes Default Description
targetPan COMPLEX
targetZoom number
duration number <optional>
 1000 in milliseconds
easeFunction EASE_TYPE | function
Overrides:
Source:
Returns:
Type
Promise.<void>

(async) animatePanBy(deltaPan, durationopt, easeFunction) → {Promise}

Animates pan by a delta (DD-stable). Unlike animatePanTo, this avoids computing targetPan = startPan + delta in a single float64 operation (which breaks in deep zoom). This method applies incremental DD pan updates based on animation progress.
Parameters:
Name Type Attributes Default Description
deltaPan COMPLEX
duration <optional>
 200 in ms
easeFunction EASE_TYPE | function
Overrides:
Source:
Returns:
Type
Promise

(async) animatePanByAndZoomTo(deltaPan, targetZoom, durationopt, easeFunction) → {Promise.<void>}

Animates pan by delta and zoom simultaneously. Uses addPan() internally to preserve DD precision at deep zoom levels.
Parameters:
Name Type Attributes Default Description
deltaPan COMPLEX offset to add to current pan
targetZoom number
duration number <optional>
 1000 in milliseconds
easeFunction EASE_TYPE | function
Overrides:
Source:
Returns:
Type
Promise.<void>

(async) animatePanThenZoomTo(targetPan, targetZoom, panDuration, zoomDuration, easeFunction) → {Promise.<void>}

Animates sequential pan and then zooms into the target location.
Parameters:
Name Type Description
targetPan COMPLEX
targetZoom number
panDuration number in milliseconds
zoomDuration number in milliseconds
easeFunction EASE_TYPE | function
Overrides:
Source:
Returns:
Type
Promise.<void>

(async) animatePanTo(targetPan, durationopt, easeFunction) → {Promise.<void>}

Animates pan from current position to the new one
Parameters:
Name Type Attributes Default Description
targetPan COMPLEX
duration <optional>
 200 in ms
easeFunction EASE_TYPE | function
Overrides:
Source:
Returns:
Type
Promise.<void>

(async) animateTravelToPreset(preset, zoomOutDurationopt, panDurationopt, zoomInDurationopt, coloringCallbackopt) → {Promise.<void>}

Animates travel to a preset. It first zooms out to the default zoom, then rotates, then animates pan and zoom-in. If any of the final params is the same as the target, it won't animate it.
Parameters:
Name Type Attributes Default Description
preset MANDELBROT_PRESET An instance-specific object to define exact spot in the fractal
zoomOutDuration number <optional>
 2000 Duration (ms) for zoom-out stage
panDuration number <optional>
 1000 Duration (ms) for pan stage
zoomInDuration number <optional>
 3500 Duration (ms) for zoom-in stage
coloringCallback function <optional>
 null Optional callback for UI color updates
Source:
Returns:
Type
Promise.<void>

(async) animateZoomTo(targetZoom, durationopt, easeFunction, anchorXopt, anchorYopt)

Animates zoom while keeping the fractal point under an anchor screen coordinate fixed.
Parameters:
Name Type Attributes Default Description
targetZoom number
duration number <optional>
 500
easeFunction EASE_TYPE | function
anchorX number | null <optional>
 null CSS px relative to canvas; defaults to canvas center
anchorY number | null <optional>
 null CSS px relative to canvas; defaults to canvas center
Overrides:
Source:

(async) animateZoomToNoPan(targetZoom, durationopt, easeFunctionopt) → {Promise.<void>}

Animates zoom from current value to target zoom without adjusting pan position. Unlike animateZoomTo, this method does not keep any anchor point fixed during zooming. The fractal will appear to zoom in/out from its current center position.
Parameters:
Name Type Attributes Default Description
targetZoom number The target zoom level to animate to
duration number <optional>
 500 Duration of the animation in milliseconds
easeFunction EASE_TYPE | function <optional>
 EASE_TYPE.NONE Easing function to apply; EASE_TYPE.NONE uses exponential interpolation
Overrides:
Source:
Returns:
Promise that resolves when the animation completes
Type
Promise.<void>

(async) applyPaletteByIndex(index, durationopt, coloringCallbackopt) → {Promise.<void>}

Applies a specific palette by index.
Parameters:
Name Type Attributes Default Description
index number Palette index (-1 for random)
duration number <optional>
 250 Transition duration in ms
coloringCallback function <optional>
 null Callback when done
Source:
Returns:
Type
Promise.<void>

compileShader(source, type) → {WebGLShader|null}

Compiles shader code
Parameters:
Name Type Description
source string
type GLenum
Overrides:
Source:
Returns:
Type
WebGLShader | null

(abstract) createFragmentShaderSource() → {string}

Defines the shader code for rendering the fractal shape
Overrides:
Source:
Returns:
Type
string

destroy()

Destructor
Overrides:
Source:

draw()

Draws the fractal and sets basic uniforms. Subclasses can override draw() but must call super.draw() for viewport+common uniforms+draw call. Uses dirty checking to avoid redundant uniform uploads.
Overrides:
Source:

escapeItersDouble()

Reference picking + orbit build
Source:

generateRandomPalette() → {Object}

Generates a random palette with theme, frequency, and phase. Creates visually distinct palettes by varying all three parameters.
Source:
Returns:
Type
Object

getCanvasCssCenter() → {Array.<number>}

Compute CSS-space center of the canvas (for default anchored zoom).
Overrides:
Source:
Returns:
Type
Array.<number>

getPan() → {Array.<number>}

Overrides:
Source:
Returns:
the canonical array
Type
Array.<number>

initGLProgram()

Initializes WebGL program, shaders, quad, and uniform caches.
Overrides:
Source:

invalidateUniformCache()

Invalidates the uniform cache, forcing all uniforms to be re-uploaded on next draw(). Called after GL program creation/recreation.
Overrides:
Source:

markOrbitDirty()

Hook for perturbation renderers to request orbit rebuild. No-op by default.
Overrides:
Source:

(abstract) needsRebase()

kept for compatibility; perturbation renderers may ignore
Overrides:
Source:

noteInteraction(settleMs)

Marks the app as "in interaction" (drag/wheel/key-pan) and schedules a settle phase. Perturbation renderers can use this to defer expensive orbit rebuilds until the user stops moving.
Parameters:
Name Type Default Description
settleMs number 160
Overrides:
Source:

onAnimationFinished()

Default callback after every animation that requires on-screen info update
Overrides:
Source:

onProgramCreated()

Called by FractalRenderer.initGLProgram() after program creation + common uniform cache. Creates float texture, allocates orbit buffer, and binds texture unit.
Overrides:
Source:

pickReferenceNearViewCenter(useViewCenter)

Choose a good refPan near view center: - sample a grid around view center (radius scales with zoom) - pick the point with the highest escape iteration (prefer inside / late escape) - prefer keeping the current reference to avoid jitter unless a significantly better one is found
Parameters:
Name Type Default Description
useViewCenter boolean false If true, skip grid search and use view center directly (for stability during interaction)
Source:

reset()

Resets renderer to default state including frequency and phase.
Overrides:
Source:

screenToFractal(screenX, screenY) → {COMPLEX}

Screen point -> fractal coordinates (float64 JS side; fine for UI)
Parameters:
Name Type Description
screenX number
screenY number
Overrides:
Source:
Returns:
Type
COMPLEX

screenToPanDelta(screenX, screenY) → {COMPLEX}

Returns the pan delta needed to center on a screen point. This avoids precision loss at deep zoom by returning only the offset, which can be applied via addPan() to preserve DD precision.
Parameters:
Name Type Description
screenX number CSS px relative to canvas
screenY number CSS px relative to canvas
Overrides:
Source:
Returns:
[deltaX, deltaY] offset from current pan
Type
COMPLEX

screenToViewVector(screenX, screenY) → {Array.<number>}

Convert a screen point to the rotated, aspect-corrected "view vector" (no pan/zoom applied). This is exactly what your shader calls `rotated`.
Parameters:
Name Type Description
screenX number CSS pixels relative to canvas (like your handlers use)
screenY number CSS pixels relative to canvas
Overrides:
Source:
Returns:
view-space rotated vector
Type
Array.<number>

setPan(x, y) → {void}

Sets the pan values for the object.
Parameters:
Name Type Description
x number The horizontal pan value.
y number The vertical pan value.
Overrides:
Source:
Returns:
Type
void

setPanFromAnchor()

Set pan so that fractal point (fxAnchor,fyAnchor) remains under a screen point whose view vector is (vx,vy).
Overrides:
Source:

setZoomKeepingAnchor(targetZoom, anchorX, anchorY)

Sets zoom while keeping the fractal point under a given screen anchor fixed. Uses DD-preserving arithmetic to avoid precision loss at deep zoom.
Parameters:
Name Type Description
targetZoom number
anchorX number CSS px relative to canvas
anchorY number CSS px relative to canvas
Overrides:
Source:

(async) startPaletteCycling(transitionDurationopt, holdDurationopt, coloringCallbackopt, onPaletteCompleteopt) → {Promise.<void>}

Starts continuous sequential palette cycling. Smoothly transitions through all palettes in order, looping indefinitely.
Parameters:
Name Type Attributes Default Description
transitionDuration number <optional>
 2000 Duration for each palette transition in ms.
holdDuration number <optional>
 3000 Duration to hold each palette before transitioning.
coloringCallback function <optional>
 null Callback during transitions (called per frame).
onPaletteComplete function <optional>
 null Callback when each palette transition completes.
Overrides:
Source:
Returns:
Type
Promise.<void>

stopAllNonColorAnimations()

Stops all currently running animations that are not a color transition
Overrides:
Source:

stopCurrentColorAnimations()

Stops currently running color animation
Overrides:
Source:

stopCurrentPanAnimation()

Stops currently running pan animation
Overrides:
Source:

stopCurrentRotationAnimation()

Stops currently running rotation animation
Overrides:
Source:

stopCurrentZoomAnimation()

Stops currently running zoom animation
Overrides:
Source:

stopDemo()

Stops current demo and resets demo variables
Overrides:
Source:

toggleAdaptiveQuality()

Toggles adaptive quality on/off. When turning off, resets extraIterations to 0.
Overrides:
Source:

updateUniforms()

Cache common uniforms used by all renderers
Overrides:
Source: