Sample: porting a feedback loop

In TouchDesigner, a feedback loop is three operators wired in a circle. In the browser there is no network to wire, so the same idea becomes two framebuffers that swap every frame. It is the same shape of idea, just written down differently.

Each frame reads last frame’s texture and writes into the other one. The finished piece is Sample landscape, which uses this trick.

vec4 prev = texture(uPrev, uv * 0.995);
fragColor = max(prev * 0.98, texture(uInput, uv));

Placeholder: a still from the patch would go here. (Caption on the line right after the image.)

Matching the decay

The Level TOP multiplies brightness, so 0.98 per frame at 60 fps fades a trail to half in about 34 frames. Match that number and the web version feels the same as the patch.

Placeholder: a second still. (Caption in the next paragraph, after a blank line.)

What to check

• Both framebuffers are the same size and format.
• The two never point at the same texture.
• The decay is tied to time, not just to frames.

1. Draw the new input.
2. Fade the old frame.
3. Swap the two buffers.

If the two ever point at the same texture, the result is undefined and usually just black.

Setting	Value
Decay	0.98
Scale	0.995
Frame rate	60

---

A very long unbroken line inside code, to check that the block scrolls instead of widening the page:

const reallyLongLine = "abcdefghijabcdefghijabcdefghijabcdefghijabcdefghijabcdefghijabcdefghijabcdefghijabcdefghijabcdefghijabcdefghijabcdefghijabcdefghijabcdefghijabcdefghijabcdefghijabcdefghijabcdefghij";

This is placeholder text so the page has something to read. Replace it with a real post once the writing starts. A short sentence keeps the rhythm of the paragraph moving along. Longer sentences help show how lines wrap inside a column of about sixty-six characters.

Replace it with a real post once the writing starts. A short sentence keeps the rhythm of the paragraph moving along. Longer sentences help show how lines wrap inside a column of about sixty-six characters. Tiny details like this are what the reading-time estimate counts.

A short sentence keeps the rhythm of the paragraph moving along. Longer sentences help show how lines wrap inside a column of about sixty-six characters. Tiny details like this are what the reading-time estimate counts. Nothing here is meant to be true or useful, only to fill the space.

Longer sentences help show how lines wrap inside a column of about sixty-six characters. Tiny details like this are what the reading-time estimate counts. Nothing here is meant to be true or useful, only to fill the space. This is placeholder text so the page has something to read.

Tiny details like this are what the reading-time estimate counts. Nothing here is meant to be true or useful, only to fill the space. This is placeholder text so the page has something to read. Replace it with a real post once the writing starts.