How to use the pseudo code visualizer

Creating a new PseudoCodeData

Let's look at an example of creating a new resource to describe the pseudo code of the BFS algorithm. For this example, I'll use the following pseudo code:

Q ← new Queue()
S ← {s}
Q.enqueue(s)

while Q ≠ ∅ do
	u ← Q.dequeue()
	for each v ∈ Adj[u] do
		if v ∉ S then
			S ← S ∪ {v}
			Q.enqueue(v)
		end if
	end for
end while

The first step will be to click "Create new" -> "Resource" in the Godot's file system where you want the resource to be placed. You will be greeted with a new screen to choose your resource. Look for PseudoCodeData:

Choose it, and name it. I'll call it BFS and store it in the pseudo code folder.

Now you can see your Pseudo resource in the file system. Click it twice and look at the inspector on the right:

The interesting field is "Source text" under "Editor tools". This is where you write your pseudo code, and describe how it should be highlighted.

Highlighting syntax

The Pseudo code resource is a smart tool. It can deduce the highlighting you want based on a syntax I defined. The syntax is simple and goes as so: End a line with --<NUMBER>,<NUMBER>,... to describe what steps should highlight this line. For example, look at this simple pseudo code:

while X
    do y
    do z
end while

Let's assume we want the while to be highlighted throughout the loop, and highlight each step when it happens. To achieve this behavior, we'll do something like this:

while X --1,2,3
    do y --2
    do z --3
end while --4

We now said: " The while line should be highlighted in steps 1,2,3. do y Should be highlighted in step 2. do z should be highlighted in step 3. And end while should be highlighted in step 4."

Now let's do the same for the BFS pseudo code from the example above:

Q ← new Queue()--1
S ← {s}--2
Q.enqueue(s)--3

while Q ≠ ∅ do--4,5,6,7,8,9,10,11
	u ← Q.dequeue()--5
	for each v ∈ Adj[u] do--6
		if v ∉ S then--7
			S ← S ∪ {v}--8
			Q.enqueue(v)--9
		end if--10
	end for--11
end while--12

Nice! We now encoded the highlighting logic for our resource. We can place it inside "Source text" under "Editor tools":

But we are not done yet. We now need to tell the tool to process the data we inputted, and generate actual steps for the code to use. We do that by clicking the "generate" box right below the text box.. This will tell the tool to process the data. After we did that, we'll notice "runtime data" has changed:

The tool has create arrays that store the lines to highlight in each step (e.g. [[0,1],[2]] means "First step = highlight lines 1,2. Second step = highlight line 3"). This data will be used by the visualizer.

We have now finished creating the resource to describe the BFS pseudo code!

Setting up the visualizer

Ok, we created the new resource. But without the visualizer, it is meaningless. Let's add the visualizer to the main scene just to see how we can use it.

For this example, we will drag the visualizer scene onto the canvas layer in the main scene. You should see something like this:

But nothing will yet change on the screen. Both in the editor, and when the app is running. Why? Because we didn't assign it a PseudoCodeData resource!

Let's click on the new node and look at the inspector:

Notice the spot for "Data"? Click on it, and choose "quick load". You should see all the resources matching in our file system. I will choose the BFS resource I just created:

After you've done this, you should already see the pseudo code on the screen! Even though the app is not running:

This is because the visualizer is also a TOOL (@tool). Which means it runs in the editor as well! Why that's good? We can play around with it in the editor and get instant feedback! For example, remember the inspector tab of the visualizer node?

Try to play around with the parameters here (Colors, index, etc..). You will see the pseudo code changes live before your eyes! Pretty cool huh?