How to Diagram a Remembered One-Button Game’s Pivot-Switching Line

Draw the scene as a short sequence: the line rotates, one endpoint attaches to a dot, and that endpoint becomes the new pivot. Keep the attachment and the change of rotation center separately legible.

The task is to preserve this particular movement on the page. A still drawing of a line touching a dot records the contact, but it leaves the pivot transfer unresolved. The sequence needs to show which end attaches, where rotation was centered beforehand, and how the line turns around the attached endpoint afterward.

The method below combines a small storyboard with explicit endpoint and pivot labels. Its drawing conventions are illustrative choices, not additional details of the remembered scene. The references support ways to represent geometry and movement; they do not document this remembered game.

What must the diagram preserve?

Begin with one factual sentence: “A rotating line attaches one end to a dot and transfers its pivot to that endpoint.” This sentence establishes the relationship that every panel must retain. “One-button game” supplies context, but does not establish when the button was pressed or exactly what the input controlled.

Separate three things before drawing: the line itself, the dot it attaches to, and the point about which the line rotates. A pivot is a role in the movement. It need not appear as an extra visible object in the remembered scene.

Give the two ends stable working labels, such as A and B. For this explanation, B means the endpoint that attaches. These letters are example annotations, not remembered markings. Keep their identities consistent even when the line changes orientation: B remains B when it moves from one side of the drawing to another.

Represent the line as a segment with two ends. This is also how the W3C’s SVG specification defines a line segment: by its starting and ending points. That geometric description provides a useful way to track the same object across drawings. W3C, “Basic Shapes” (https://www.w3.org/TR/SVG11/shapes.html#LineElement)

Before adding detail, distinguish what the scene establishes from what remains unspecified:

• Established: the line rotates, an endpoint attaches to a dot, and the pivot transfers to that endpoint.

• Add only if remembered: the earlier pivot’s location, the line’s orientation, rotation direction, visible thickness, colors, and the precise appearance of contact.

• Leave unspecified when absent: the arrangement of other dots, elapsed time, button timing, and any subsequent attachment.

This separation lets the drawing remain precise about the central change even when surrounding details are unavailable. An unknown earlier pivot does not prevent recording the new one.

How do you show the complete change sequence?

Use four labeled panels: “Before attachment,” “Endpoint attaches,” “Pivot transfers,” and “Rotation around the attached endpoint.” Four panels are an illustrative recording choice. They separate the visible contact from the change in the line’s movement without claiming four equally spaced moments.

A storyboard represents a sequence through successive illustrations. Adobe’s discussion of storyboarding recommends breaking a sequence into individual moments and translating those moments into rough frames. Here, that approach is adapted to a single geometric event. Adobe, “Storyboarding in UX Design” (https://blog.adobe.com/en/publish/2017/11/01/storyboarding-in-ux-design)

Before attachment: establish the moving line

Draw the line in a remembered orientation, with A and B labeled just beyond its ends. Include the relevant dot only where its position is remembered. Keep other dots out of this local study unless their positions are necessary to explain the attachment.

If the earlier pivot’s position is known, identify it with a small annotation and the words “pivot before attachment.” If its position is unknown, put that statement in the caption. Do not place it at the midpoint or at A merely because either would make the diagram convenient.

A curved motion mark can indicate the remembered rotation. If the direction is uncertain, use the words “rotating; direction unspecified” rather than choosing an arrowhead. The drawing should not settle a detail that the recollection leaves open.

Endpoint attaches: make the contact readable

In the second panel, show B at the remembered attachment location on the dot. Put the caption “Endpoint B attaches to the dot” beneath it. Keep the label outside the contact area so the lettering does not hide the relationship.

A drawn dot has visible area, so contact can be represented in several ways: at its edge, at its center, or with the endpoint partly obscured. Use the remembered appearance when available. If that detail is unresolved, describe the connection in the caption and identify the drawn contact placement as schematic.

Do not add a connector, clamp, joint, or other piece of hardware to explain the attachment. The line’s endpoint and the dot already express the supplied relationship. A mechanical embellishment would add an object to the scene.

Pivot transfers: identify the new rotation center

Repeat the contact pose in the third panel and change the annotation to “B is now the pivot.” Repeating the pose is a diagramming choice that isolates the change of role. It does not assert a pause, a delay, or a separate visible effect.

Place the pivot annotation at the attached endpoint. Avoid putting it at the middle of the line or elsewhere inside the dot for visual balance. The point of this panel is to make the endpoint’s new role explicit.

Rotation needs both an angle and a center to be described unambiguously. The W3C’s rotation definition distinguishes rotation around the coordinate origin from rotation around a specified point. Applied to this drawing, that distinction explains why showing a changed line angle alone cannot communicate the pivot transfer. W3C, “Coordinate Systems, Transformations and Units” (https://www.w3.org/TR/SVG11/coords.html#TransformAttribute)

After transfer: show rotation around B

In the fourth panel, keep B at the attachment location and show the line in a later remembered orientation around it. The other endpoint, A, changes position as the line turns. Label the panel “Rotation around attached endpoint B.”

If a later orientation is not remembered, retain the attachment pose and explain the subsequent rotation with a caption. A lightly drawn second orientation can serve as an illustrative explanation, but label it “schematic continuation” so it cannot be mistaken for a recovered frame.

Do not imply that the former pivot remains a second active pivot. If its earlier position is shown for comparison, label it as the former rotation center. The recorded change is the transfer to B.

How should motion marks differ from scene objects?

Use the strongest continuous stroke for the remembered line. Keep labels, motion guides, and pivot indicators visually separate. For example, a thin broken curve can serve as an explanatory motion guide, while a small outlined ring can identify the active pivot. These are optional annotation choices; define them in a short legend.

Arrows and annotations are established storyboard tools for explaining movement and transitions. Adobe’s storyboard guide describes adding them to clarify the sequence. For this scene, use them only where the line drawing and captions leave movement unclear. Adobe Express, “Storyboard Examples: How to Plan Your Visual Story” (https://www.adobe.com/uk/express/discover/examples/storyboard)

Keep a motion guide away from the attachment itself. An arrow crossing B can make the contact harder to read. A curved arrow should describe the remembered turning direction; a straight arrow between the old and new pivot labels could mistakenly suggest that an object travels along that route.

Include a brief legend if you use multiple marks: “Solid stroke: remembered line. Broken curve: motion annotation. Outlined ring: pivot annotation.” If the remembered scene itself contained a similar mark, choose a different annotation style and explain it.

Preserve material appearance only to the extent it is available. The word “line” does not establish a rod, string, luminous trail, or textured surface. Record any remembered thickness or surface appearance directly, and avoid adding shading that would suggest unremembered depth.

How can you check the diagram without filling in missing details?

Read the panels once while following only B. It should remain the same endpoint throughout: moving before contact, attached at the dot, identified as the new pivot, and serving as the center of the subsequent rotation. Then follow A to check that its identity remains consistent through the turn.

If the line is remembered as straight and unchanged in length, compare the panels for accidental stretching or bending. Under that geometric model, the free end’s successive positions lie at the same distance from the attached pivot. Treat this as a consistency check for that model, not evidence about details the scene never supplied.

Check the surrounding frame as well. Keep the same local view where possible. If you enlarge the attachment to make it readable, label the enlargement “detail view”; otherwise, the change in scale could look like a change in the scene.

Use these final questions to locate specific drawing problems:

• Can the reader identify the endpoint that attaches?

• Is the line-to-dot connection visible or clearly captioned?

• Does the diagram explicitly name that endpoint as the new pivot?

• Does the continuation show rotation centered there?

• Are unknown direction, timing, and earlier pivot position left unresolved?

• Are illustrative marks and orientations labeled as such?

Finish with a caption that preserves the complete action: “The line rotates; endpoint B attaches to the dot; the pivot transfers to B; the line then rotates around that attached endpoint.” Alongside the panels, this gives the record a clear endpoint: the attachment remains visible, and the changed center of rotation is unmistakable.

Sources

• “Basic Shapes” — W3C, SVG 1.1 (Second Edition) (https://www.w3.org/TR/SVG11/shapes.html)

• “Coordinate Systems, Transformations and Units” — W3C, SVG 1.1 (Second Edition) (https://www.w3.org/TR/SVG11/coords.html)

• “Storyboarding in UX Design” — Adobe (https://blog.adobe.com/en/publish/2017/11/01/storyboarding-in-ux-design)

• “Storyboard Examples: How to Plan Your Visual Story” — Adobe Express (https://www.adobe.com/uk/express/discover/examples/storyboard)