adding iterative animation again
This commit is contained in:
Jidong Xiao
committed by
JamesFlare1212
JamesFlare1212
parent
421ae870a4
commit
3fd45d0b8c
275
animations/trees/iterative/traversal.js
Normal file
275
animations/trees/iterative/traversal.js
Normal file
@@ -0,0 +1,275 @@
|
||||
// In-Order / Pre-Order / Post-Order Traversal Visualization (combined)
|
||||
|
||||
//canvas dimensions for tree visualization
|
||||
const width = window.innerWidth * 0.9 * 0.75;
|
||||
const height = 600;
|
||||
|
||||
//create the main stage and layer for the tree
|
||||
const stage = new Konva.Stage({
|
||||
container: 'tree-container',
|
||||
width: width,
|
||||
height: height
|
||||
});
|
||||
const layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
//adjusted positions: node 9 is left child of 8
|
||||
const positions = {
|
||||
1: { x: width / 2, y: 80 },
|
||||
2: { x: width / 2 - 200, y: 180 },
|
||||
3: { x: width / 2 + 200, y: 180 },
|
||||
4: { x: width / 2 - 300, y: 280 },
|
||||
5: { x: width / 2 - 100, y: 280 },
|
||||
6: { x: width / 2 - 150, y: 380 },
|
||||
7: { x: width / 2 - 50, y: 380 },
|
||||
8: { x: width / 2 + 300, y: 280 },
|
||||
9: { x: width / 2 + 250, y: 380 } // left child of 8
|
||||
};
|
||||
|
||||
//tree structure
|
||||
const tree = {
|
||||
val: 1,
|
||||
left: {
|
||||
val: 2,
|
||||
left: { val: 4, left: null, right: null },
|
||||
right: {
|
||||
val: 5,
|
||||
left: { val: 6, left: null, right: null },
|
||||
right: { val: 7, left: null, right: null }
|
||||
}
|
||||
},
|
||||
right: {
|
||||
val: 3,
|
||||
left: null,
|
||||
right: {
|
||||
val: 8,
|
||||
left: { val: 9, left: null, right: null },
|
||||
right: null
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//store node references for highlighting
|
||||
const nodes = {};
|
||||
|
||||
//recursive tree draw with shortened lines
|
||||
function drawTree(node, parent = null) {
|
||||
if (!node) return;
|
||||
const pos = positions[node.val];
|
||||
if (parent) {
|
||||
const p = positions[parent.val];
|
||||
const dx = pos.x - p.x, dy = pos.y - p.y;
|
||||
const dist = Math.sqrt(dx*dx + dy*dy);
|
||||
const offX = (dx/dist)*20, offY = (dy/dist)*20;
|
||||
layer.add(new Konva.Line({
|
||||
points: [p.x + offX, p.y + offY, pos.x - offX, pos.y - offY],
|
||||
stroke: 'black', strokeWidth: 2
|
||||
}));
|
||||
}
|
||||
const circle = new Konva.Circle({ x: pos.x, y: pos.y, radius: 20, fill: 'white', stroke: 'black', strokeWidth: 2 });
|
||||
const text = new Konva.Text({ x: pos.x - 5, y: pos.y - 8, text: node.val.toString(), fontSize: 16, fill: 'black' });
|
||||
layer.add(circle);
|
||||
layer.add(text);
|
||||
nodes[node.val] = { circle, text };
|
||||
drawTree(node.left, node);
|
||||
drawTree(node.right, node);
|
||||
}
|
||||
|
||||
//stack visualization setup
|
||||
const stackStage = new Konva.Stage({ container: 'stack-visual', width: 200, height: 500 });
|
||||
const stackLayer = new Konva.Layer();
|
||||
stackStage.add(stackLayer);
|
||||
let stackVisual = [];
|
||||
|
||||
function pushStack(val) {
|
||||
const box = new Konva.Rect({ x: 50, y: 400 - stackVisual.length * 30, width: 40, height: 25, fill: '#89CFF0', stroke: 'black' });
|
||||
const label = new Konva.Text({ x: 60, y: 405 - stackVisual.length * 30, text: val.toString(), fontSize: 16, fill: 'black' });
|
||||
stackLayer.add(box);
|
||||
stackLayer.add(label);
|
||||
stackVisual.push({ box, label });
|
||||
stackLayer.draw();
|
||||
}
|
||||
|
||||
function popStack() {
|
||||
const item = stackVisual.pop();
|
||||
if (item) {
|
||||
item.box.destroy();
|
||||
item.label.destroy();
|
||||
stackLayer.draw();
|
||||
}
|
||||
}
|
||||
|
||||
function highlight(val, color = 'yellow') {
|
||||
const n = nodes[val];
|
||||
if (n) {
|
||||
n.circle.fill(color);
|
||||
layer.draw();
|
||||
}
|
||||
}
|
||||
|
||||
function resetHighlights() {
|
||||
for (let v in nodes) {
|
||||
nodes[v].circle.fill('white');
|
||||
}
|
||||
layer.draw();
|
||||
}
|
||||
|
||||
function updateStatus(current, reason) {
|
||||
document.getElementById('currentVal').innerText = current ?? 'None';
|
||||
document.getElementById('reason').innerText = reason;
|
||||
}
|
||||
|
||||
function logVisit(val) {
|
||||
document.getElementById('seq').innerText += ` ${val}`;
|
||||
}
|
||||
|
||||
//traversal state
|
||||
let current = tree;
|
||||
const stack = [];
|
||||
let stepReady = true;
|
||||
let lastVisited = null;
|
||||
|
||||
//final sequences for display
|
||||
const finalSeqs = {
|
||||
'In-Order': '4 2 6 5 7 1 3 8 9',
|
||||
'Pre-Order': '1 2 4 5 6 7 3 8 9',
|
||||
'Post-Order': '4 6 7 5 2 9 8 3 1'
|
||||
};
|
||||
|
||||
//create tabs dynamically
|
||||
const modes = ['In-Order', 'Pre-Order', 'Post-Order'];
|
||||
let currentMode = modes[0];
|
||||
const tabsDiv = document.createElement('div');
|
||||
tabsDiv.id = 'tabs';
|
||||
tabsDiv.style.textAlign = 'center';
|
||||
tabsDiv.style.margin = '10px';
|
||||
modes.forEach((mode) => {
|
||||
const btn = document.createElement('button');
|
||||
btn.innerText = mode;
|
||||
btn.className = 'tab-btn';
|
||||
btn.style.margin = '0 5px';
|
||||
btn.onclick = () => {
|
||||
currentMode = mode;
|
||||
document.querySelectorAll('.tab-btn').forEach((b) => (b.style.fontWeight = 'normal'));
|
||||
btn.style.fontWeight = 'bold';
|
||||
document.getElementById('final-seq').innerHTML = `<strong>Final Sequence (${mode}):</strong> ${finalSeqs[mode]}`;
|
||||
resetAll();
|
||||
};
|
||||
if (mode === currentMode) btn.style.fontWeight = 'bold';
|
||||
tabsDiv.appendChild(btn);
|
||||
});
|
||||
document.body.insertBefore(tabsDiv, document.getElementById('main-container'));
|
||||
document.getElementById('final-seq').innerHTML = `<strong>Final Sequence (${currentMode}):</strong> ${finalSeqs[currentMode]}`;
|
||||
|
||||
//step functions for each traversal
|
||||
function stepInOrder() {
|
||||
if (current) {
|
||||
highlight(current.val, 'yellow');
|
||||
updateStatus(current.val, `Push ${current.val} into stack`);
|
||||
stack.push(current);
|
||||
pushStack(current.val);
|
||||
current = current.left;
|
||||
stepReady = true;
|
||||
return;
|
||||
}
|
||||
if (stack.length > 0) {
|
||||
const peek = stack[stack.length - 1];
|
||||
updateStatus(peek.val, `Peek stack (current = ${peek.val})`);
|
||||
current = stack.pop();
|
||||
popStack();
|
||||
updateStatus(current.val, `Visit ${current.val}`);
|
||||
highlight(current.val, 'orange');
|
||||
logVisit(current.val);
|
||||
setTimeout(() => {
|
||||
resetHighlights();
|
||||
current = current.right;
|
||||
stepReady = true;
|
||||
}, 500);
|
||||
} else {
|
||||
updateStatus('None', 'Done');
|
||||
}
|
||||
}
|
||||
|
||||
function stepPreOrder() {
|
||||
if (current) {
|
||||
updateStatus(current.val, `Visit ${current.val}`);
|
||||
highlight(current.val, 'orange');
|
||||
logVisit(current.val);
|
||||
updateStatus(current.val, `Push ${current.val} into stack`);
|
||||
stack.push(current);
|
||||
pushStack(current.val);
|
||||
current = current.left;
|
||||
stepReady = true;
|
||||
return;
|
||||
}
|
||||
if (stack.length > 0) {
|
||||
const node = stack.pop();
|
||||
popStack();
|
||||
updateStatus(node.val, `Move to right of ${node.val}`);
|
||||
current = node.right;
|
||||
stepReady = true;
|
||||
} else {
|
||||
updateStatus('None', 'Done');
|
||||
}
|
||||
}
|
||||
|
||||
function stepPostOrder() {
|
||||
if (current) {
|
||||
highlight(current.val, 'yellow');
|
||||
updateStatus(current.val, `Push ${current.val} into stack`);
|
||||
stack.push(current);
|
||||
pushStack(current.val);
|
||||
current = current.left;
|
||||
stepReady = true;
|
||||
return;
|
||||
}
|
||||
if (stack.length > 0) {
|
||||
const peek = stack[stack.length - 1];
|
||||
if (peek.right && lastVisited !== peek.right) {
|
||||
updateStatus(peek.val, `Move to right of ${peek.val}`);
|
||||
current = peek.right;
|
||||
stepReady = true;
|
||||
} else {
|
||||
const node = stack.pop();
|
||||
popStack();
|
||||
lastVisited = node;
|
||||
updateStatus(node.val, `Visit ${node.val}`);
|
||||
highlight(node.val, 'orange');
|
||||
logVisit(node.val);
|
||||
current = null; // avoid re-visiting the same node
|
||||
setTimeout(() => {
|
||||
resetHighlights();
|
||||
stepReady = true;
|
||||
}, 500);
|
||||
}
|
||||
} else {
|
||||
updateStatus('None', 'Done');
|
||||
}
|
||||
}
|
||||
|
||||
//bind the step button
|
||||
document.getElementById('stepBtn').onclick = () => {
|
||||
if (!stepReady) return;
|
||||
stepReady = false;
|
||||
if (currentMode === 'In-Order') stepInOrder();
|
||||
else if (currentMode === 'Pre-Order') stepPreOrder();
|
||||
else if (currentMode === 'Post-Order') stepPostOrder();
|
||||
};
|
||||
|
||||
//reset button and function
|
||||
function resetAll() {
|
||||
while (stackVisual.length) popStack();
|
||||
stack.length = 0;
|
||||
current = tree;
|
||||
lastVisited = null;
|
||||
stepReady = true;
|
||||
document.getElementById('seq').innerText = '';
|
||||
updateStatus('None', 'Ready');
|
||||
resetHighlights();
|
||||
}
|
||||
|
||||
document.getElementById('resetBtn').onclick = resetAll;
|
||||
|
||||
//initial render of the tree
|
||||
drawTree(tree);
|
||||
layer.draw();
|
||||
Reference in New Issue
Block a user