osc

What it does

osc is a source: it computes a color for every pixel from that pixel’s coordinate and the time. It uses only the horizontal coordinate $x$ (0 at the left edge, 1 at the right; see Coordinate space), so it always draws vertical stripes. Each channel is a sine wave squeezed into the 0–1 range:

$$\begin{aligned} r &= \tfrac12 + \tfrac12 \sin\!\big(\varphi - \text{offset}\big) \\ g &= \tfrac12 + \tfrac12 \sin\!\big(\varphi\big) \\ b &= \tfrac12 + \tfrac12 \sin\!\big(\varphi + \text{offset}\big) \end{aligned} \qquad \varphi = \text{frequency}\cdot\big(x + \text{sync}\cdot t\big)$$

where $t$ is hydra’s time in seconds. Reading the phase $\varphi$ term by term:

• frequency is how many radians the wave advances per screen width. One full stripe (bright → dark → bright) is $2\pi$ radians, so you see $\text{frequency}/2\pi$ stripes: about 9.5 with the default 60.
• sync is added to $x$, scaled by time: the pattern you would have seen at $x + \text{sync}\cdot t$ is now drawn at $x$, so it slides left by sync screen widths each second.
• offset is a phase shift applied with opposite signs to red and blue. With offset = 0 all three channels are identical and the stripes are pure gray; increasing it pulls red and blue out of step with green, which is where the colors come from.

The stripes are soft (a sine, not a square wave) and every channel sweeps the full 0–1 range.

Because the formula is defined for every $x$, osc keeps going outside the screen: zoom out with .scale(0.5) and you see twice as many stripes, never a repeat or a black border.

osc source in glsl-functions.js (hydra-synth 1.4.0) ↗

Examples

Rainbow stripes (channels a third of a cycle apart)

osc(30, 0.05, 2.09).out()

▶ Load into previewOpen in hydra ↗

Exactly 5 stripes, turned horizontal

osc(2 * Math.PI * 5, 0.1, 0.8)
.rotate(Math.PI / 2, 0)
.out()

▶ Load into previewOpen in hydra ↗

Moiré: two oscillators crossed

osc(60, -0.015, 0.3)
.diff(osc(60, 0.08).rotate(Math.PI / 2, 0))
.out()

▶ Load into previewOpen in hydra ↗

Hard-edged stripes

osc(20, 0.1, 0).thresh(0.5, 0).out()

▶ Load into previewOpen in hydra ↗

The third example works because diff takes the absolute difference of the two stripe patterns; where the vertical and horizontal stripes agree you get black, where they disagree, color.

Parameters

Vertical sine stripes that scroll sideways over time; offset phase-shifts red and blue in opposite directions.

Parameter	Default	Useful range	Units	No-op at
frequency	60	-100 … 200	radians per screen width; $\text{frequency} / 2\pi$ = stripes across the screen	none (there is no "off" value; 0 is undefined, see below)
sync	0.1	-2 … 2	screen widths / second (the pattern crosses the screen in $1 / |\text{sync}|$ s)	0 (still stripes)
offset	0	-6.2832 … 6.2832	radians of phase (a full stripe = $2\pi$)	0 (or any multiple of $2\pi$): all three channels equal, so the stripes are gray

frequency= 60

How tightly packed the stripes are, in radians of the sine wave per screen width.

Useful range

-100 … 200

Defined for

frequency ≠ 0 (red and blue compute offset / frequency)

Units

radians per screen width; $\text{frequency} / 2\pi$ = stripes across the screen

No-op at

none (there is no "off" value; 0 is undefined, see below)

Negative values

