scroll

What it does

scroll, scrollX and scrollY are geometry functions: they change which coordinate the earlier part of the chain is asked to draw at each pixel (see Coordinate space). For screen coordinate $st$, scroll hands the source

$$st' = \operatorname{fract}\!\Big(st + \big(\text{scrollX} + \text{speedX}\cdot t,\ \ \text{scrollY} + \text{speedY}\cdot t\big)\Big), \qquad \operatorname{fract}(v) = v - \lfloor v \rfloor$$

where $t$ is hydra’s time in seconds. Two things follow:

• Direction. The pixel at $x$ shows what used to be at $x + 0.25$, i.e. the content that was a quarter screen to its right. So a positive shift moves the image left, and (because $y$ points down the screen) a positive vertical shift moves it up.
• Wrapping. fract throws away the whole-number part, so coordinates always land back in $[0, 1)$: what scrolls off one edge comes back on the opposite one, and a shift of 1 is the same as 0.

Units are fractions of the screen: 0.25 is a quarter of the width (for $x$) or height (for $y$), whatever the canvas size, and speeds are screens per second.

scrollX(scrollX, speed) and scrollY(scrollY, speed) are the same thing on one axis, with the speed parameter renamed to plain speed.

scroll source in glsl-functions.js (hydra-synth 1.4.0) ↗ scrollX source in glsl-functions.js (hydra-synth 1.4.0) ↗ scrollY source in glsl-functions.js (hydra-synth 1.4.0) ↗

Examples

Endless horizontal scroll

s0.initImage("https://hydra-ref.audiodude.xyz/cards/uv-grid.png")
src(s0).scroll(0, 0, 0.1, 0).out()

▶ Load into previewOpen in hydra ↗

Swaying side to side with a function argument

shape(3, 0.3, 0.01)
.scrollX(() => Math.sin(time) * 0.25, 0)
.out()

▶ Load into previewOpen in hydra ↗

Rotating around a point other than the center

s0.initImage("https://hydra-ref.audiodude.xyz/cards/uv-grid.png")
src(s0)
.scroll(-0.25, -0.25)
.rotate(0, 0.5)
.scroll(0.25, 0.25)
.out()

▶ Load into previewOpen in hydra ↗

Deliberate tiling: wrap first, then zoom out

shape(4, 0.3, 0.01)
.scroll(0, 0, 0.05, 0.05)
.scale(0.5)
.out()

▶ Load into previewOpen in hydra ↗

The third example reads left to right as image operations: move the point $(0.25, 0.25)$ to the center (a negative scroll moves the image right and down), spin around the center, move it back. The pivot stays fixed: probing it with gradient() and a 90° rotate returns the same color at $(0.25, 0.25)$ before and after. The last example relies on the wrap described below.

Parameters

scroll

Shifts the coordinates fed to everything earlier in the chain by a fixed and/or time-growing amount, then wraps them into 0–1.

Parameter	Default	Useful range	Units	No-op at
scrollX	0.5	-1 … 1	screen widths (fraction of the canvas width)	0 (or any whole number), with speedX = 0; the wrap still applies, see Gotchas
scrollY	0.5	-1 … 1	screen heights (fraction of the canvas height)	0 (or any whole number), with speedY = 0; the wrap still applies, see Gotchas
speedX	0	-1 … 1	screen widths / second (one full lap every $1 / |\text{speedX}|$ s)	0
speedY	0	-1 … 1	screen heights / second (one full lap every $1 / |\text{speedY}|$ s)	0

scrollX= 0.5

Fixed horizontal shift, in screen widths. Positive moves the image left.

Useful range

-1 … 1

Units

screen widths (fraction of the canvas width)

No-op at

0 (or any whole number), with speedX = 0; the wrap still applies, see Gotchas

Negative values

moves the image right

Periodic

every 1; 1.25 looks the same as 0.25

Accepts

number · array · function

The default is 0.5, not 0: .scroll() with no arguments moves the image half a screen left and half a screen up, so whatever was in the center ends up split across the four corners.

The image wraps around: what leaves on the left comes back on the right.

0

0.1

0.25

0.5

-0.25

1

Sweep of scrollX (still at time = 0): s0.initImage("https://hydra-ref.audiodude.xyz/cards/uv-grid.png") src(s0).scroll({scrollX}, 0, 0, 0).out() · outlined tile = default

