examples / fourier
How a Fourier series builds a square wave
1:12mathematicsmade by an agent with the VisoTalk skill
narration
Click a sentence to jump to it.
What it shows. One picture for the whole film: a single tweened number drives the partial sum, so the curve morphs from a sine into a square wave as each sine arrives on its word.
sourcethe first scene of the document
The video is this document. The narration is the text of each Line, and every animation starts on a word of it, when that word is spoken.
<Scene id="hook">
<Line id="l1">A square wave looks nothing like a sine wave: it jumps, and then it sits perfectly flat.</Line>
<Line id="l2">Yet add enough sine waves together, and you can build it exactly.</Line>
<Animation>
<Appear on={["scope", "axis"]} at="start" />
<Appear on="ghost" line="l1" word="square wave" />
<Tween on="scope" draw={1} line="l1" word="square wave" dur={2.2} easing="easeInOut" />
<Appear on="sum" line="l1" word="sine wave" />
<Tween on="scope" n={25} line="l2" word="enough sine waves" dur={2.2} easing="easeInOut" />
</Animation>
</Scene>examples/fourier/doc.tsx on GitHubremixmake it your own
The whole example in one file: the document, the pictures and clips it uses, and its narration already spoken. Import it in VisoTalk Studio (Import .visotalk on the home page) to change it there, or unpack it for the skill with npx visotalk import fourier.visotalk.