Class: FractalRenderer

(abstract) FractalRenderer(canvas)

FractalRenderer

Constructor

(abstract) new FractalRenderer(canvas)

This module defines a fractalRenderer abstract class that encapsulates the WebGL code, including shader compilation, drawing, reset, and screenToFractal conversion. It also includes common animation methods.
Parameters:
Name Type Description
canvas HTMLCanvasElement
Author:
  • Radim Brnka (c) 2025-2026
Copyright:
  • Synaptory Fractal Traveler, 2025-2026
License:
  • MIT
Source:

Members

DEFAULT_PAN :COMPLEX

Type:
  • COMPLEX
Source:

PRESETS :Array.<PRESET>

Interesting points / details / zooms / views
Type:
  • Array.<PRESET>
Source:

_colorAnimationResolve

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

adaptiveQualityEnabled

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

adaptiveQualityLastAdjustment

Timestamp of last adaptive quality adjustment
Source:

adaptiveQualityMin

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

colorPalette :PALETTE

Type:
  • PALETTE
Source:

iterations :number

Type:
  • number
Source:

pan :COMPLEX

Type:
  • COMPLEX
Source:

panDD

DD accumulator mirrors into this.pan
Source:

rotation :number

Rotation in rad
Type:
  • number
Source:

vertexShaderSource

Vertex shader
Source:

zoom :number

Type:
  • number
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.
Source:
Returns:
Type
void

adjustAdaptiveQuality()

Adjusts extraIterations based on GPU performance metrics. Called after each frame when adaptive quality is enabled.
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)
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)
Source:

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

Smoothly transitions fractalApp.colorPalette from its current value to the provided newPalette over the specified duration (in milliseconds).
Parameters:
Name Type Attributes Default Description
newPalette PALETTE The target palette as [r, g, b] (each in [0,1]).
duration number <optional>
 250 Duration of the transition in milliseconds.
coloringCallback function <optional>
 null A method called at every animation step
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
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
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
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
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
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
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
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
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
Source:
Returns:
Promise that resolves when the animation completes
Type
Promise.<void>

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

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

(abstract) createFragmentShaderSource() → {string}

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

destroy()

Destructor
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.
Source:

getCanvasCssCenter() → {Array.<number>}

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

getPan() → {Array.<number>}

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

initGLProgram()

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

invalidateUniformCache()

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

markOrbitDirty()

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

(abstract) needsRebase()

kept for compatibility; perturbation renderers may ignore
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
Source:

onAnimationFinished()

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

(abstract) onProgramCreated()

Source:

reset()

Resets the fractal to its initial state (default pan, zoom, palette, rotation, etc.), resizes and redraws.
Source:

screenToFractal(screenX, screenY) → {COMPLEX}

Screen point -> fractal coordinates (float64 JS side; fine for UI)
Parameters:
Name Type Description
screenX number
screenY number
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
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
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.
Source:
Returns:
Type
void

setPanFromAnchor()

Set pan so that fractal point (fxAnchor,fyAnchor) remains under a screen point whose view vector is (vx,vy).
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
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.
Source:
Returns:
Type
Promise.<void>

stopAllNonColorAnimations()

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

stopCurrentColorAnimations()

Stops currently running color animation
Source:

stopCurrentPanAnimation()

Stops currently running pan animation
Source:

stopCurrentRotationAnimation()

Stops currently running rotation animation
Source:

stopCurrentZoomAnimation()

Stops currently running zoom animation
Source:

stopDemo()

Stops current demo and resets demo variables
Source:

toggleAdaptiveQuality()

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

updateUniforms()

Cache common uniforms used by all renderers
Source: