adding heap sort animation
This commit is contained in:
Jidong Xiao
committed by
JamesFlare1212
JamesFlare1212
parent
8e49abd24a
commit
425b39cf7f
439
animations/heap/sort/heap-sort.js
Normal file
439
animations/heap/sort/heap-sort.js
Normal file
@@ -0,0 +1,439 @@
|
|||||||
|
//AUTHOR: Chloe Lee
|
||||||
|
|
||||||
|
// initial array to be sorted
|
||||||
|
let array = [5, 3, 8, 1, 9, 4];
|
||||||
|
let currentStep = 0;
|
||||||
|
let animationSteps = [];
|
||||||
|
|
||||||
|
// heap sort code
|
||||||
|
const codeLines = [
|
||||||
|
"void heapSort(int arr[], int n) {",
|
||||||
|
" for (int i = n / 2 - 1; i >= 0; i--)",
|
||||||
|
" heapify(arr, n, i);",
|
||||||
|
" for (int i = n - 1; i > 0; i--) {",
|
||||||
|
" std::swap(arr[0], arr[i]);",
|
||||||
|
" heapify(arr, i, 0);",
|
||||||
|
" }",
|
||||||
|
"}",
|
||||||
|
"",
|
||||||
|
"void heapify(int arr[], int n, int i) {",
|
||||||
|
" int largest = i;",
|
||||||
|
" int left = 2 * i + 1;",
|
||||||
|
" int right = 2 * i + 2;",
|
||||||
|
" if (left < n && arr[left] > arr[largest])",
|
||||||
|
" largest = left;",
|
||||||
|
" if (right < n && arr[right] > arr[largest])",
|
||||||
|
" largest = right;",
|
||||||
|
" if (largest != i) {",
|
||||||
|
" std::swap(arr[i], arr[largest]);",
|
||||||
|
" heapify(arr, n, largest);",
|
||||||
|
" }",
|
||||||
|
"}"
|
||||||
|
];
|
||||||
|
|
||||||
|
function initialize() {
|
||||||
|
// Display code with line numbers
|
||||||
|
const codeElement = document.getElementById('code');
|
||||||
|
let codeHTML = '';
|
||||||
|
|
||||||
|
codeLines.forEach((line, index) => {
|
||||||
|
// how much padding to add
|
||||||
|
const paddingLeft = line.startsWith(' ') ? '20px' : '0';
|
||||||
|
// add the line number for the code
|
||||||
|
codeHTML += `<div id="code-line-${index}">`;
|
||||||
|
|
||||||
|
if (!line.trim()) {
|
||||||
|
codeHTML += ' ';
|
||||||
|
} else {
|
||||||
|
const lineNum = index;
|
||||||
|
// align single digit lines better
|
||||||
|
const formattedLineNum = lineNum < 10 ? ` ${lineNum}` : lineNum;
|
||||||
|
codeHTML += `${formattedLineNum}. ${line}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
codeHTML += '</div>';
|
||||||
|
});
|
||||||
|
|
||||||
|
codeElement.innerHTML = codeHTML;
|
||||||
|
generateAnimationSteps();
|
||||||
|
// initial array display
|
||||||
|
updateArrayDisplay();
|
||||||
|
// initial heap tree
|
||||||
|
drawHeapTree();
|
||||||
|
|
||||||
|
// set up next step buttons
|
||||||
|
document.getElementById('arrayNextBtn').addEventListener('click', nextStep);
|
||||||
|
document.getElementById('treeNextBtn').addEventListener('click', nextStep);
|
||||||
|
}
|
||||||
|
|
||||||
|
// highlight a specific line of code
|
||||||
|
function highlightLine(lineIndex) {
|
||||||
|
// reset all lines
|
||||||
|
for (let i = 0; i < codeLines.length; i++) {
|
||||||
|
const line = document.getElementById(`code-line-${i}`);
|
||||||
|
if (line) {
|
||||||
|
line.style.backgroundColor = 'transparent';
|
||||||
|
line.style.fontWeight = 'normal';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// highlight the specified line
|
||||||
|
const highlightedLine = document.getElementById(`code-line-${lineIndex}`);
|
||||||
|
if (highlightedLine) {
|
||||||
|
highlightedLine.style.fontWeight = 'bold';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// update the array display
|
||||||
|
function updateArrayDisplay() {
|
||||||
|
const arrayContainer = document.getElementById('arrayContainer');
|
||||||
|
const descriptionElement = document.getElementById('arrayDescription');
|
||||||
|
arrayContainer.innerHTML = '';
|
||||||
|
|
||||||
|
// create array visualization
|
||||||
|
array.forEach((value, index) => {
|
||||||
|
const elementContainer = document.createElement('div');
|
||||||
|
elementContainer.style.display = 'inline-block';
|
||||||
|
elementContainer.style.marginRight = '5px';
|
||||||
|
|
||||||
|
const element = document.createElement('div');
|
||||||
|
element.className = 'array-element';
|
||||||
|
|
||||||
|
// highlight right lines, and nodes based on current step
|
||||||
|
if (animationSteps[currentStep] && animationSteps[currentStep].comparing && animationSteps[currentStep].comparing.includes(index)) {
|
||||||
|
element.classList.add('highlight');
|
||||||
|
} else if (animationSteps[currentStep] && animationSteps[currentStep].swapping && animationSteps[currentStep].swapping.includes(index)) {
|
||||||
|
element.classList.add('swap');
|
||||||
|
} else if (animationSteps[currentStep] && animationSteps[currentStep].sorted && animationSteps[currentStep].sorted.includes(index)) {
|
||||||
|
element.classList.add('done');
|
||||||
|
}
|
||||||
|
|
||||||
|
element.textContent = value;
|
||||||
|
elementContainer.appendChild(element);
|
||||||
|
|
||||||
|
// add index below
|
||||||
|
const indexElement = document.createElement('div');
|
||||||
|
indexElement.className = 'array-index';
|
||||||
|
indexElement.textContent = index;
|
||||||
|
elementContainer.appendChild(indexElement);
|
||||||
|
|
||||||
|
arrayContainer.appendChild(elementContainer);
|
||||||
|
});
|
||||||
|
|
||||||
|
// update the description
|
||||||
|
if (animationSteps[currentStep] && animationSteps[currentStep].description) {
|
||||||
|
descriptionElement.textContent = animationSteps[currentStep].description;
|
||||||
|
} else {
|
||||||
|
descriptionElement.textContent = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// draw heap tree on the canvas
|
||||||
|
function drawHeapTree() {
|
||||||
|
const canvas = document.getElementById('treeCanvas');
|
||||||
|
// canvas with context
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
const heapSize = animationSteps[currentStep] ? (animationSteps[currentStep].heapSize || array.length) : array.length;
|
||||||
|
|
||||||
|
// tree node positions (x, y coordinates for each node)
|
||||||
|
const positions = [
|
||||||
|
[250, 50], // index 0
|
||||||
|
[150, 120], // index 1
|
||||||
|
[350, 120], // index 2
|
||||||
|
[100, 190], // index 3
|
||||||
|
[200, 190], // index 4
|
||||||
|
[300, 190], // index 5
|
||||||
|
];
|
||||||
|
|
||||||
|
// draw edges/arrows
|
||||||
|
for (let i = 0; i < Math.min(array.length, positions.length); i++) {
|
||||||
|
if (i > 0 && i < heapSize) {
|
||||||
|
const parentIndex = Math.floor((i - 1) / 2);
|
||||||
|
if (parentIndex < heapSize) {
|
||||||
|
// starting point for the line from parent to child
|
||||||
|
const startX = positions[parentIndex][0];
|
||||||
|
// bottom of parent node
|
||||||
|
const startY = positions[parentIndex][1] + 20;
|
||||||
|
const endX = positions[i][0];
|
||||||
|
// top of child node
|
||||||
|
const endY = positions[i][1] - 20;
|
||||||
|
|
||||||
|
// draw the lines for the arrows
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(startX, startY);
|
||||||
|
ctx.lineTo(endX, endY);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// draw arrows
|
||||||
|
const angle = Math.atan2(endY - startY, endX - startX);
|
||||||
|
const arrowSize = 10;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(endX, endY);
|
||||||
|
ctx.lineTo(
|
||||||
|
endX - arrowSize * Math.cos(angle - Math.PI / 6),
|
||||||
|
endY - arrowSize * Math.sin(angle - Math.PI / 6)
|
||||||
|
);
|
||||||
|
ctx.lineTo(
|
||||||
|
endX - arrowSize * Math.cos(angle + Math.PI / 6),
|
||||||
|
endY - arrowSize * Math.sin(angle + Math.PI / 6)
|
||||||
|
);
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.fillStyle = '#555';
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// !! subject to change !!
|
||||||
|
for (let i = 0; i < Math.min(array.length, positions.length); i++) {
|
||||||
|
if (i < heapSize) {
|
||||||
|
// determine node color based on current operation
|
||||||
|
let nodeColor = '#ddd';
|
||||||
|
let borderColor = '#888';
|
||||||
|
|
||||||
|
if (animationSteps[currentStep] && animationSteps[currentStep].comparing &&
|
||||||
|
animationSteps[currentStep].comparing.includes(i)) {
|
||||||
|
nodeColor = '#ffcf4d';
|
||||||
|
borderColor = '#e8a800';
|
||||||
|
} else if (animationSteps[currentStep] && animationSteps[currentStep].swapping &&
|
||||||
|
animationSteps[currentStep].swapping.includes(i)) {
|
||||||
|
nodeColor = '#ff7675';
|
||||||
|
borderColor = '#d63031';
|
||||||
|
} else if (animationSteps[currentStep] && animationSteps[currentStep].sorted &&
|
||||||
|
animationSteps[currentStep].sorted.includes(i)) {
|
||||||
|
nodeColor = '#81ecec';
|
||||||
|
borderColor = '#00cec9';
|
||||||
|
}
|
||||||
|
|
||||||
|
// draw rectangle with round corners
|
||||||
|
const width = 40;
|
||||||
|
const height = 40;
|
||||||
|
const x = positions[i][0] - width/2;
|
||||||
|
const y = positions[i][1] - height/2;
|
||||||
|
const radius = 5;
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x + radius, y);
|
||||||
|
ctx.lineTo(x + width - radius, y);
|
||||||
|
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
|
||||||
|
ctx.lineTo(x + width, y + height - radius);
|
||||||
|
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
|
||||||
|
ctx.lineTo(x + radius, y + height);
|
||||||
|
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
|
||||||
|
ctx.lineTo(x, y + radius);
|
||||||
|
ctx.quadraticCurveTo(x, y, x + radius, y);
|
||||||
|
ctx.closePath();
|
||||||
|
|
||||||
|
// style rectangle
|
||||||
|
ctx.fillStyle = nodeColor;
|
||||||
|
ctx.fill();
|
||||||
|
ctx.strokeStyle = borderColor;
|
||||||
|
ctx.lineWidth = 2;
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// draw text in the heap tree
|
||||||
|
ctx.fillStyle = 'black';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
ctx.textBaseline = 'middle';
|
||||||
|
ctx.font = 'bold 16px Times New Roman';
|
||||||
|
ctx.fillText(array[i].toString(), positions[i][0], positions[i][1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateAnimationSteps() {
|
||||||
|
animationSteps = [];
|
||||||
|
let tempArray = [...array];
|
||||||
|
const n = tempArray.length;
|
||||||
|
animationSteps.push({
|
||||||
|
array: [...tempArray],
|
||||||
|
line: 0,
|
||||||
|
description: 'Starting heap sort with array [' + tempArray.join(', ') + ']',
|
||||||
|
heapSize: n
|
||||||
|
});
|
||||||
|
|
||||||
|
// build max-heap
|
||||||
|
animationSteps.push({
|
||||||
|
array: [...tempArray],
|
||||||
|
line: 2,
|
||||||
|
description: 'Building max heap',
|
||||||
|
heapSize: n
|
||||||
|
});
|
||||||
|
|
||||||
|
let sortedIndices = [];
|
||||||
|
|
||||||
|
for (let i = Math.floor(n / 2) - 1; i >= 0; i--) {
|
||||||
|
animationSteps.push({
|
||||||
|
array: [...tempArray],
|
||||||
|
line: 3,
|
||||||
|
description: `Heapifying subtree rooted at index ${i}`,
|
||||||
|
heapSize: n,
|
||||||
|
comparing: [i]
|
||||||
|
});
|
||||||
|
|
||||||
|
heapifyWithAnimation(tempArray, n, i, sortedIndices);
|
||||||
|
}
|
||||||
|
|
||||||
|
animationSteps.push({
|
||||||
|
array: [...tempArray],
|
||||||
|
line: 6,
|
||||||
|
description: 'Max heap built. Extracting elements one by one',
|
||||||
|
heapSize: n
|
||||||
|
});
|
||||||
|
|
||||||
|
for (let i = n - 1; i > 0; i--) {
|
||||||
|
animationSteps.push({
|
||||||
|
array: [...tempArray],
|
||||||
|
line: 8,
|
||||||
|
description: `Swapping root (${tempArray[0]}) with element at index ${i} (${tempArray[i]})`,
|
||||||
|
heapSize: i + 1,
|
||||||
|
swapping: [0, i]
|
||||||
|
});
|
||||||
|
|
||||||
|
[tempArray[0], tempArray[i]] = [tempArray[i], tempArray[0]];
|
||||||
|
|
||||||
|
// this index is sorted
|
||||||
|
sortedIndices.push(i);
|
||||||
|
|
||||||
|
animationSteps.push({
|
||||||
|
array: [...tempArray],
|
||||||
|
line: 8,
|
||||||
|
description: `Element ${tempArray[i]} is now in its correct position`,
|
||||||
|
heapSize: i,
|
||||||
|
sorted: [...sortedIndices]
|
||||||
|
});
|
||||||
|
|
||||||
|
animationSteps.push({
|
||||||
|
array: [...tempArray],
|
||||||
|
line: 11,
|
||||||
|
description: `Heapifying reduced heap (size ${i})`,
|
||||||
|
heapSize: i
|
||||||
|
});
|
||||||
|
|
||||||
|
heapifyWithAnimation(tempArray, i, 0, sortedIndices);
|
||||||
|
}
|
||||||
|
|
||||||
|
sortedIndices.push(0);
|
||||||
|
animationSteps.push({
|
||||||
|
array: [...tempArray],
|
||||||
|
line: 13,
|
||||||
|
description: 'Heap sort complete! Array is now sorted: [' + tempArray.join(', ') + ']',
|
||||||
|
heapSize: n,
|
||||||
|
sorted: sortedIndices
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// heapify function that records animation steps
|
||||||
|
function heapifyWithAnimation(arr, n, i, sortedIndices) {
|
||||||
|
let largest = i;
|
||||||
|
const left = 2 * i + 1;
|
||||||
|
const right = 2 * i + 2;
|
||||||
|
|
||||||
|
animationSteps.push({
|
||||||
|
array: [...arr],
|
||||||
|
line: 16,
|
||||||
|
description: `Heapifying at index ${i}`,
|
||||||
|
heapSize: n,
|
||||||
|
comparing: [i],
|
||||||
|
sorted: sortedIndices ? [...sortedIndices] : []
|
||||||
|
});
|
||||||
|
|
||||||
|
// compare with left child
|
||||||
|
if (left < n) {
|
||||||
|
animationSteps.push({
|
||||||
|
array: [...arr],
|
||||||
|
line: 21,
|
||||||
|
description: `Comparing ${arr[i]} (index ${i}) with left child ${arr[left]} (index ${left})`,
|
||||||
|
heapSize: n,
|
||||||
|
comparing: [i, left],
|
||||||
|
sorted: sortedIndices ? [...sortedIndices] : []
|
||||||
|
});
|
||||||
|
|
||||||
|
if (arr[left] > arr[largest]) {
|
||||||
|
largest = left;
|
||||||
|
|
||||||
|
animationSteps.push({
|
||||||
|
array: [...arr],
|
||||||
|
line: 22,
|
||||||
|
description: `Left child ${arr[left]} is larger than current largest ${arr[i]}`,
|
||||||
|
heapSize: n,
|
||||||
|
comparing: [largest],
|
||||||
|
sorted: sortedIndices ? [...sortedIndices] : []
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// compare with right child
|
||||||
|
if (right < n) {
|
||||||
|
animationSteps.push({
|
||||||
|
array: [...arr],
|
||||||
|
line: 25,
|
||||||
|
description: `Comparing ${arr[largest]} (index ${largest}) with right child ${arr[right]} (index ${right})`,
|
||||||
|
heapSize: n,
|
||||||
|
comparing: [largest, right],
|
||||||
|
sorted: sortedIndices ? [...sortedIndices] : []
|
||||||
|
});
|
||||||
|
|
||||||
|
if (arr[right] > arr[largest]) {
|
||||||
|
largest = right;
|
||||||
|
|
||||||
|
animationSteps.push({
|
||||||
|
array: [...arr],
|
||||||
|
line: 26,
|
||||||
|
description: `Right child ${arr[right]} is larger than current largest ${arr[largest === i ? arr[i] : arr[left]]}`,
|
||||||
|
heapSize: n,
|
||||||
|
comparing: [largest],
|
||||||
|
sorted: sortedIndices ? [...sortedIndices] : []
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// if largest is not root, swap and heapify
|
||||||
|
if (largest !== i) {
|
||||||
|
animationSteps.push({
|
||||||
|
array: [...arr],
|
||||||
|
line: 30,
|
||||||
|
description: `Swapping ${arr[i]} (index ${i}) with ${arr[largest]} (index ${largest})`,
|
||||||
|
heapSize: n,
|
||||||
|
swapping: [i, largest],
|
||||||
|
sorted: sortedIndices ? [...sortedIndices] : []
|
||||||
|
});
|
||||||
|
|
||||||
|
[arr[i], arr[largest]] = [arr[largest], arr[i]];
|
||||||
|
|
||||||
|
animationSteps.push({
|
||||||
|
array: [...arr],
|
||||||
|
line: 33,
|
||||||
|
description: `Recursively heapifying the affected subtree rooted at index ${largest}`,
|
||||||
|
heapSize: n,
|
||||||
|
comparing: [largest],
|
||||||
|
sorted: sortedIndices ? [...sortedIndices] : []
|
||||||
|
});
|
||||||
|
|
||||||
|
heapifyWithAnimation(arr, n, largest, sortedIndices);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function nextStep() {
|
||||||
|
if (currentStep < animationSteps.length - 1) {
|
||||||
|
currentStep++;
|
||||||
|
|
||||||
|
// update the array to current state
|
||||||
|
if (animationSteps[currentStep] && animationSteps[currentStep].array) {
|
||||||
|
array = [...animationSteps[currentStep].array];
|
||||||
|
}
|
||||||
|
|
||||||
|
// highlight code line
|
||||||
|
if (animationSteps[currentStep] && animationSteps[currentStep].line !== undefined) {
|
||||||
|
highlightLine(animationSteps[currentStep].line);
|
||||||
|
}
|
||||||
|
|
||||||
|
// update visuals
|
||||||
|
updateArrayDisplay();
|
||||||
|
drawHeapTree();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// initialize on page load
|
||||||
|
window.onload = initialize;
|
||||||
142
animations/heap/sort/index.html
Normal file
142
animations/heap/sort/index.html
Normal file
@@ -0,0 +1,142 @@
|
|||||||
|
<!-- AUTHOR: Chloe Lee -->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Heap Sort Visualization</title>
|
||||||
|
<script src="../../konva.js"></script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Times New Roman', Times, serif, sans-serif;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 30px;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.code-block {
|
||||||
|
background-color: #e6e6e6;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.visualization-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.visualization-box {
|
||||||
|
background-color: #e6e6e6;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
|
||||||
|
flex: 1;
|
||||||
|
min-height: 200px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
button.next-step {
|
||||||
|
font-family: 'Times New Roman', Times, serif, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
border: 1px solid #999;
|
||||||
|
border-radius: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
left: 20px;
|
||||||
|
top: 20px;
|
||||||
|
}
|
||||||
|
.array-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
.array-element {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #ddd;
|
||||||
|
border: 2px solid #888;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 0 2px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.array-index {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.highlight {
|
||||||
|
background-color: #ffcf4d;
|
||||||
|
border-color: #e8a800;
|
||||||
|
}
|
||||||
|
.swap {
|
||||||
|
background-color: #ff7675;
|
||||||
|
border-color: #d63031;
|
||||||
|
}
|
||||||
|
.done {
|
||||||
|
background-color: #81ecec;
|
||||||
|
border-color: #00cec9;
|
||||||
|
}
|
||||||
|
.description {
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
#code{
|
||||||
|
margin: 0;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
#treeCanvas{
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div>
|
||||||
|
<h1>Heap Sort Visualization</h1>
|
||||||
|
<p>This animation shows how the heap sort algorithm works by building a max heap and then extracting elements one by one. Click the "next step" button to run the animation.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- block of C++ code-->
|
||||||
|
<div class="code-block" id="code-block">
|
||||||
|
<pre id="code"></pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="visualization-container">
|
||||||
|
<!-- array goes here -->
|
||||||
|
<div class="visualization-box">
|
||||||
|
<button id="arrayNextBtn" class="next-step">Next Step</button>
|
||||||
|
<div id="arrayContainer" class="array-container"></div>
|
||||||
|
<div id="arrayDescription" class="description"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- heap tree goes here -->
|
||||||
|
<div class="visualization-box">
|
||||||
|
<button id="treeNextBtn" class="next-step">Next Step</button>
|
||||||
|
<canvas id="treeCanvas" width="500" height="300"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="heap-sort.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user