A Next.js web application that transforms mathematical expressions into their lambda calculus representations and visualizes them using interactive Tromp diagrams, allowing users to step through reduction animations and see abstract computation in action.
Lambda calculus is a powerful mathematical notation for expressing computation, but its abstract nature makes it difficult to understand and visualize. Traditional text-based representations fail to convey the dynamic nature of lambda calculus operations, creating a barrier to learning and intuition, especially for visual learners. After watching a captivating video on lambda calculus visualizations at 2AM, I was inspired to create a tool that could make these abstract concepts tangible through interactive diagrams.
I developed an interactive web application using Next.js, TypeScript, and D3.js that transforms mathematical expressions into their lambda calculus representations and visualizes them as interactive Tromp diagrams. The application allows users to input expressions through a calculator interface and see them rendered as node-based visualizations with different shapes representing variables (circles), abstractions (diamonds), and applications (rectangles). Users can step through computation processes with animated transitions between reduction steps, making abstract mathematical concepts tangible and easier to understand. I implemented a node tree-based graph approach that balances visual clarity with technical feasibility, focusing on proper centering and canvas management to handle the varying shapes of different computation steps.
Coming into the project with limited knowledge of lambda calculus theory, requiring rapid learning and reliance on LLMs to grasp the fundamental concepts.
Finding a way to graphically represent Tromp diagrams in a web application when most existing implementations were in Haskell and not easily adaptable to JavaScript/TypeScript.
Having to compromise between the ideal geometric visualization seen in the inspiring video and a more pragmatic graph node approach that was feasible to implement within the time constraints.
Leveraged a 'vibe coding' approach with LLMs as guides to quickly understand lambda calculus concepts and implement them without extensive prior knowledge.
Adapted the visualization approach from ideal geometric representations to a more practical graph node-based system that could be implemented with D3.js within the time constraints.
Focused on creating an intuitive calculator interface that converts mathematical expressions to lambda calculus and visualizes them as interactive Tromp diagrams with step-by-step animation.
While D3.js is typically used for data visualization, I adapted it to render abstract mathematical structures. This required creating a custom force-directed graph layout that could handle the unique requirements of Tromp diagrams, including proper node positioning and connection rendering.
I implemented a parser that converts mathematical expressions into their lambda calculus equivalents using Church encodings. This translation layer bridges the gap between familiar arithmetic and the more abstract lambda calculus notation.