JamesFlare/CSCI-1200
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updating hash table animation

Browse Source
This commit is contained in:
Jidong Xiao
2025-04-29 01:31:22 -04:00
committed by JamesFlare1212
parent cc21696e46
commit 506ab00200
1 changed files with 734 additions and 659 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
animations/hash_tables/main.js
View File

@@ -98,9 +98,10 @@ const steps =
{mainHighlight: [2], funcHighlight: [15], action: null, console: "Creating new node"},
{mainHighlight: [2], funcHighlight: [16], action: null, console: "Setting name: dan"},
{mainHighlight: [2], funcHighlight: [17], action: null, console: "Setting number: 5182764321"},
{mainHighlight: [2], funcHighlight: [18], action: null, console: "Setting next pointer"},
{mainHighlight: [2], funcHighlight: [19], action: {type: 'add', index: 1, name: 'dan', number: '5182764321'}, console: "Adding node to index 1"},
{mainHighlight: [2], funcHighlight: [20], action: null, console: "Returning from add function"},
{mainHighlight: [2], funcHighlight: [18], action: {type: 'highlight_memory', index: 1, color: '#00FF00'}, console: "Setting next pointer"},
{mainHighlight: [2], funcHighlight: [19], action: {type: 'add', index: 1, name: 'dan', number: '5182764321', color: '#0000FF'}, console: "Adding node to index 1"},
{mainHighlight: [2], funcHighlight: [20], action: {type: 'highlight_memory', index: 1, color: '#343434'}, console: "Returning from add function"},
{mainHighlight: [2], funcHighlight: [20], action: {type: 'highlight_person', index: 1, name: 'dan', number: '5182764321', color: '#222'}, console: "Returning from add function"},
// Add fred
{mainHighlight: [3], funcHighlight: [], action: null, console: "Adding entry: fred (6173551212)"},
@@ -112,9 +113,10 @@ const steps =
{mainHighlight: [3], funcHighlight: [15], action: null, console: "Creating new node"},
{mainHighlight: [3], funcHighlight: [16], action: null, console: "Setting name: fred"},
{mainHighlight: [3], funcHighlight: [17], action: null, console: "Setting number: 6173551212"},
{mainHighlight: [3], funcHighlight: [18], action: null, console: "Setting next pointer"},
{mainHighlight: [3], funcHighlight: [19], action: {type: 'add', index: 2, name: 'fred', number: '6173551212'}, console: "Adding node to index 2"},
{mainHighlight: [3], funcHighlight: [20], action: null, console: "Returning from add function"},
{mainHighlight: [3], funcHighlight: [18], action: {type: 'highlight_memory', index: 2, color: '#00FF00'}, console: "Setting next pointer"},
{mainHighlight: [3], funcHighlight: [19], action: {type: 'add', index: 2, name: 'fred', number: '6173551212', color: '#0000FF'}, console: "Adding node to index 2"},
{mainHighlight: [3], funcHighlight: [20], action: {type: 'highlight_memory', index: 2, color: '#343434'}, console: "Returning from add function"},
{mainHighlight: [3], funcHighlight: [20], action: {type: 'highlight_person', index: 2, name: 'fred', number: '6173551212', color: '#222'}, console: "Returning from add function"},
// Add alice
{mainHighlight: [4], funcHighlight: [], action: null, console: "Adding entry: alice (5182761234)"},
@@ -126,9 +128,10 @@ const steps =
{mainHighlight: [4], funcHighlight: [15], action: null, console: "Creating new node"},
{mainHighlight: [4], funcHighlight: [16], action: null, console: "Setting name: alice"},
{mainHighlight: [4], funcHighlight: [17], action: null, console: "Setting number: 5182761234"},
{mainHighlight: [4], funcHighlight: [18], action: null, console: "Setting next pointer"},
{mainHighlight: [4], funcHighlight: [19], action: {type: 'add', index: 4, name: 'alice', number: '5182761234'}, console: "Adding node to index 4"},
{mainHighlight: [4], funcHighlight: [20], action: null, console: "Returning from add function"},
{mainHighlight: [4], funcHighlight: [18], action: {type: 'highlight_memory', index: 4, color: '#00FF00'}, console: "Setting next pointer"},
{mainHighlight: [4], funcHighlight: [19], action: {type: 'add', index: 4, name: 'alice', number: '5182761234', color: '#0000FF'}, console: "Adding node to index 4"},
{mainHighlight: [4], funcHighlight: [20], action: {type: 'highlight_memory', index: 4, color: '#343434'}, console: "Returning from add function"},
{mainHighlight: [4], funcHighlight: [20], action: {type: 'highlight_person', index: 4, name: 'alice', number: '5182761234', color: '#222'}, console: "Returning from add function"},
// Add carol
{mainHighlight: [5], funcHighlight: [], action: null, console: "Adding entry: carol (5182761267)"},
@@ -140,9 +143,10 @@ const steps =
{mainHighlight: [5], funcHighlight: [15], action: null, console: "Creating new node"},
{mainHighlight: [5], funcHighlight: [16], action: null, console: "Setting name: carol"},
{mainHighlight: [5], funcHighlight: [17], action: null, console: "Setting number: 5182761267"},
{mainHighlight: [5], funcHighlight: [18], action: null, console: "Setting next pointer"},
{mainHighlight: [5], funcHighlight: [19], action: {type: 'add', index: 7, name: 'carol', number: '5182761267'}, console: "Adding node to index 7"},
{mainHighlight: [5], funcHighlight: [20], action: null, console: "Returning from add function"},
{mainHighlight: [5], funcHighlight: [18], action: {type: 'highlight_memory', index: 7, color: '#00FF00'}, console: "Setting next pointer"},
{mainHighlight: [5], funcHighlight: [19], action: {type: 'add', index: 7, name: 'carol', number: '5182761267', color: '#0000FF'}, console: "Adding node to index 7"},
{mainHighlight: [5], funcHighlight: [20], action: {type: 'highlight_memory', index: 7, color: '#343434'}, console: "Returning from add function"},
{mainHighlight: [5], funcHighlight: [20], action: {type: 'highlight_person', index: 7, name: 'carol', number: '5182761267', color: '#222'}, console: "Returning from add function"},
// Add bob
{mainHighlight: [6], funcHighlight: [], action: null, console: "Adding entry: bob (5182765678)"},
@@ -154,9 +158,10 @@ const steps =
{mainHighlight: [6], funcHighlight: [15], action: null, console: "Creating new node"},
{mainHighlight: [6], funcHighlight: [16], action: null, console: "Setting name: bob"},
{mainHighlight: [6], funcHighlight: [17], action: null, console: "Setting number: 5182765678"},
{mainHighlight: [6], funcHighlight: [18], action: null, console: "Setting next pointer"},
{mainHighlight: [6], funcHighlight: [19], action: {type: 'add', index: 8, name: 'bob', number: '5182765678'}, console: "Adding node to index 8"},
{mainHighlight: [6], funcHighlight: [20], action: null, console: "Returning from add function"},
{mainHighlight: [6], funcHighlight: [18], action: {type: 'highlight_memory', index: 8, color: '#00FF00'}, console: "Setting next pointer"},
{mainHighlight: [6], funcHighlight: [19], action: {type: 'add', index: 8, name: 'bob', number: '5182765678', color: '#0000FF'}, console: "Adding node to index 8"},
{mainHighlight: [6], funcHighlight: [20], action: {type: 'highlight_memory', index: 8, color: '#343434'}, console: "Returning from add function"},
{mainHighlight: [6], funcHighlight: [20], action: {type: 'highlight_person', index: 8, name: 'bob', number: '5182765678', color: '#222'}, console: "Returning from add function"},
// Add erin
{mainHighlight: [7], funcHighlight: [], action: null, console: "Adding entry: erin (5182764488)"},
@@ -168,9 +173,10 @@ const steps =
{mainHighlight: [7], funcHighlight: [15], action: null, console: "Creating new node"},
{mainHighlight: [7], funcHighlight: [16], action: null, console: "Setting name: erin"},
{mainHighlight: [7], funcHighlight: [17], action: null, console: "Setting number: 5182764488"},
{mainHighlight: [7], funcHighlight: [18], action: null, console: "Setting next pointer"},
{mainHighlight: [7], funcHighlight: [19], action: {type: 'add', index: 8, name: 'erin', number: '5182764488', chain: true}, console: "Adding node to index 8 (chaining)"},
{mainHighlight: [7], funcHighlight: [20], action: null, console: "Returning from add function"},
{mainHighlight: [7], funcHighlight: [18], action: {type: 'highlight_memory', index: 8, color: '#00FF00'}, console: "Setting next pointer"},
{mainHighlight: [7], funcHighlight: [19], action: {type: 'add', index: 8, name: 'erin', number: '5182764488', chain: true, color: '#0000FF'}, console: "Adding node to index 8 (chaining)"},
{mainHighlight: [7], funcHighlight: [20], action: {type: 'highlight_memory', index: 8, color: '#343434'}, console: "Returning from add function"},
{mainHighlight: [7], funcHighlight: [20], action: {type: 'highlight_person', index: 8, name: 'erin', number: '5182764488', color: '#222'}, console: "Returning from add function"},
// Identify dan
{mainHighlight: [8], funcHighlight: [], action: null, console: "Searching for number: 5182764321"},
@@ -179,12 +185,12 @@ const steps =
{mainHighlight: [8], funcHighlight: [10], action: null, console: "Entering hash_function"},
{mainHighlight: [8], funcHighlight: [11], action: null, console: "5182764321 % 10 = 1"},
{mainHighlight: [8], funcHighlight: [22], action: null, console: "Hash index: 1"},
{mainHighlight: [8], funcHighlight: [23], action: null, console: "Starting search at index 1"},
{mainHighlight: [8], funcHighlight: [23], action: {type: 'highlight_memory', index: 1, color: '#00FF00'}, console: "Starting search at index 1"},
{mainHighlight: [8], funcHighlight: [24], action: null, console: "phonebook[1] is not nullptr(true)"},
{mainHighlight: [8], funcHighlight: [25], action: null, console: "5182764321 == 5182764321(true)"},
{mainHighlight: [8], funcHighlight: [26], action: null, console: "Returning: dan"},
{mainHighlight: [8], funcHighlight: [31], action: null, console: "Returning from identify function"},
{mainHighlight: [8], funcHighlight: [], action: null, console: "Identify 5182764321: dan"},
{mainHighlight: [8], funcHighlight: [26], action: {type: 'idan', index: 1, name: 'dan', color: '#0000FF'}, console: "Returning: dan"},
{mainHighlight: [8], funcHighlight: [31], action: {type: 'idan', index: 1, name: 'dan', color: '#222'}, console: "Returning from identify function"},
{mainHighlight: [8], funcHighlight: [], action: {type: 'highlight_memory', index: 1, color: '#343434'}, console: "Identify 5182764321: dan"},
// Identify erin
{mainHighlight: [9], funcHighlight: [], action: null, console: "Searching for number: 5182764488"},
@@ -193,15 +199,15 @@ const steps =
{mainHighlight: [9], funcHighlight: [10], action: null, console: "Entering hash_function"},
{mainHighlight: [9], funcHighlight: [11], action: null, console: "5182764488 % 10 = 8"},
{mainHighlight: [9], funcHighlight: [22], action: null, console: "Hash index: 8"},
{mainHighlight: [9], funcHighlight: [23], action: null, console: "Starting search at index 8"},
{mainHighlight: [9], funcHighlight: [23], action: {type: 'highlight_memory', index: 8, color: '#00FF00'}, console: "Starting search at index 8"},
{mainHighlight: [9], funcHighlight: [24], action: null, console: "phonebook[8] is not nullptr(true)"},
{mainHighlight: [9], funcHighlight: [25], action: null, console: "5182765678 != 5182764488(false)"},
{mainHighlight: [9], funcHighlight: [28], action: null, console: "Moving to next node"},
{mainHighlight: [9], funcHighlight: [24], action: null, console: "phonebook[8]->next is not nullptr(true)"},
{mainHighlight: [9], funcHighlight: [25], action: null, console: "5182764488 == 5182764488(true)"},
{mainHighlight: [9], funcHighlight: [26], action: null, console: "Returning: erin"},
{mainHighlight: [9], funcHighlight: [31], action: null, console: "Returning from identify function"},
{mainHighlight: [9], funcHighlight: [], action: null, console: "Identify 5182764488: erin"},
{mainHighlight: [9], funcHighlight: [26], action: {type: 'ierin', index: 8, name: 'erin', color: '#0000FF'}, console: "Returning: erin"},
{mainHighlight: [9], funcHighlight: [31], action: {type: 'ierin', index: 8, name: 'erin', color: '#222'}, console: "Returning from identify function"},
{mainHighlight: [9], funcHighlight: [], action: {type: 'highlight_memory', index: 8, color: '#343434'}, console: "Identify 5182764488: erin"},
// Identify fred
{mainHighlight: [10], funcHighlight: [], action: null, console: "Searching for number: 6173551212"},
@@ -210,12 +216,12 @@ const steps =
{mainHighlight: [10], funcHighlight: [10], action: null, console: "Entering hash_function"},
{mainHighlight: [10], funcHighlight: [11], action: null, console: "6173551212 % 10 = 2"},
{mainHighlight: [10], funcHighlight: [22], action: null, console: "Hash index: 2"},
{mainHighlight: [10], funcHighlight: [23], action: null, console: "Starting search at index 2"},
{mainHighlight: [10], funcHighlight: [23], action: {type: 'highlight_memory', index: 2, color: '#00FF00'}, console: "Starting search at index 2"},
{mainHighlight: [10], funcHighlight: [24], action: null, console: "phonebook[2] is not nullptr(true)"},
{mainHighlight: [10], funcHighlight: [25], action: null, console: "6173551212 == 6173551212(true)"},
{mainHighlight: [10], funcHighlight: [26], action: null, console: "Returning: fred"},
{mainHighlight: [10], funcHighlight: [31], action: null, console: "Returning from identify function"},
{mainHighlight: [10], funcHighlight: [], action: null, console: "Identify 6173551212: fred"},
{mainHighlight: [10], funcHighlight: [26], action: {type: 'ifred', index: 2, name: 'fred', color: '#0000FF'}, console: "Returning: fred"},
{mainHighlight: [10], funcHighlight: [31], action: {type: 'ifred', index: 2, name: 'fred', color: '#222'}, console: "Returning from identify function"},
{mainHighlight: [10], funcHighlight: [], action: {type: 'highlight_memory', index: 2, color: '#343434'}, console: "Identify 6173551212: fred"},
// Identify not found
{mainHighlight: [11], funcHighlight: [], action: null, console: "Searching for number: 1234567890"},
@@ -281,9 +287,34 @@ function nextstep()
highlightCodeLines(step.mainHighlight, step.funcHighlight);
// Perform the action first
if (step.action && step.action.type === 'add')
if (step.action)
{
addNodeToMemory(step.action.index, step.action.name, step.action.number, step.action.chain);
if (step.action.type === 'add')
{
addNodeToMemory(step.action.index, step.action.name, step.action.number, step.action.chain, step.action.color);
}
else if (step.action.type === 'highlight_memory')
{
highlightMemoryBox(step.action.index, step.action.color);
}
else if (step.action.type === 'idan')
{
highlightPersonBox(step.action.index, step.action.name, 5182764321, step.action.color);
}
else if (step.action.type === 'ierin')
{
highlightPersonBox(step.action.index, step.action.name, 5182764488, step.action.color);
}
else if (step.action.type === 'ifred')
{
highlightPersonBox(step.action.index, step.action.name, 6173551212, step.action.color);
}
else if (step.action.type === 'highlight_person')
{
highlightPersonBox(step.action.index, step.action.name, step.action.number, step.action.color);
}
}
// Then show the console message
if (step.console)
{
@@ -292,23 +323,6 @@ function nextstep()
layer.draw();
++stepIndex;
}
else if (step.action && step.action.type === 'identify')
{
highlightIdentifyPath(step.action.index, step.action.path);
}
else
{
// No action, just show console message
if (step.console)
{
addConsoleText(step.console);
}
layer.draw();
++stepIndex;
}
}
window.nextstep = nextstep;
@@ -577,7 +591,7 @@ for (let i = 0; i < funcCodeLines.length; ++i)
let memoryNodes = {};
function addNodeToMemory(index, name, number, chain = false)
function addNodeToMemory(index, name, number, chain = false, color = '#222')
{
if (!memoryNodes[index]) memoryNodes[index] = [];
let y = 60 + index * 50 + 10;
@@ -593,8 +607,8 @@ function addNodeToMemory(index, name, number, chain = false)
width: 100,
height: 30,
fill: '#fff',
stroke: '#222',
strokeWidth: 2,
stroke: color,
strokeWidth: 4,
cornerRadius: 5,
});
@@ -602,7 +616,7 @@ function addNodeToMemory(index, name, number, chain = false)
({
x: x + 5,
y: y + 2,
text: number,
text: String(number),
fontSize: 12,
fontFamily: 'Consolas',
fill: '#333',
@@ -657,3 +671,64 @@ function addNodeToMemory(index, name, number, chain = false)
layer.add(arrow);
memoryNodes[index].push({group, arrow});
}
function highlightMemoryBox(index, color)
{
// Find the memory box by its ID
const memoryBox = layer.findOne('#brec' + index);
if (memoryBox)
{
memoryBox.stroke(color);
memoryBox.strokeWidth(5);
layer.draw();
}
}
function highlightPersonBox(index, name, number, color)
{
let y = 60 + index * 50 + 10;
let x = 1725 + (memoryNodes[index].length - 1) * 150;
// Draw node group (rectangle + text)
let group = new Konva.Group();
let nodeRect = new Konva.Rect
({
x: x,
y: y,
width: 100,
height: 30,
fill: '#fff',
stroke: color,
strokeWidth: 4,
cornerRadius: 5,
});
let numberText = new Konva.Text
({
x: x + 5,
y: y + 2,
text: String(number),
fontSize: 12,
fontFamily: 'Consolas',
fill: '#333',
});
let nameText = new Konva.Text
({
x: x + 5,
y: y + 15,
text: name,
fontSize: 15,
fontFamily: 'Calibri',
fill: '#000',
fontStyle: 'bold',
});
group.add(nodeRect);
group.add(numberText);
group.add(nameText);
layer.add(group);
layer.draw();
}