scrollY= 0.5

Fixed vertical shift, in screen heights. Positive moves the image up.

Useful range

-1 … 1

Units

screen heights (fraction of the canvas height)

No-op at

0 (or any whole number), with speedY = 0; the wrap still applies, see Gotchas

Negative values

moves the image down

Periodic

every 1

Accepts

number · array · function

Hydra's $y$ axis points down the screen, and scroll adds to the coordinate, so positive values pull content from below: the image moves up.

0

0.1

0.25

0.5

-0.25

1

Sweep of scrollY (still at time = 0): s0.initImage("https://hydra-ref.audiodude.xyz/cards/uv-grid.png") src(s0).scroll(0, {scrollY}, 0, 0).out() · outlined tile = default

speedX= 0

Continuous horizontal scrolling, in screen widths per second. Positive moves the image left.

Useful range

-1 … 1

Units

screen widths / second (one full lap every $1 / |\text{speedX}|$ s)

No-op at

0

Negative values

scrolls right

Accepts

number · array · function

The total shift is $\text{scrollX} + \text{speedX}\cdot t$, where $t$ is hydra's time in seconds. speedX multiplies an ever-growing time, so changing it while running makes the image jump to a new position rather than smoothly change pace.

The strip clips are 3 s long, so 0.3333 makes exactly one lap per loop.

0

0.1

0.3333

-0.1

-0.3333

Sweep of speedX (3s loops): s0.initImage("https://hydra-ref.audiodude.xyz/cards/uv-grid.png") src(s0).scroll(0, 0, {speedX}, 0).out() · outlined tile = default

speedY= 0

Continuous vertical scrolling, in screen heights per second. Positive moves the image up.

Useful range

-1 … 1

Units

screen heights / second (one full lap every $1 / |\text{speedY}|$ s)

No-op at

0

Negative values

scrolls down

Accepts

number · array · function

The total shift is $\text{scrollY} + \text{speedY}\cdot t$. Same jump-on-change caveat as speedX.

0

0.1

0.3333

-0.1

-0.3333

Sweep of speedY (3s loops): s0.initImage("https://hydra-ref.audiodude.xyz/cards/uv-grid.png") src(s0).scroll(0, 0, 0, {speedY}).out() · outlined tile = default

scrollX

Horizontal-only scroll. Still wraps both axes into 0–1.

Parameter	Default	Useful range	Units	No-op at
scrollX	0.5	-1 … 1	screen widths	0 (or any whole number), with speed = 0; the wrap still applies
speed	0	-1 … 1	screen widths / second	0

scrollX= 0.5

Fixed horizontal shift, in screen widths. Positive moves the image left.

Useful range

-1 … 1

Units

screen widths

No-op at

0 (or any whole number), with speed = 0; the wrap still applies

Negative values

moves the image right

Periodic

every 1

Accepts

number · array · function

Same as scroll's scrollX, including the 0.5 default (half a screen, not a no-op).

0

0.25

0.5

-0.25

Sweep of scrollX (still at time = 0): s0.initImage("https://hydra-ref.audiodude.xyz/cards/uv-grid.png") src(s0).scrollX({scrollX}, 0).out() · outlined tile = default

speed= 0

Continuous horizontal scrolling, in screen widths per second. Positive moves the image left.

Useful range

-1 … 1

Units

screen widths / second

No-op at

0

Negative values

scrolls right

Accepts

number · array · function

Same as scroll's speedX; renamed because this function has only one axis.

0

0.3333

-0.3333

Sweep of speed (3s loops): s0.initImage("https://hydra-ref.audiodude.xyz/cards/uv-grid.png") src(s0).scrollX(0, {speed}).out() · outlined tile = default

scrollY

Vertical-only scroll. Still wraps both axes into 0–1.

Parameter	Default	Useful range	Units	No-op at
scrollY	0.5	-1 … 1	screen heights	0 (or any whole number), with speed = 0; the wrap still applies
speed	0	-1 … 1	screen heights / second	0

scrollY= 0.5

Fixed vertical shift, in screen heights. Positive moves the image up.

Useful range

-1 … 1

Units

screen heights

No-op at

0 (or any whole number), with speed = 0; the wrap still applies

Negative values

moves the image down

Periodic

every 1

Accepts

number · array · function

