Scramble

effect::scramble shifts colour channels across the completed image. With a transparent refresh colour it retains the scrambled output from the previous frame, producing distorted trails. The same call works in context 2d and context 3d.

effect::scramble(type: 1, refresh_color: color::rgb(a: 0.07))

The effect applies once after drawing. Its position among drawing calls does not matter; if multiple calls execute, the last one supplies that frame’s settings. Omitting the call disables the effect for that frame and discards its history. Changing the type while enabled keeps the existing trails.

Refresh and backgrounds

Each frame overlays the refresh colour on history, draws the current scene over it, scrambles the combined image, then displays and retains the result.

a: 0.07 means 7% opacity, using the existing colour API. That opacity is applied in 60 Hz refresh steps accumulated from elapsed time so fade duration stays consistent at different frame rates. A faster renderer can draw between refresh steps; a slower one applies the elapsed steps together. This preserves the original Canvas2D byte rounding without making it happen more often at higher frame rates. Displacement still happens once per rendered frame, so motion can differ at different frame rates.

With scramble, the current scene starts transparent. Explicit draw::background (2D) and gfx::clear (3D) colours are still honoured as part of that scene. An explicit opaque background hides previous trails. Remove it when using refresh_color to control fading. draw::clear() clears only the current 2D scene, not retained history.

History starts transparent and resets when a visual is loaded, the canvas resizes, the graphics context is recreated, or the effect is re-enabled. 3D depth is fresh every frame: trails are images, not geometry that can occlude new objects. CSS effect::filter::* effects apply afterwards for display and are not included in the retained history.

Types

Types 1–17 preserve the original shift filter’s numbering and byte addressing. Offsets refer to RGBA bytes, so they can select a different colour channel and cross pixel or row boundaries. The source base is one row minus one pixel ahead of the destination. The initial width - 1 pixels and the excluded bottom rows remain unchanged by the scramble step.

Types 18–40 affect the whole image, clamping source coordinates at its edges. Spatial effects move alpha along with colour; channel separation and cycling keep alpha in place. All settings are fixed per type. With transparent refresh, these distortions accumulate into waves, spirals and fractured trails.

For flowing trails, try types 25–34 with a: 0.07. Types 35–39 produce more fragmented, glitch-like patterns. Types 28 and 29 are gradual zooms; a transparent refresh makes their repeated expansion or contraction more visible.

Moving 2D shape

context 2d

render {
  effect::scramble(type: 1, refresh_color: color::rgb(a: 0.07))
  draw::circle(
    x: $WIDTH / 2.0 + math::sin(rad: $TIME_SEC) * $WIDTH * 0.3,
    y: $HEIGHT / 2.0,
    radius: 24.0,
    color: $COLOR_TURQUOISE
  )
}

Moving 3D scene

context 3d

render {
  effect::scramble(type: 3, refresh_color: color::rgb(b: 0.08, a: 0.07))
  draw::cube(
    x: math::sin(rad: $TIME_SEC) * 3.0,
    rotation_x_deg: $TIME_SEC * 25.0,
    rotation_y_deg: $TIME_SEC * 40.0,
    size: 1.5,
    color: $COLOR_TURQUOISE
  )
  draw::sphere(x: 0.5, z: 0.4, radius: 0.65, color: $COLOR_ORANGE)
}

Scramble uses WebGL2 in both contexts. A 2D visual still draws with Canvas2D; the completed scene feeds the GPU effect directly. There is no per-frame CPU pixel readback. Fullscreen resolution increases the memory and bandwidth needed by the scene, composition and history buffers.