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

Classes

FractalRenderer

Members

DEFAULT_PAN :COMPLEX

Type:
  • COMPLEX
Source:

PRESETS :Array.<PRESET>

Interesting zoom-ins
Type:
  • Array.<PRESET>
Source:

colorPalette :PALETTE

Type:
  • PALETTE
Source:

iterations :number

Determines the level of fractal rendering detail
Type:
  • number
Source:

pan :COMPLEX

Type:
  • COMPLEX
Source:

rotation :number

Rotation in rad
Type:
  • number
Source:

vertexShaderSource

Vertex shader initialization snippet
Source:

zoom :number

Zoom. Lower number = higher zoom.
Type:
  • number
Source:

Methods

(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) animateInfiniteRotation(direction, step) → {Promise.<void>}

Parameters:
Name Type Default Description
direction ROTATION_DIRECTION
step number 0.001 Speed in rad/frame
Source:
Returns:
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) 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) animatePanZoomRotationTo(targetPan, targetZoom, targetRotation, durationopt, easeFunction) → {Promise.<void>}

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

(async) animateRotationTo(targetRotation, durationopt, easeFunction) → {Promise.<void>}

Animates to target rotation. Rotation is normalized into [0, 2*PI] interval
Parameters:
Name Type Attributes Default Description
targetRotation number
duration number <optional>
 500 in ms
easeFunction EASE_TYPE | function
Source:
Returns:
Type
Promise.<void>

(async, abstract) animateTravelToPreset(preset, duration) → {Promise.<void>}

Animates travel to preset.
Parameters:
Name Type Description
preset PRESET Parameters for the animation.
duration number Parameters for the animation.
Source:
Returns:
Type
Promise.<void>

(async, abstract) animateTravelToPresetWithRandomRotation(preset, zoomOutDuration, panDuration, zoomInDuration)

Animate travel to a preset with random rotation. This method waits for three stages: 1. Zoom-out with rotation. 2. Pan transition. 3. Zoom-in with rotation.
Parameters:
Name Type Description
preset PRESET The target preset object with properties: pan, c, zoom, rotation.
zoomOutDuration number Duration (ms) for the zoom-out stage.
panDuration number Duration (ms) for the pan stage.
zoomInDuration number Duration (ms) for the zoom-in stage.
Source:

(async) animateZoomRotationTo(targetZoom, targetRotation, durationopt, easeFunction) → {Promise.<void>}

Animates to target zoom and rotation simultaneously. Rotation is normalized into [0, 2*PI] interval
Parameters:
Name Type Attributes Default Description
targetZoom number
targetRotation number
duration number <optional>
 500 in ms
easeFunction EASE_TYPE | function
Source:
Returns:
Type
Promise.<void>

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

Animates to target zoom without panning.
Parameters:
Name Type Attributes Default Description
targetZoom number
duration number <optional>
 500 in ms
easeFunction EASE_TYPE | function If none is provided, it defaults to exponential.
Source:
Returns:
Type
Promise.<void>

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

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

(abstract) createFragmentShaderSource()

Defines the shader code for rendering the fractal shape
Source:

destroy()

Destructor
Source:

draw()

Draws the fractal's and sets basic uniforms. Customize iterations number to determine level of detail.
Source:

init()

WebGL init & initial uniforms setting
Source:

initGLProgram()

Initializes the WebGL program, shaders and sets initial position
Source:

onAnimationFinished()

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

reset()

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

resizeCanvas()

Updates the canvas size based on the current visual viewport and redraws the fractal
Source:

screenToFractal(screenX, screenY) → {COMPLEX}

Calculates coordinates from screen point [x, y] to the fractal scale [x, yi]
Parameters:
Name Type Description
screenX number
screenY number
Source:
Returns:
fractal plane coords [x, yi]
Type
COMPLEX

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:

updateUniforms()

Updates uniforms (should be done on every redraw)
Source: