Skip to content
Related Articles

Related Articles

Project Idea | Recurse and C

View Discussion
Improve Article
Save Article
  • Last Updated : 06 Jul, 2018
View Discussion
Improve Article
Save Article

Project Title: Recurse and C

When we study recursive functions, we all wish we could visualize and watch them run step-by-step and then rewind and rerun the code. In this way, we can gain better insights on how recursive functions works and when it stops. This will also help teachers explain the basics of recursion in a better manner. The application we created helps in doing that. This feature could also be integrated into GeeksforGeeks website.

Conceptual framework:

Recurse and C will pipe custom test cases through your code, and analyse your function’s call tree and visualize it. You can watch it happening in real-time and also rewind or go through the process step-by-step. It will also tell you the parent and children of the selected node. Several behavioral hooks/events are streamed from the emulated execution environment and mapped into a sequence of frames for visualization.

It also has the feature to save a code snippet and loading that code snippet for visualization. This helps with re-usability. We tried to keep the code base modular.

How does this work:

  • First Login or create an account after starting the setting up the project. After creating an account Login via that account.
  • We choose JavaScript for this project as it is easy to understand and work with. The user writes a JavaScript module, and then exports the entry point function to a target variable.
  • We then load the function and it’s Abstract Syntax Tree (AST) into a browser-side execution environment to perform a term rewrite on recursive rules to go through our proxy. This does not alter normal execution flow.
  • Flagged behavioural events are streamed to a visualiser module (in TypeScript).
  • The actions which have been processed are then transformed into a render-able data structure (AppGraph) and changes to that data structure are streamed to the Playback Component, which interprets events and applies differential changes to the render-able data-model for real-time updates.
  • A Model View Controller (MVC) pattern exposes controls to the Playback component for rewinding, animating, and stepping through the events.


Flow diagram

Initial flow diagram

UML diagram

UML diagram

Fibonacci recursive code and graph output

Fibonacci recursive code and graph output

Factorial using recursion

Factorial using recursion

Step by step output of factorial

Step by step output of factorial

Tools Used:

  • Vanilla JavaScript
  • HTML
  • CSS
  • Nginx server
  • Angular JS
  • d3.js
  • NodeJs
  • TypeScript

This project can be used by teachers for introducing students to recursion by visualization of the flow of the code. Students can also use it themselves for testing out functions and learning step by step working using beautiful, crisp and clear graphs which can be easily followed, retraced and understood. This can also be integrated as a feature in the GeeksforGeeks website.

Link to GitHub repository:

YouTube video link: Demo Video

Team Members:

  • Sayak Kundu
  • Kanav Gupta
  • Palash Agarwal
  • Madhur Garg

Note: This project idea is contributed for ProGeek Cup 2.0- A project competition by GeeksforGeeks.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!