Visualización de clasificación de ladrillos usando JavaScript

Esta es básicamente una variación de bubble-sort . Este algoritmo se divide en dos fases: la fase impar y la fase par. En la fase impar, realizamos una ordenación de burbuja en elementos indexados impares, y en la fase par, realizamos una ordenación de burbuja en elementos indexados pares.

Para saber más al respecto. Consulte Clasificación de ladrillos .

La GUI (interfaz gráfica de usuario) ayuda a comprender mejor que los programas. En este artículo, visualizaremos Brick Sort usando JavaScript.

Requisitos previos:

Acercarse:

  • Primero, generaremos una array aleatoria usando la función Math.random() .
  • Se utilizan diferentes colores para indicar qué elementos no están ordenados (azul cielo), comparados (rojo) y ordenados (verde claro).
  • Se puede generar una nueva array presionando la tecla «Ctrl + R» .
  • Button Brick Ordena los elementos usando el algoritmo de ordenación por selección.
  • Finalmente, se ordenan los elementos.

A continuación se muestra la implementación del enfoque anterior.

index.html

<!DOCTYPE html>
<html lang="en">
  
<!-- Head -->
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,
    initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  
    <!-- Title -->
    <title>Brick Sort Visualizer</title>
  
    <!-- Linking style.css -->
    <link href="style.css" rel="stylesheet" />
</head>
  
<!-- Body -->
  
<body>
    <section class="head">
        Brick Sort Visualization
    </section>
      
    <section class="data-container"></section>
      
    <section id="ele"></section>
      
    <div style="margin: auto; width: fit-content">
  
        <!-- "Brick Sort" button -->
        <button class="btn2" 
            onclick="BrickSort(),disable()" 
            id="Button2">
            Brick Sort
        </button>
    </div>
  
    <!-- Linking script.js -->
    <script src="script.js"></script>
</body>
  
</html>

style.css

.mySlides {
  display: none;
}
body {
  background-color: rgb(0, 0, 0);
  font-family: Verdana, sans-serif;
}
.head {
  margin-top: 20px;
  margin-right: 20vw;
  margin-left: 20vw;
  text-align: center;
  font-size: 40px;
  background-color: #000000;
  
  color: white;
  font-weight: bolder;
}
.data-container {
  width: 600px;
  color: aliceblue;
  height: 364px;
  position: relative;
  margin: 0 auto;
}
.bar {
  width: 28px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: rgb(0, 183, 255);
  transition: 0.2s all ease;
}
.bar__id {
  position: absolute;
  top: -24px;
  width: 100%;
  text-align: center;
}
  
.btn2 {
  padding: 12px;
  font-weight: bolder;
  background-color: white;
  border-radius: 10px;
  color: rgb(0, 0, 0);
  font-size: 16px;
  border: white;
}
#ele {
  text-align: center;
  height: 35px;
}

script.js

const container = document.querySelector(".data-container");
  
// Function to generate bars
function generatebars(num = 20) {
  
    // For loop to generate 20 bars
    for (let i = 0; i < num; i += 1) {
  
        // To generate random values from 1 to 100
        const value = Math.floor(Math.random() * 100) + 1;
  
        // To create element "div"
        const bar = document.createElement("div");
  
        // To add class "bar" to "div"
        bar.classList.add("bar");
  
        // Provide height to the bar
        bar.style.height = `${value * 3}px`;
  
        // Translate the bar towards positive X axis
        bar.style.transform = `translateX(${i * 30}px)`;
  
        // To create element "label"
        const barLabel = document.createElement("label");
  
        // To add class "bar_id" to "label"
        barLabel.classList.add("bar__id");
  
        // Assign value to "label"
        barLabel.innerHTML = value;
  
        // Append "Label" to "div"
        bar.appendChild(barLabel);
  
        // Append "div" to "data-container div"
        container.appendChild(bar);
    }
}
  
