rotate

What it does

rotate is a geometry function. It does not move pixels; it changes which coordinate the earlier part of the chain is asked to draw at each pixel (see Coordinate space). For screen coordinate $st$ it hands the source

$$st' = R(-\theta)\,(st - c) + c,\qquad \theta = \text{angle} + \text{speed}\cdot\text{time},\quad c = (0.5,\,0.5)$$

Sampling through $R(-\theta)$ makes the image appear turned by $+\theta$. Hydra’s $y$ axis points down the screen, so positive angles look clockwise.

Rotation happens in normalized coordinates where the canvas is a 1 × 1 square, whatever its real shape. On a wide canvas that means the image is squashed and stretched as it turns (see the quirk below).

Pixels that land outside the source’s $[0, 1]$ area show whatever that source does there: src() repeats (tiles) the texture, osc and noise simply continue, and shape is black.

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

Examples

Constant spin

osc(40, 0.05, 1.2).rotate(0, 0.2).out()

▶ Load into previewOpen in hydra ↗

Rocking back and forth with a function argument

shape(4, 0.3, 0.01).rotate(() => Math.sin(time) * 0.5).out()

▶ Load into previewOpen in hydra ↗

Aspect-correct rotation (no shearing)

shape(4, 0.3, 0.01)
.scale(1, width / height, 1)
.rotate(0, 0.3)
.scale(1, height / width, 1)
.out()

▶ Load into previewOpen in hydra ↗

The last example converts to square units before rotating and back afterwards. Geometry functions apply to coordinates in reverse chain order: the final .scale(1, height / width, 1) runs first. The math runs in 0–1 coordinates on both axes, so on a 16 : 9 canvas shapes shear partway through a turn. Look at the 45° tile (0.7854) in the angle strip: the card’s circle, which is round in pixels, becomes a tilted ellipse, and the “F“‘s right angles close up. The third example above shows the fix.

Rotates the coordinates fed to everything earlier in the chain, about the screen center $(0.5, 0.5)$.

Parameter	Default	Useful range	Units	No-op at
angle	10	-6.2832 … 6.2832	radians ($2\pi \approx 6.283$ = one full turn)	0 (or any multiple of $2\pi$), with speed = 0
speed	0	-2 … 2	radians / second (one turn every $2\pi / \text{speed}$ s)	0

angle= 10

Fixed rotation, in radians. Positive turns the image clockwise on screen.

Useful range

-6.2832 … 6.2832

Units

radians ($2\pi \approx 6.283$ = one full turn)

No-op at

0 (or any multiple of $2\pi$), with speed = 0

Negative values

counter-clockwise

Periodic

every $2\pi$ (6.283…); 10 looks the same as $10 - 2\pi \approx 3.717$

Accepts

number · array · function

The default 10 is not a "small" rotation: 10 rad ≈ 573°, which is 213° after removing one full turn. So .rotate() with no arguments turns the image a bit more than half way around. Degrees → radians: multiply by Math.PI / 180.

0

0.7854

1.5708

3.1416

-0.7854

6.2832

10

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

speed= 0

Continuous rotation added on top of angle, in radians per second of hydra time.

Useful range

-2 … 2

Units

radians / second (one turn every $2\pi / \text{speed}$ s)

No-op at

0

Negative values

spins counter-clockwise

Accepts

number · array · function

The total angle is $\text{angle} + \text{speed} \cdot \text{time}$, where time is hydra's clock (seconds since start, multiplied by the global speed). Because it's added to an ever-growing time, changing speed while running makes the image jump to a new angle rather than smoothly change pace.

0

0.25

1

-0.25

-1

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

Gotchas

Quirk: rotate() with no arguments is not a no-op

The default angle is 10 radians (≈ 213° after one full turn). Write .rotate(0, speed) for spin only.

Quirk: rotation is not aspect-corrected

The math runs in 0–1 coordinates on both axes, so on a 16 : 9 canvas a square turns into a parallelogram partway through a turn. Look at the 45° tile in the angle strip: the grid’s square cells shear. The third example above shows the fix.

• The pivot is always the screen center. To rotate around another point, scroll so that point sits at the center, rotate, then scroll back.
• speed multiplies an ever-growing time, so changing it live makes the image jump. For smooth changes of pace, pass a function to angle that accumulates its own angle instead.

Related

• scroll: move the image; combine with rotate to move the pivot.
• Coordinate space: why geometry runs “backwards” through the chain.
• Arguments & time: arrays and functions as angle/speed.