The same movement draws the path, places the posters and turns the roll.
distance → print + rotation
THE IDEA / MOTION BECOMES MATERIAL
More movement. More to keep.
A gesture feels different when it leaves a trace. A roll travelling across a floor makes that connection concrete: moving faster prints more, turning shapes the ribbon, and stopping lets you inspect what you made.
This browser study uses a small movement model and projected Canvas geometry. It is a visual interaction model, rather than a simulation of paper unwinding. The roll keeps its thickness so the studio can keep printing.
01 / COUNT DISTANCE, NOT EVENTS
One metre is still one metre.
A scroll event is a request to move. It is not a request for one poster. Devices send different numbers of events, and a trackpad can keep sending them after your fingers leave it. Treat input as a change in velocity, then measure how far the roll actually travels.
Accumulate that distance. Whenever it crosses the print spacing, place a poster. Keep the leftover distance for the next update. A fast pass covers more ground in the same time, so it prints more posters per second. Posters remain evenly spaced.
prints per second ≈ speed / spacing
Try: Try Slow pass, then Fast pass. Both take three seconds; the fast pass travels three times farther. Compare the print count added by each pass.
02 / PLACE EVERY CROSSING
Fill the gaps between frames.
The roll can cross several print intervals during one display frame. Placing only one poster would leave a gap after a fast movement. Walk along the whole movement segment and place a poster at every threshold it crosses.
Interpolate each crossing between the old and new positions. Give the print the heading of that segment. On a curve, a succession of small rotations makes the trail follow the roll. In this demo, a poster’s length also follows spacing, so the ribbon keeps a small margin between cards.
carry + distance → every spacing crossing
Try: Choose Print. Try Curve and change Print spacing. Look for a continuous ribbon of small posters rather than a row of overlapping copies.
03 / MAKE STEERING FEEL PHYSICAL
A target, a spring, a little resistance.
Dragging the floor establishes a target on the ground plane. A spring pulls the roll toward it. Damping resists the current velocity, keeping the response from bouncing endlessly. The drag offset preserves the distance between your finger and the roll when the gesture begins.
After release, remove the spring target and let friction reduce velocity. The roll coasts and continues printing as it travels. Clicking the floor stops it. Small integration steps and a maximum speed keep a sudden input from producing an unstable jump.
Try: Start printing, then drag the floor. Compare soft and firm Spring strength. Release it, change Coasting friction, and notice how long the roll keeps moving. Click to stop.
04 / ROLL THE PRINTED SURFACE
Let distance turn the paper.
Two radii and a width define a thick paper roll: an outer surface, an inner hole, and two annular ends. Project those surfaces into the camera view. The visible end gets fine concentric lines to suggest many layers of paper.
Travel distance also determines the roll’s rotation. Divide distance by the outer radius to get the angle in radians. Here that relationship advances the poster strip around the outer surface, giving the impression that the same printed ribbon touches the floor.
Try: Choose Roll. Change Camera angle to inspect the hole and the printed surface. Run a pass and compare the travelling distance with the Turns readout.
05 / MAKE THE PRINTS YOUR OWN
One small artwork, repeated with care.
The artwork is drawn into a reusable image atlas: eight small poster designs, paper margins, limited ink colours and a little type. The same atlas supplies both the trail and the curved surface. Reusing it keeps the printing and the paper roll visually connected.
This lesson’s artwork is original and procedural. Botanical marks, geometric outlines or code symbols fill the posters. Title and caption controls edit all editions together. Ink variation adds restrained flecks without moving the paper or changing the interaction.
poster atlas → floor prints + curved paper surface
Try: Open Type and write a short title of your own. In Look, compare the three poster families. Keep the same path and camera while judging the artwork.
06 / GIVE THE SCENE ROOM TO BREATHE
A quiet floor. A bounded trail.
A pale studio floor and a soft contact shadow give the roll a place to sit. Older posters lose opacity before they leave the retained trail. A fixed maximum number of live prints keeps a long journey from growing the scene indefinitely; the total print counter keeps counting.
The press starts still. Start printing explicitly enables canvas scrolling and dragging; Esc returns to ordinary page scrolling. Arrow keys drive and steer, Space stops, and the comparison buttons provide a simple alternative. Reduced-motion preferences show comparison passes as settled results. Hidden or offscreen scenes stop updating.
older prints → fade → remove → room for new prints
Try: Choose Studio. Shorten Trail lifetime, run a few passes and watch the old ribbon disappear. Save this scene to prepare a 1600 × 1200 PNG of your current composition.
YOUR TURN / TWO PATHS, ONE EDITION
Print a line. Give it a turn.
Make a short straight ribbon, then steer a longer curved one. Keep the poster family and spacing the same. How does the path change the composition?
Freeze the roll, find a camera angle, and save your favourite frame. Then change the title and make a second edition of the same journey.
The self-contained starter includes the movement model, distance-based print placement, procedural poster atlas, projected roll geometry, styles and controls. Open it in a browser and edit the embedded code. No installation or remote assets are required.