// Asynchronous function to perform "Brick Sort"
async function BrickSort(delay = 600) {
  
    let bars = document.querySelectorAll(".bar");
  
    // Initialize isSorted with false
    let isSorted = false;
  
    while (!isSorted) {
        // set isSorted true
        isSorted = true;
  
        for (let i = 1; i <= 18; i = i + 2) {
            // Assigning value of ith bar into value1
            var value1 = parseInt(bars[i].childNodes[0].innerHTML);
  
            // Assigning value of i+1th bar into value2
            var value2 = parseInt(bars[i + 1].childNodes[0].innerHTML);
  
            if (value1 > value2) {
                // Provide red color to the ith bar
                bars[i].style.backgroundColor = "red";
  
                // Provide red color to the i+1th bar
                bars[i + 1].style.backgroundColor = "red";
  
                // Swap ith bar with (i+1)th bar
                var temp1 = (bars[i].style.height);
                var temp2 = (bars[i].childNodes[0].innerText);
  
                // To pause the execution of code for 300 milliseconds
                await new Promise((resolve) =>
                    setTimeout(() => {
                        resolve();
                    }, 300)
                );
  
                // Swap pith bar with (i+1)th bar
                bars[i].style.height = (bars[i + 1].style.height);
                bars[i].childNodes[0].innerText = 
                         (bars[i + 1].childNodes[0].innerText);
                bars[i + 1].style.height = temp1;
                bars[i + 1].childNodes[0].innerText = temp2;
                isSorted = false;
  
                // To pause the execution of code for 300 milliseconds
                await new Promise((resolve) =>
                    setTimeout(() => {
                        resolve();
                    }, 300)
                );
  
                // Provide skyblue color to the ith bar
                bars[i].style.backgroundColor = "rgb(0, 183, 255)";
  
                // Provide skyblue color to the i+1th bar
                bars[i + 1].style.backgroundColor = "rgb(0, 183, 255)";
            }
        }
  
        for (let i = 0; i <= 18; i = i + 2) {
            // Assigning value of ith bar into value3
            var value3 = parseInt(bars[i].childNodes[0].innerHTML);
  
            // Assigning value of i+1th bar into value4
            var value4 = parseInt(bars[i + 1].childNodes[0].innerHTML);
  
            if (value3 > value4) {
                // Provide red color to the ith bar
                bars[i].style.backgroundColor = "red";
  
                // Provide red color to the i+1th bar
                bars[i + 1].style.backgroundColor = "red";
  
                // Swap ith bar with (i+1)th bar
                var temp3 = (bars[i].style.height);
                var temp4 = (bars[i].childNodes[0].innerText);
  
                // To pause the execution of code for 300 milliseconds
                await new Promise((resolve) =>
                    setTimeout(() => {
                        resolve();
                    }, 300)
                );
  
                // Swap ith bar with (i+1)th bar
                bars[i].style.height = (bars[i + 1].style.height);
                bars[i].childNodes[0].innerText =
                        (bars[i + 1].childNodes[0].innerText);
                bars[i + 1].style.height = temp3;
                bars[i + 1].childNodes[0].innerText = temp4;
                isSorted = false;
  
                // To pause the execution of code for 300 milliseconds
                await new Promise((resolve) =>
                    setTimeout(() => {
                        resolve();
                    }, 300)
                );
  
                // Provide skyblue color to the ith bar
                bars[i].style.backgroundColor = "rgb(0, 183, 255)";
  
                // Provide skyblue color to the i+1th bar
                bars[i + 1].style.backgroundColor = "rgb(0, 183, 255)";
            }
  
            // To pause the execution of code for 300 milliseconds
            new Promise((resolve) =>
                setTimeout(() => {
                    resolve();
                }, 300)
            );
        }
  
  
        // To pause the execution of code for 300 milliseconds
        await new Promise((resolve) =>
            setTimeout(() => {
                resolve();
            }, 300)
        );
  
        // Providing skyblue color
        for (var x = 0; x < 20; x++) {
            bars[x].style.backgroundColor = "rgb(0, 183, 255)";
        }
    }
  
    // Providing lightgreen color
    for (var x = 0; x < 20; x++) {
        bars[x].style.backgroundColor = "rgb(49, 226, 13)";
    }
  
    // To enable the button "Brick Sort" after final(sorted)
    document.getElementById("Button2").disabled = false;
    document.getElementById("Button2").style.backgroundColor = "#6f459e";
}
  
// Call "generatebars()" function
generatebars();
  
// Function to generate new random array
function generate() {
    window.location.reload();
}
  
// Function to disable the button
function disable() {
  
    // To disable the button "Brick Sort"
    document.getElementById("Button2").disabled = true;
    document.getElementById("Button2").style.backgroundColor = "white";
}

Producción:

Publicación traducida automáticamente

Artículo escrito por pankaj2407 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *