DRAG THE CENTRE · SCRUB THE FLIGHT · SPACE TO PAUSE
04 / A QUIET SENSE OF SPACE
Give the marks depth, then add a little atmosphere.
depth + marks + atmosphere + a word
THE IDEA / A FEW MARKS CAN HOLD A WORLD
Far away, small. Close by, alive.
A dot becomes space when its size and position respond to depth. Give hundreds of small marks the same rule, and a flat picture starts to feel like a journey. Short trails help reveal the direction; quiet colour makes room for it.
This experiment uses a stable three-dimensional point cloud projected into Canvas 2D. Characters replace points, and a text mask builds the word from smaller glyphs. No setup is needed to explore; the downloadable starter contains the complete renderer and controls.
01 / KEEP A STABLE CLOUD
Give each point three coordinates.
Start with horizontal and vertical coordinates, plus a depth. A seeded random generator creates the same cloud each time. Most points sit around a broad cylinder, leaving the central view less crowded. Increasing Mark count reveals more of that cloud rather than replacing it with a new random arrangement.
point = (x, y, z) more marks = a longer prefix of the same cloud
Try: choose Points. Move Mark count between 300 and 2400. The first points stay in place. Depth changes their brightness in this view, so you can inspect the cloud before applying perspective.
02 / PROJECT THE DEPTH
Divide by distance.
Perspective makes a nearby point larger and farther from the vanishing point. A distant point appears smaller and closer to it. Divide the horizontal and vertical positions by depth, then multiply by a focal scale. The image responds to one shared relationship instead of hundreds of independent animations.
scale = focal length / depth screen = vanishing point + position × scale
Try: choose Depth and increase Perspective. Pause the motion, then drag the centre. The whole field responds to the same vanishing point. Arrow keys make small changes; Home centres it.
03 / MAKE A JOURNEY LOOP
Bring points forward. Hide the return.
Advance a shared phase and subtract it from every point’s initial depth. Wrap the result back into the depth interval. A point that reaches the near plane returns to the far plane, ready for another pass.
The wrap would be visible without a fade. Lower opacity near both ends of the interval: the point leaves quietly, then appears again in the distance. Keep the near depth above zero so projection cannot divide by zero.
depth = near + wrapped(initial − phase) × travel opacity = near fade × far fade
Try: set Travel speed low and scrub Flight position. The same cloud is moving through its depth cycle. Scrubbing pauses automatically; Resume motion continues from your chosen position.
04 / EXCHANGE POINTS FOR MARKS
A character can be a particle.
A small atlas stores the glyphs once. Each point chooses a glyph from that atlas, so the renderer copies a tiny image instead of laying out new text for every particle. Its projected scale and opacity make it belong to the same depth as the original point.
For a trail, project the point at a slightly greater depth. Draw a short line between that position and its current one. This is a drawn motion cue, not a persistent feedback buffer: it stays predictable when you scrub, pause or export.
Try: choose Marks. Open Look and compare Soft dots & rings, Code marks and Tiny stars. Bring Trail length down to zero, then increase it. Find the smallest trail that makes the direction clear.
05 / GATHER MARKS INTO A WORD
Let a text mask choose the cells.
Draw your word into a small offscreen mask. Sample that image on a regular grid. Where the mask is bright, place a small glyph; where it is empty, leave space. A finer grid creates more marks and a clearer silhouette.
The word stays on a stable central plane while the particles travel behind it. It uses the same small-mark atlas, so the lettering and the space share a visual language. A small caption completes the composition without filling the frame.
Try: choose Space and open Type. Change FLOAT to a short word of your own, or try two Chinese characters. Compare Letter detail at 20% and 90%. Turn Show lettering off to see the space on its own.
06 / KEEP THE ATMOSPHERE QUIET
Let the colour support the depth.
A broad radial gradient holds a darker blue centre and lighter edges. A soft pale field adds atmosphere. The character opacity remains restrained so the near marks, trails and central word can coexist.
Periwinkle gives the scene a gentle daylight feeling. Night blue makes the small marks more explicit. Warm mist changes the mood without changing the geometry. Keep the same word and flight position when comparing them.
Reduced-motion preferences start the flight paused. Hidden and offscreen scenes stop updating. Save this frame prepares a 1600 × 1200 PNG with the current build stage, flight position, colour and lettering.
Try: freeze a frame, change Atmosphere colour and adjust Atmosphere. Save two versions. Which one makes you feel the depth most clearly?
07 / TRANSLATE THE IDEA TO TOUCHDESIGNER
Separate geometry, marks and finishing.
For a node-based version, first establish a point field, a camera and a render. Store per-point translation data in x, y and z channels or attributes. A Geometry COMP can instance a small mark using those positions; map the instance Translate X, Y and Z parameters to the corresponding data.
Advance the z values through a bounded interval and use a separate value for near and far opacity. Begin with simple point or plane geometry so you can verify the camera and scale before adding typography. For floating text geometry, Geo Text COMP provides glyphs that can be placed in space; keep blending and draw order in mind for their transparent rectangles.
Build the central lettering separately from a text image sampled into cells. Composite it with the travelling field and a soft background. Add longer feedback trails only after the base motion reads clearly. The browser starter below uses the same separation of concerns and a deterministic projected trail.
YOUR TURN / THE SAME SPACE, TWO JOURNEYS
Slow it down. Change the feeling.
Make one version with a low mark count, tiny stars, short trails and a slow flight. Make another with more code marks, stronger perspective and a longer trail.
Keep the word and colour the same. Pause both at the same Flight position and save a frame. How much of the atmosphere comes from the marks, and how much comes from their journey?
The self-contained starter includes the seeded point cloud, perspective model, glyph atlas, text-mask sampler, styles and controls. Open it in a browser and edit the embedded JavaScript in a text editor. No server, installation or remote assets are needed.
// A point travels through a bounded depth interval.
const z = near + wrapped(initialDepth - phase) * travel;
// Perspective makes nearby marks larger and farther apart.
const scale = focalLength / z;
const screenX = centreX + x * scale;
const screenY = centreY + y * scale;
// Copy one small character from the atlas at this position.
drawGlyph(screenX, screenY, scale, opacity);