inverts the colors and swaps red with blue (exactly $r' = 1 - b$, $g' = 1 - g$, $b' = 1 - r$); motion direction is unchanged

Accepts

number · array · function

The stripe count is $\text{frequency} / 2\pi$, so the default 60 gives about 9.5 stripes, and 2 * Math.PI * n gives exactly n. Whole-number counts matter when the pattern is wrapped by scroll, src() feedback or repeat: otherwise there is a visible seam where the last partial stripe meets the first.

Stripes are counted per screen width, whatever the canvas size or shape: a wider canvas gets wider stripes, not more of them.

0 divides by zero in the red and blue channels. In headless Chrome (SwiftShader) it renders flat gray (128, 128, 128), with or without an offset; other GPUs may differ.

3.1416

6.2832

20

60

150

-20

Sweep of frequency (still at time = 0): osc({frequency}, 0, 1).out() · outlined tile = default

sync= 0.1

Scroll speed of the stripes, in screen widths per second. Positive moves them left.

Useful range

-2 … 2

Units

screen widths / second (the pattern crosses the screen in $1 / |\text{sync}|$ s)

No-op at

0 (still stripes)

Negative values

stripes move right

Accepts

number · array · function

The phase is $\text{frequency}\cdot(x + \text{sync}\cdot t)$, so the whole pattern slides left by sync screen widths every second. The same stripes also flicker at a fixed pixel, at $\text{frequency} \cdot \text{sync} / 2\pi$ times per second: the default osc(60, 0.1) pulses about 0.95 times a second. To make the pattern flash faster without changing how fast it travels, you have to raise frequency (more, narrower stripes).

Because sync multiplies an ever-growing time, changing it (or frequency) while running makes the stripes jump to a new position rather than smoothly change speed.

0

0.05

0.1

0.3333

-0.1

Sweep of sync (3s loops): osc(20, {sync}, 1).out() · outlined tile = default

offset= 0

Splits the color channels apart. Red's wave is shifted by $-\text{offset}$ radians, blue's by $+\text{offset}$, green never moves.

Useful range

-6.2832 … 6.2832

Units

radians of phase (a full stripe = $2\pi$)

No-op at

0 (or any multiple of $2\pi$): all three channels equal, so the stripes are gray

Negative values

swaps the roles of red and blue

Periodic

every $2\pi$ (6.283…); 1 and 1 + 2π render identically

Accepts

number · array · function

It is not a position offset: green stays put, red shifts right and blue shifts left, each by $\text{offset} / \text{frequency}$ screen widths. Where the waves disagree you see color.

• 0: gray stripes.
• Math.PI ($\pi$): red and blue are the exact opposite of green, so green stripes alternate with magenta ones.
• 2.094 ($2\pi/3$): the three channels are evenly spaced a third of a cycle apart, giving the most rainbow-like hues.
• Small values (0.1–0.5) give gray stripes with red and blue fringes on their edges.

The shift is in phase, so the same offset gives the same colors at any frequency.

0

0.5

1

2.0944

3.1416

-1

6.2832

Sweep of offset (still at time = 0): osc(20, 0, {offset}).out() · outlined tile = default

Gotchas

Quirk: sync is a scroll speed, and positive means left

The name suggests timing to a beat; it’s just the stripes’ velocity in screen widths per second. Probe (SwiftShader, 256 px wide): osc(2π, 0.25, 0) sampled at 8 points across the screen reads 178 246 245 175 77 9 10 80 at time = 0 and 245 175 77 9 10 80 178 246 at time = 1: the same pattern, moved two samples (¼ screen) to the left. With sync = -0.25 it moves ¼ screen right. How fast a single pixel flickers also depends on frequency ($\text{frequency}\cdot\text{sync}/2\pi$ Hz).

Quirk: offset changes color, not position

Green ignores offset; red and blue move in opposite directions. Probe of osc(10, 0, offset) at $x = 0.1, 0.3, 0.5$: with offset = 0 the pixels are gray (235, 147, 6 on all channels); with offset = π they become (20, 235, 20) green, (108, 147, 108) and (249, 6, 249) magenta. offset = 1 and offset = 1 + 2π produce identical pixels.

Quirk: negative frequency inverts and swaps red/blue, but doesn't reverse direction

Flipping the sign of frequency flips the sign of the whole sine, which inverts every channel, and turns the red channel’s $-\text{offset}$ into blue’s $+\text{offset}$. Probe at $x = 0.1$: osc(10, 0, 1) = (127, 235, 244), osc(-10, 0, 1) = (11, 20, 128) $= (255 - b,\ 255 - g,\ 255 - r)$. The motion direction comes from sync alone: osc(-2π, 0.25) also moves ¼ screen left per second. Since an inverted sine is the same sine shifted half a period, osc(-f, s, o) is exactly osc(f, s, -o) moved by half a stripe: compare the -20 tile of the frequency strip with the -1 tile of the offset strip.

Quirk: frequency 0 divides by zero

Red and blue compute offset / frequency. In SwiftShader, osc(0, 0.1, 0) and osc(0, 0.1, 1) both render flat (128, 128, 128); real GPUs may show something else (the GLSL result of 0/0 is undefined). Use a tiny value such as 0.001 if you want “almost no stripes”.

• Stripes are counted per screen width and never aspect-corrected: on a 16 : 9 canvas the same osc has wider stripes (in pixels) than on a square one.
• Changing frequency or sync while the clock has been running a long time makes the pattern jump: both multiply time inside the phase. Animate offset or use a function argument that keeps its own accumulator if you need smooth changes.
• Wrapping an osc (with scroll, repeat, src(o0) feedback) shows a seam unless the stripe count is a whole number: use frequency = 2 * Math.PI * n. See the scroll quirk.

Related

• scroll: move the stripes by a fixed amount, or vertically.
• rotate: turn the stripes; rotate(Math.PI / 2, 0) makes them horizontal.
• Coordinate space: what $x$ is and why it runs 0–1 across any canvas.
• Arguments & time: what time is, and passing arrays or functions as offset.