Project Idea | Recurse and C

Project Title: Recurse and C

Introduction:
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.

Diagrams: 

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

Application:
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: https://github.com/sayak119/Recurse-and-C

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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.