adding pq animations
This commit is contained in:
Jidong Xiao
committed by
JamesFlare1212
JamesFlare1212
parent
6a17be892f
commit
2d3840b312
188
animations/priority_queue/max_heap/animation.js
Normal file
188
animations/priority_queue/max_heap/animation.js
Normal file
@@ -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();
|
||||
32
animations/priority_queue/max_heap/index.html
Normal file
32
animations/priority_queue/max_heap/index.html
Normal file
@@ -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>
|
||||
18926
animations/priority_queue/max_heap/konva.js
Normal file
18926
animations/priority_queue/max_heap/konva.js
Normal file
File diff suppressed because it is too large
Load Diff
189
animations/priority_queue/min_heap/animation.js
Normal file
189
animations/priority_queue/min_heap/animation.js
Normal file
@@ -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();
|
||||
32
animations/priority_queue/min_heap/index.html
Normal file
32
animations/priority_queue/min_heap/index.html
Normal file
@@ -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>
|
||||
18926
animations/priority_queue/min_heap/konva.js
Normal file
18926
animations/priority_queue/min_heap/konva.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user