インタラクティブな図で変化する状態を知る

Relations Hidden by Static Pictures

In the previous chapter, we explained that it is important to show the purpose and intuition behind a change before going into implementation details. This chapter discusses interactive figures as a way to make that intuition easier to understand.

A static picture shows the system at one point in time. But to understand a system, it is sometimes necessary to see what changes when we interact with it. If learners can manipulate a figure, relationships that were hidden can become visible.

The important thing is not to add something that moves. The interaction must make the mechanism being explained visible. Movement added only because it is novel or fun does not necessarily help understanding.

Checking State by Dragging Rocks

The speaker uses a simulation with two rocks as an example. The learner can drag the rocks to move them. The rocks' coordinates, or numbers representing their positions, are displayed, and the Z layers, or layers representing front-to-back drawing order, also change. As a result, the relationship between which rock appears in front and which appears behind changes as well.

The sequence of events can be organized as follows.

1. The learner drags a rock.
2. The coordinates related to the rock's position change.
3. The Z-layer values or ordering change.
4. The rocks' front-to-back relationship on the screen changes.

This sequence connects coordinates and layers to visible changes on the screen instead of leaving them as words in an explanation. In other words, the learner can use their own actions to confirm the relationship: changing a position also changes the front-to-back drawing relationship.

Figure 1 — A simulation in which moving the rocks changes the coordinate and depth information and the front-versus-behind relationship.

This image shows a simulation with two rocks and data about their coordinates and depth. In the nearby frames, moving the rocks changes the displayed values and their front-to-back arrangement. Therefore, the figure supports the explanation that interaction connects internal state with the visible result. The exact coordinate model and implementation of the Z layers cannot be confirmed from this material alone. Relevant point in the video (09:01)

Putting an Interactive Explanation in a Shared Page

The speaker also shows an example of placing this kind of simulation in a Notion page. An agent can put an interactive simulation in an HTML block on a shared page. This lets readers operate it without leaving the page. Because the page is shared, teammates can look at the same explanation, add comments, and deepen their understanding together.

Again, using an HTML block is not the goal. The goal is to place a learning figure that can be manipulated when needed inside a shared explanation. The idea is that an agent can create not only code, but also tools that help people understand code and the systems behind it.

Figure 2 — An example of a simulation placed in a Notion-like page for examining the positions and front-to-back relationship of two rocks.

The screen shows two rocks, a table about position and depth, and information indicating which rock is in front or behind. Even while paused, the screen shows that an interactive view for checking state is embedded in a shared page, rather than only explanatory text. The detailed UI and implementation cannot be determined from this view. Relevant point in the video (09:11)

Useful Interactivity and Interactivity We Rely On Too Much

As a supplement, interactive figures are not always better than static pictures. If we make even content that does not need to show change interactive, learners may become distracted by the controls. If we provide only a moving figure without enough explanation, learners may rely on trial and error instead of understanding. The speaker also acknowledges that interactivity can be sloppy or become a crutch that hides a lack of understanding.

On the other hand, an interactive figure is useful when the correspondence between an action and its result can show a mechanism that a static picture cannot. The criterion is not whether it moves, but whether the interaction makes the relationship we want to understand visible.

This idea connects to the previous chapter's principle of showing intuition first. By moving a rock and seeing the state change, learners can develop a feel for how the system behaves before reading detailed code. The microworlds discussed in a later chapter extend this idea further by letting learners experience a system inside a small environment.