The Visual Debugger for Recursive Functions

By Charles NogeeAdvisor: Dr. Bonomo

IntroductionIntroduction

Goal: A visual representation of recursive

functionsUses: Debugging Pedagogical

DefinitionsDefinitions

ProgramProgramming LanguageCompilers/Compile timeRuntimeErrors

Compile timeRun timeLogical

Debugging StepsDebugging Steps

1. Recognize error2. Find the error in the code3. Determine how that spot relates to program

Debugger EvolutionDebugger Evolution

Command Line drivenText for the names and values of variablesKeyboard Input/Text OutputVarious breakpointsSingle Stepping

Graphic User Interface (GUI)Show the code executingReveal values of variables by clicking on themStill just names and values of variables

Current DebuggersCurrent Debuggers

GNU DebuggerDDDJTracerSwingDebugger

VisualizationVisualization

Sight provides the most understandingFor Effective Visualization (Stasko, et al., 93)

Include detailed text instructionsLink with instructional goalsPerform user testingInclude rewind/replay functions

RecursionRecursion

A recursive function is one that can call itselfBreaks large problems into small problemsBase casesTaught early in computer science courses

Taught at Westminster in CS 152, the second CS course

Factorial ExampleFactorial Example

n!=n*(n-1)*(n-2)*…*3*2*1In recursive form

n!=1 if n=1n!=n*(n-1)! if n>1

In Computer CodeFactorial(n){

If(n==1)Return 1;

elsereturn n*factorial(n-1); }

Factorial ExampleFactorial ExampleFactorial(4)

4*Factorial(3)

3*Factorial(2)

2*Factorial(1)

1

2*12

3*26

4*624

Fibonacci SequenceFibonacci Sequence

0,1,1,2,3,5,8,13,21,34,55,89,144…The next number is the previous two addedFib(n){ if(n=0) return 0; else if (n=1) return 1; else return Fib(n-1)+Fib(n-2); }

Typical problems using recursion

Typical problems using recursion

Missing, incorrect, or too exclusive base case Factorial can only work for nonnegative integers

Exorbitant and repetitive branching Fibonacci requires calculations to be repeated.

The Recursive DebuggerThe Recursive Debugger

Goal-Visually depict recursive functionsUse of tree structure

Downward branchingOutward branching

Function BoxParameters, Return values, Received values

RecursionDebugger ClassRecursionDebugger Class

Software to create, update, and maintain display window

Evolved over 2 semestersCommand line basedGUI based

Requires tags to be inserted in user’s code

TagsTags

Three classesCreate instanceGather parametersGather return and received values

Factorial Before Tags added

Factorial Before Tags added

public class Fact{ public static void main(String args[]){ System.out.println(fact(Integer.parseInt(args[0])));} public static int fact(int n){ if (n==1){ return 1; } else{ int val=fact(n-1); return (n*val); }}}

Factorial with TagsFactorial with Tags public class Fact{ public static RecursionDebugger hp=new RecursionDebugger("fact", false); public static void main(String args[]){ System.out.println(fact(Integer.parseInt(args[0])));} public static int fact(int n){ hp.createNewBox(); hp.setNextParameter(""+n, "n"); hp.endParameters(); if (n==1){ hp.changeCurrentAndReturn("1"); return 1; } else{ int val=fact(n-1); hp.updateReceived(val+""); hp.changeCurrentAndReturn((n*val)+""); return (n*val); }}}

Debugger WindowDebugger Window

Example Displays-FactorialExample Displays-Factorial

Example Displays-MergeSort

Example Displays-MergeSort

Example Displays-N Queens

Example Displays-N Queens

OpenGL for JavaOpenGL for Java

Debugger required graphics packageOpenGL chosenJogl was chosen due to ease of use

Tree StorageTree Storage

Arrays-too much mappingBinary tree-not enough childrenThree Pointer method-parent, first child, next

sibling

Drawing the TreeDrawing the Tree when endParameters() and

changeCurrentAndReturn() are calledEach box’s placement is relative to parent or siblingEach box contains two displacement fields

transxtransy

Updating TranslationUpdating Translation

Updating Translation 2Updating Translation 2

Updating Translation 3Updating Translation 3

Updating Translation 4Updating Translation 4

LetterDrawer ClassLetterDrawer Class

Jogl lacked text drawing abilitiesImplemented class to use OpenGL to draw

lettersTranslates to appropriate spotaddChar()Done for parameters, return values, received

values

User FeaturesUser Features

StepRun ThroughCurrent PathArrow KeysCenter Window

This is where you do the demonstration, Chuck

This is where you do the demonstration, Chuck

Future PossibilitiesFuture Possibilities

Program RewindOther language ImplementationsGlobal variablesMultiple recursive functionsCollapsible treeAutomatic Tag Insertion

ConclusionsConclusions

Met our design goalsWorks for a wide variety of recursive functions

Visualization criteriaInclude detailed text instructionsLink with instructional goals