adding pq animations

animations/priority_queue/max_heap/animation.js

@@ -0,0 +1,188 @@
+var stage = new Konva.Stage({
+    container: 'container',
+    width: 2000,
+    height: 1000
+});
+
+var layer = new Konva.Layer();
+stage.add(layer);
+
+
+var heap = [];
+var nodeRadius = 25;
+var levelHeight = 80;
+var startX = 500;
+var startY = 50;
+var horizontalSpacing = 150;
+
+var animationNodes = [];
+var animationLines = [];
+var currentStep = 0;
+
+var operations = [
+    { type: 'push', value: 3 },
+    { type: 'push', value: 4 },
+    { type: 'push', value: 3 },
+    { type: 'push', value: 1 },
+    { type: 'push', value: 5 },
+    { type: 'pop' },
+    { type: 'pop' },
+    { type: 'pop' },
+    { type: 'pop' },
+    { type: 'pop' }
+];
+
+function drawNode(x, y, value, color = '#ffffff') {
+    var group = new Konva.Group({ x: x, y: y });
+
+    var circle = new Konva.Circle({
+        radius: nodeRadius,
+        fill: color,
+        stroke: '#000000',
+        strokeWidth: 2
+    });
+
+    var text = new Konva.Text({
+        text: value.toString(),
+        fill: 'black',
+        align: 'center',
+        width: nodeRadius * 2,
+        x: -nodeRadius,
+        y: -10
+    });
+
+    group.add(circle);
+    group.add(text);
+    layer.add(group);
+    animationNodes.push(group);
+
+    return group;
+}
+
+function makeLine(x1, y1, x2, y2) {
+    var line = new Konva.Line({
+        points: [x1, y1, x2, y2],
+        stroke: 'black',
+        strokeWidth: 2,
+        lineCap: 'round',
+        lineJoin: 'round'
+    });
+    layer.add(line);
+    animationLines.push(line);
+    return line;
+}
+
+function makeTree() {
+    animationNodes.forEach(n => n.destroy());
+    animationLines.forEach(l => l.destroy());
+    animationNodes = [];
+    animationLines = [];
+
+    if (heap.length === 0) return;
+
+    var positions = [];
+
+    for (var i = 0; i < heap.length; i++) {
+        var level = Math.floor(Math.log2(i + 1));
+        var indexInLevel = i - (2 ** level - 1);
+        var nodesInLevel = 2 ** level;
+
+        var x = startX + (indexInLevel - (nodesInLevel - 1) / 2) * horizontalSpacing * (1.5 - level / 5);
+        var y = startY + level * levelHeight;
+
+        positions.push({ x: x, y: y });
+        drawNode(x, y, heap[i]);
+
+        if (i > 0) {
+            var parentPos = positions[Math.floor((i - 1) / 2)];
+            makeLine(parentPos.x, parentPos.y + nodeRadius, x, y - nodeRadius);
+        }
+    }
+
+    layer.draw();
+}
+
+function push(val) {
+    heap.push(val);
+    var idx = heap.length - 1;
+    while (idx > 0) {
+        var parentIdx = Math.floor((idx - 1) / 2);
+        if (heap[parentIdx] >= heap[idx]) break;
+        [heap[parentIdx], heap[idx]] = [heap[idx], heap[parentIdx]];
+        idx = parentIdx;
+    }
+}
+
+function pop() {
+    if (heap.length === 0) return null;
+
+    var max = heap[0];
+    heap[0] = heap[heap.length - 1];
+    heap.pop();
+
+    var idx = 0;
+    while (true) {
+        var left = 2 * idx + 1;
+        var right = 2 * idx + 2;
+        var largest = idx;
+
+        if (left < heap.length && heap[left] > heap[largest]) largest = left;
+        if (right < heap.length && heap[right] > heap[largest]) largest = right;
+
+        if (largest === idx) break;
+
+        [heap[idx], heap[largest]] = [heap[largest], heap[idx]];
+        idx = largest;
+    }
+
+    return max;
+}
+
+var cppCode = [
+    "#include <iostream>",
+    "#include <queue>",
+    "",
+    "int main() {",
+    "    std::priority_queue<int> maxHeap;",
+    "",
+    "    maxHeap.push(3);",
+    "    maxHeap.push(4);",
+    "    maxHeap.push(3);",
+    "    maxHeap.push(1);",
+    "    maxHeap.push(5);",
+    "",
+    "    while (!maxHeap.empty()) {",
+    "        std::cout << maxHeap.top() << \" \";",
+    "        maxHeap.pop();",
+    "    }",
+    "    std::cout << std::endl;",
+    "",
+    "    return 0;",
+    "}"
+];
+
+function renderCode(step) {
+    var codeBlock = document.getElementById('codeBlock');
+    codeBlock.innerHTML = cppCode.map((line, i) => {
+        var bold = false;
+        if (step >= 0 && step <= 4) bold = i === 6 + step;
+        else if (step >= 5 && step <= 10) bold = i === 13 || i === 14;
+        return bold ? `<b>${line}</b>` : line;
+    }).join('\n');
+}
+function next() {
+    var op = operations[currentStep];
+    if (op.type === 'push') {
+        push(op.value);
+    } else if (op.type === 'pop') {
+        pop();
+    }
+
+    renderCode(currentStep);
+    makeTree();
+    currentStep++;
+}
+
+document.getElementById('next').addEventListener('click', next);
+
+layer.draw();

