{term["left_value"]} x {term["right_value"]} = {term["product"]}
"""
)
equation = " + ".join(
f"{term['left_value']}x{term['right_value']}={term['product']}"
for term in terms
) or "0"
return f"""
Active diagonal: y{diagonal_index}
Highlight every cell where row index + column index = {diagonal_index}
Left polynomial
{"".join(_html_token(f"a{i}", str(value), fill="#edf6f9", border="#8ecae6") for i, value in enumerate(left))}
Right polynomial
{"".join(_html_token(f"b{i}", str(value), fill="#fef6e4", border="#f6bd60") for i, value in enumerate(right))}
{escape(title)}
Each highlighted product belongs to the same output coefficient.
Output coefficients after this sweep
{"".join(output_cells)}
Current diagonal terms
{"".join(equation_chips) or '
No terms yet.
'}
y{diagonal_index} = {escape(equation)} = {current["total"]}
"""
def schoolbook_diagonal_player(left: Sequence[int], right: Sequence[int]) -> widgets.Widget:
"""Interactive diagonal-by-diagonal walkthrough of schoolbook multiplication."""
rows = convolution_contributions(left, right)
frames = [
_convolution_frame_html(left, right, diagonal_index=index, title="Schoolbook multiplication as a moving diagonal")
for index in range(len(rows))
]
captions = [
f"Only the highlighted products contribute to y{row['output_index']}. Watch the diagonal sweep across the grid instead of imagining the sum in your head."
for row in rows
]
return _player_widget(
title="Convolution Diagonal Player",
subtitle="Press play. The highlighted diagonal is the coefficient being formed right now.",
frames=frames,
captions=captions,
)
def _wrap_row_html(
label: str,
cards: Sequence[str],
*,
background: str,
border: str,
subtitle: str,
) -> str:
columns = "150px " + " ".join(["minmax(66px, 1fr)"] * len(cards))
return f"""
Active source term: x^{current_index} = {current_value}
Track where this one term lands in x^n - 1 and x^n + 1.
{_wrap_row_html(
"Raw convolution tail",
raw_cards,
background=SVG_PANEL,
border="#e8dcc9",
subtitle="Highlighted card = the exact term moving right now.",
)}
{flow_cards}
{_wrap_row_html(
"Cyclic fold into x^n - 1",
cyclic_cards,
background="#f5fbff",
border="#c7e0ec",
subtitle=f"x^{current_index} lands in slot {slot} with sign {cyclic_label}.",
)}
{_wrap_row_html(
"Negacyclic fold into x^n + 1",
negacyclic_cards,
background="#fff6f1",
border="#efc7b8",
subtitle=f"x^{current_index} lands in slot {slot} with sign {neg_label}.",
)}
"""
def wraparound_comparison_player(coefficients: Sequence[int], n: int) -> widgets.Widget:
"""Interactive comparison of cyclic and negacyclic folding, one source term at a time."""
frames = [_wrap_compare_frame_html(coefficients, n, step) for step in range(len(coefficients))]
captions = []
for index, coefficient in enumerate(coefficients):
wraps, slot = divmod(index, n)
neg_sign = "-" if wraps % 2 else "+"
captions.append(
f"x^{index} with coefficient {coefficient} lands in slot {slot}. Cyclic folding keeps a + sign; negacyclic folding uses {neg_sign} after {wraps} wrap(s)."
)
return _player_widget(
title="Wraparound Step Player",
subtitle="Play one raw coefficient at a time and compare x^n-1 with x^n+1 side by side.",
frames=frames,
captions=captions,
)
def _direct_ntt_frame_svg(values: Sequence[int], modulus: int, psi: int, output_index: int, input_index: int) -> str:
exponents = ntt_psi_exponent_grid(len(values))
matrix = ntt_psi_matrix(len(values), modulus, psi)
cell = 62
width = 1040
height = 470
grid_x = 260
grid_y = 84
boxes_y = 360
contributions = []
for row, value in enumerate(values):
exponent = exponents[output_index][row]
factor = matrix[output_index][row]
product = (value * factor) % modulus
contributions.append((exponent, factor, product))
partial = sum(product for _, _, product in contributions[: input_index + 1]) % modulus
final = sum(product for _, _, product in contributions) % modulus
parts = [
_svg_canvas_open(width, height),
f'