Wizualizacja sortowania bąbelkowego – coś nie działa

0

Witam, mógłby mi ktoś powiedzieć czy moje rozumowanie jest poprawne? Chciałem zrobić wizualizację sortowania bąbelkowego, ale coś nie działa.

<canvas id="1" width="1000" height="1000"></canvas>
<script src="bubble.js"></script>
<button onclick="main()">posortuj</button>
grid = 10;
window.onload = function()
{
  canvas = document.getElementById('1');
  ctx = canvas.getContext('2d');
  tablica = [1];
}

function main()
{
  tablica = [];

  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (i = 0;i < 100;i++)
  {
    tablica[i] = i + 1;
  }

  n = tablica.length;

  shuffle(tablica);

  do
  {
    for (i = 0;i < n - 1;i++)
    {
      ctx.fillStyle = 'yellow';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      for (j = 0; j < tablica.length;j++)
      {
        me = Math.random();
        if (me < 0.25)
        {
          ctx.fillStyle = 'red';
        }
        else if (me > 0.25 && me < 0.5)
        {
          ctx.fillStyle = 'purple';
        }
        else if (me > 0.5 && me < 0.75)
        {
          ctx.fillStyle = 'green';
        }
        else if (me > 0.75)
        {
          ctx.fillStyle = 'blue';
        }

        ctx.fillRect(tablica[j] * grid - grid, canvas.height - tablica[j] * grid, grid, grid);
        ctx.fillStyle = 'white';
        ctx.font = '8px Arial';
        ctx.fillText(j + 1,tablica[j] * grid - grid, canvas.height - tablica[j] * grid + grid);
      }

      if (tablica[i] > tablica[i + 1])
      {
        temp = tablica[i];
        tablica[i] = tablica[i + 1];
        tablica[i + 1] = temp;
      }

    }

    n--;
    console.log(tablica);
  }
  while (n > 1);

}

function shuffle(array) {
  var m = array.length, t, i;

  // While there remain elements to shuffle…
  while (m) {

    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);

    // And swap it with the current element.
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }

  return array;
}

0

Umiesz określić co chciałeś z wizualizować słownie?

0

Chciałem zwizualizować efekt sortowania tj. kwadraciki przesuwające się na swoje miejsca.

0
MineMadix napisał(a):

Chciałem zwizualizować efekt sortowania tj. kwadraciki przesuwające się na swoje miejsca.

Na wykresie, czy chcesz taką prostą linie kwadracików i każdy ze swoim kolorem od najjaśniejszego na początu, do najciemniejszego na końcu.

Czy może ułożenie względem czasu?

Ogólnie to można to na nieskończenie wiele sposobów z wizualizować.

0

Prosta linia kwadratów, każdy ze swoim kolorem.

0

Teoretycznie załóżmy, że masz 10 kolorów od 0 do 9.

I teraz tak, wyświetlasz te kolory 1532579, każda liczba to inny kolor.

I wykonujesz sortowanie, musisz samemu tą funkcję napisać, bo jak użyjesz gotowca, to otrzymasz od razu posortowaną i nic nie zobaczysz.
Wewnątrz tej funkcji wypisujesz stan aktualny.

Tak pierwszy element zostanie zamieniony, to wyświetlasz wszystkie + enter, następny to wyświetlasz wyszystkie + enter i tak aż do posortowanie, ale to tak w konsoli klawiatury.
A jak masz jakieś gui, to kilka pixeli w dół i drukujesz dalej zamiast entera.

0

Te do -> while w funkcji main to sortowanie bąbelkowe?

0

Dzięki wielkie za pomoc, wszystko działa.

0

Ja ci nic nie pomogłem, ale jak sobie poradziłeś, to zrobiłeś to sam.

0

Chociaż mam jeden problem, wizualizacja działa ale nie do końca tak jak chciałem.

0

Sortowanie bąbelkowe jest trochę żmudne, bo trzeba sprawdzać, czy nastąpiła chociaż jedna zmiana, jeśli nie, to jest posortowane.

Rozpisz sobie algorymt, sam go najgorzej umiem, bo to najtrudniejszy jest z tego co wiem.|

sprawdzasz pierwszy z drugim, zamieniasz jak coś i tak drugi z trzecim, sprawdzasz, zamieniasz jak cośi tak do końca.
Jakieś wyświetlanie możesz dać co jedno całe przejście lub co zamianę.
Jak nastąpiła jakaś zamiana, to ustawiasz flagę, że true.
I jak na końcu sortowania była flaga true, jakiejś zmiany, to profilaktycznie jeszcze raz sprawdzasz.

Nie wiem czy to co dałeś to sortowanei bąbelkowe, trochę najebany jestem, ale mi na takie nie wygląda.

0

Trochę zmieniłem kod, to jest sortowanie bąbelkowe, aktualizuje wykres po każdej zmianie, aczkolwiek na jeden tick, przenosi mi liczbę od razu na prawidłową pozycję i z tym mam problem.

grid = 10;
window.onload = function()
{
  canvas = document.getElementById('1');
  ctx = canvas.getContext('2d');
  tablica = [];
  setInterval(main, 1000/10);
  n = 0;
}

function main()
{

  if (n > 0)
  {
    for (i = 0;i < n - 1;i++)
    {
      ctx.fillStyle = 'gray';
      ctx.fillRect(0, 0, canvas.width, canvas.height);


      if (tablica[i] > tablica[i + 1])
      {
        temp = tablica[i];
        tablica[i] = tablica[i + 1];
        tablica[i + 1] = temp;
      }

      for (j = 0; j < tablica.length;j++)
      {
        ctx.fillStyle = 'black';
        ctx.fillRect(canvas.height - (j + 1) * grid, tablica[j] * grid, grid - 1, canvas.height);
        ctx.fillStyle = 'white';
        ctx.font = '8px Arial';
        ctx.fillText(tablica[j], canvas.height - (j + 1) * grid, tablica[j] * grid, grid - 1, canvas.height);
      }

    }

    n--;
    console.log(tablica);
  } else {
    for (i = 0;i < 100;i++)
    {
      tablica[i] = i + 1;
    }

    n = tablica.length;

    shuffle(tablica);
  }


}

function shuffle(array) {
  var m = array.length, t, i;

  // While there remain elements to shuffle…
  while (m) {

    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);

    // And swap it with the current element.
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }

  return array;
}
function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

nie jestem pewien czy wszystko jest dobrze

0

możesz to wrzucić na jsfiddle.net, będzie łatwiej sprawdzać.

1 użytkowników online, w tym zalogowanych: 0, gości: 1