animations/priority_queue/max_heap/index.html

@@ -0,0 +1,32 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Max heap animation</title>
+    <style>
+        body {
+            position: relative;
+        }
+        #codeContainer {
+            position: absolute;
+            top: 100px;
+            right: 50px;
+            width: 600px;
+        }
+        pre {
+            font-size: 10px;
+        }
+    </style>
+    <script src="konva.js"></script>
+    <script src="animation.js" defer></script>
+</head>
+<body>
+    <h1>Max heap animation</h1>
+    <button id="next">Next Step</button>
+    <div id="container"></div>
+    <div id="codeContainer">
+        <pre id="codeBlock"></pre>
+    </div>
+</body>
+</html>

animations/priority_queue/min_heap/animation.js

@@ -0,0 +1,189 @@
+var stage = new Konva.Stage({
+    container: 'container',
+    width: 2000,
+    height: 1000
+});
+
+var layer = new Konva.Layer();
+stage.add(layer);
+
+
+var heap = [];
+var nodeRadius = 25;
+var levelHeight = 80;
+var startX = 500;
+var startY = 50;
+var horizontalSpacing = 150;
+
+var animationNodes = [];
+var animationLines = [];
+var currentStep = 0;
+
+var operations = [
+    { type: 'push', value: 3 },
+    { type: 'push', value: 4 },
+    { type: 'push', value: 3 },
+    { type: 'push', value: 1 },
+    { type: 'push', value: 5 },
+    { type: 'pop' },
+    { type: 'pop' },
+    { type: 'pop' },
+    { type: 'pop' },
+    { type: 'pop' }
+];
+
+function drawNode(x, y, value, color = '#ffffff') {
+    var group = new Konva.Group({ x: x, y: y });
+
+    var circle = new Konva.Circle({
+        radius: nodeRadius,
+        fill: color,
+        stroke: '#000000',
+        strokeWidth: 2
+    });
+
+    var text = new Konva.Text({
+        text: value.toString(),
+        fill: 'black',
+        align: 'center',
+        width: nodeRadius * 2,
+        x: -nodeRadius,
+        y: -10
+    });
+
+    group.add(circle);
+    group.add(text);
+    layer.add(group);
+    animationNodes.push(group);
+
+    return group;
+}
+
+function makeLine(x1, y1, x2, y2) {
+    var line = new Konva.Line({
+        points: [x1, y1, x2, y2],
+        stroke: 'black',
+        strokeWidth: 2,
+        lineCap: 'round',
+        lineJoin: 'round'
+    });
+    layer.add(line);
+    animationLines.push(line);
+    return line;
+}
+
+function makeTree() {
+    animationNodes.forEach(n => n.destroy());
+    animationLines.forEach(l => l.destroy());
+    animationNodes = [];
+    animationLines = [];
+
+    if (heap.length === 0) return;
+
+    var positions = [];
+
+    for (var i = 0; i < heap.length; i++) {
+        var level = Math.floor(Math.log2(i + 1));
+        var indexInLevel = i - (2 ** level - 1);
+        var nodesInLevel = 2 ** level;
+
+        var x = startX + (indexInLevel - (nodesInLevel - 1) / 2) * horizontalSpacing * (1.5 - level / 5);
+        var y = startY + level * levelHeight;
+
+        positions.push({ x: x, y: y });
+        drawNode(x, y, heap[i]);
+
+        if (i > 0) {
+            var parentPos = positions[Math.floor((i - 1) / 2)];
+            makeLine(parentPos.x, parentPos.y + nodeRadius, x, y - nodeRadius);
+        }
+    }
+
+    layer.draw();
+}
+
+function push(val) {
+    heap.push(val);
+    var idx = heap.length - 1;
+    while (idx > 0) {
+        var parentIdx = Math.floor((idx - 1) / 2);
+        if (heap[parentIdx] <= heap[idx]) break;
+        [heap[parentIdx], heap[idx]] = [heap[idx], heap[parentIdx]];
+        idx = parentIdx;
+    }
+}
+
+function pop() {
+    if (heap.length === 0) return null;
+
+    var min = heap[0];
+    heap[0] = heap[heap.length - 1];
+    heap.pop();
+
+    var idx = 0;
+    while (true) {
+        var left = 2 * idx + 1;
+        var right = 2 * idx + 2;
+        var smallest = idx;
+
+        if (left < heap.length && heap[left] < heap[smallest]) smallest = left;
+        if (right < heap.length && heap[right] < heap[smallest]) smallest = right;
+
+        if (smallest === idx) break;
+
+        [heap[idx], heap[smallest]] = [heap[smallest], heap[idx]];
+        idx = smallest;
+    }
+
+    return min;
+}
+
+var cppCode = [
+    "#include <iostream>",
+    "#include <queue>",
+    "",
+    "int main() {",
+    "    std::priority_queue<int, std::vector<int>, std::greater<int>> minHeap;",
+    "",
+    "    minHeap.push(3);",
+    "    minHeap.push(4);",
+    "    minHeap.push(3);",
+    "    minHeap.push(1);",
+    "    minHeap.push(5);",
+    "",
+    "    while (!minHeap.empty()) {",
+    "        std::cout << minHeap.top() << \" \";",
+    "        minHeap.pop();",
+    "    }",
+    "    std::cout << std::endl;",
+    "",
+    "    return 0;",
+    "}"
+];
+
+function renderCode(step) {
+    var codeBlock = document.getElementById('codeBlock');
+    codeBlock.innerHTML = cppCode.map((line, i) => {
+        var bold = false;
+        if (step >= 0 && step <= 4) bold = i === 6 + step;
+        else if (step >= 5 && step <= 10) bold = i === 13 || i === 14;
+        return bold ? `<b>${line}</b>` : line;
+    }).join('\n');
+}
+
+function next() {
+    var op = operations[currentStep];
+    if (op.type === 'push') {
+        push(op.value);
+    } else if (op.type === 'pop') {
+        pop();
+    }
+
+    renderCode(currentStep);
+    makeTree();
+    currentStep++;
+}
+
+document.getElementById('next').addEventListener('click', next);
+
+layer.draw();

animations/priority_queue/min_heap/index.html

@@ -0,0 +1,32 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Min heap animation</title>
+    <style>
+        body {
+            position: relative;
+        }
+        #codeContainer {
+            position: absolute;
+            top: 100px;
+            right: 50px;
+            width: 600px;
+        }
+        pre {
+            font-size: 10px;
+        }
+    </style>
+    <script src="konva.js"></script>
+    <script src="animation.js" defer></script>
+</head>
+<body>
+    <h1>Min heap animation</h1>
+    <button id="next">Next Step</button>
+    <div id="container"></div>
+    <div id="codeContainer">
+        <pre id="codeBlock"></pre>
+    </div>
+</body>
+</html>