Same as scroll's scrollY, including the 0.5 default (half a screen, not a no-op).

0

0.25

0.5

-0.25

Sweep of scrollY (still at time = 0): s0.initImage("https://hydra-ref.audiodude.xyz/cards/uv-grid.png") src(s0).scrollY({scrollY}, 0).out() · outlined tile = default

speed= 0

Continuous vertical scrolling, in screen heights per second. Positive moves the image up.

Useful range

-1 … 1

Units

screen heights / second

No-op at

0

Negative values

scrolls down

Accepts

number · array · function

Same as scroll's speedY; renamed because this function has only one axis.

0

0.3333

-0.3333

Sweep of speed (3s loops): s0.initImage("https://hydra-ref.audiodude.xyz/cards/uv-grid.png") src(s0).scrollY(0, {speed}).out() · outlined tile = default

Gotchas

Quirk: scroll() with no arguments moves the image half a screen

Both fixed shifts default to 0.5. Probe (SwiftShader): shape(4, 0.3, 0.001) is white in the center and black at the edges; after .scroll() the center row and column are all black and the white pixels sit at the four corners. Write .scroll(0, 0, speedX, speedY) for motion only.

Quirk: positive values move the image left and up

scroll adds the shift to the coordinate being looked up, which moves the picture the opposite way. Probe with a red | green / blue | white quadrant texture, sampling 8 points along the top row: src(s0) reads R R R R G G G G, src(s0).scroll(0.25, 0) reads R R G G G G R R (green moved from ½ to ¼: left), scroll(-0.25, 0) reads G G R R R R G G (right). scroll(0, 0.25) moves blue up from ½ to ¼ of the height. scroll(0, 0, 0.25, 0) at time = 1 and scrollX(0.25) give pixel-identical rows to scroll(0.25, 0).

Quirk: scroll always wraps, even scroll(0, 0)

The output goes through fract no matter what the shift is, so scroll(0, 0) is only a no-op when the coordinates arriving at it are already inside 0–1. Geometry runs in reverse chain order, so a .scale(0.5) after the scroll widens those coordinates to −0.5…1.5 first, and the wrap turns them into tiles. Probe, 12 samples across the middle row: shape(4, 0.3).scroll(0, 0).scale(0.5) reads 255 0 0 0 0 255 255 0 0 0 0 255 (a full square in the center plus halves at both edges), while shape(4, 0.3).scale(0.5).scroll(0, 0) reads 0 0 0 0 0 255 255 0 0 0 0 0 (one small square), same as with no scroll at all.

Quirk: scrollX and scrollY wrap both axes

The single-axis versions still fract the whole coordinate. Probe: shape(4, 0.3).scrollX(0).scale(0.5) and shape(4, 0.3).scrollY(0).scale(0.5) tile in both directions, giving exactly the same samples as scroll(0, 0) above (rows and columns 255 0 0 0 0 255 255 0 0 0 0 255).

Quirk: wrapping a non-repeating source shows a seam

src() textures tile perfectly, but osc, noise and gradient don’t repeat every 1 unit, so the wrap creates a hard edge. Probe: osc(10, 0, 0).scroll(0.3, 0) around $x = 0.7$ reads 79 65 | 134 154 (a jump of 69 where its neighbours change by 14–20); with osc(4 * Math.PI, 0, 0), a whole 2 stripes per screen, the same spot reads 98 117 | 136 160, smooth. The seam is just the left and right edges of the unscrolled image meeting: osc(10) itself reads 65 at $x = 0.995$ and 135 at $x = 0.005$.

• The order of scroll relative to other geometry matters. Read the chain left to right as operations on the image: .rotate(…).scroll(0.25, 0) turns the image and then slides the result left; .scroll(0.25, 0).rotate(…) slides first, so the slide happens along the rotated direction.
• speedX/speedY multiply time, which keeps growing; changing them live makes the image jump. Pass a function to scrollX/scrollY that accumulates its own offset if you need smooth changes of pace.
• Use modulateScrollX/modulateScrollY to scroll by an amount that varies per pixel.

Related

• rotate: combine with scroll to rotate around any point (third example).
• osc: choose frequency = 2 * Math.PI * n so scrolled stripes wrap without a seam.
• Coordinate space: why geometry runs “backwards” through the chain.
• Arguments & time: arrays and functions as shift and speed arguments.