2

Eu tentei redesenhar o canvas toda vez que ele faz um swap, porem ele primeiro renderiza tudo e depois desenha. Gostaria que a cada Swap, ele redesenhe o canvas com as informações do objeto.

<!DOCTYPE html>
<html>
    <head>
        <script
          src="https://code.jquery.com/jquery-3.2.1.min.js"
          integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
          crossorigin="anonymous"></script>

        <style type="text/css">
            body{
                margin: 0;
            }
        </style>
    </head>

    <body>
        <canvas id="canvas" class="canvas" width="1400" height="750">
        </canvas>
    </body>
</html>

<script type="text/javascript">
    const Y = 700;
    const X = 50;
    const size = 10; 
    const max_rand = 60;
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');


    $(document).ready(function(){
        var numbers = [];

        for (var i = 0; i < 121; i++) {
            numbers.push({number: Math.random() * max_rand, color: getRandomColor()});
        }
        
        drawGraph(numbers);

        sleep(200);

        quickSort(numbers, 0, numbers.length-1); 
    });

    function drawGraph(numbers){
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        var x = X;
        var y = Y;

        for (var i = 0; i < numbers.length; i++) {
            ctx.fillStyle = numbers[i].color;

            for (var j = 0; j < numbers[i].number; j++) {
                ctx.fillRect(x, y, size, size);

                y -= size;
            }

            x += size;
            y = Y;
        }
    }

    function sleep(miliseconds) {
       var currentTime = new Date().getTime();

       while (currentTime + miliseconds >= new Date().getTime()) {
       }
    }

    function quickSort(numbers, left, right) {
        var index;

        if (numbers.length > 1) {

            index = partition(numbers, left, right);

            if (left < index - 1) {
                quickSort(numbers, left, index - 1);
            }

            if (index < right) {
                quickSort(numbers, index, right);
            }

        }

        return numbers;
    }

    function swap(numbers, firstIndex, secondIndex){
        var temp = numbers[firstIndex].number;
        numbers[firstIndex].number = numbers[secondIndex].number;
        numbers[secondIndex].number = temp;

        drawGraph(numbers);
        sleep(50);
    }

    function partition(numbers, left, right) {

        var pivot   = numbers[Math.floor((right + left) / 2)].number,
            i       = left,
            j       = right;


        while (i <= j) {

            while (numbers[i].number < pivot) {
                i++;
            }

            while (numbers[j].number > pivot) {
                j--;
            }

            if (i <= j) {
                swap(numbers, i, j);
                i++;
                j--;
            }
        }

        return i;
    }

    function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }
</script>

2 Respostas 2

3

Consegui resolver usando o conceito de funções assíncronas.

Para transformar o seu código em assíncrono, tive que reescrever a função sleep. As demaais funções foi só acrescentar algumas palavras-chave async e await onde pertinente.

O problema é que como o código era síncrono, ele executava tudo antes de devolver o controle de volta ao navegador para que este pudesse fazer seu trabalho de redesenhar a tela. Com o código assíncrono, isso não acontece mais.

Também renomeei as constantes X e Y para xBase e yBase porque acho que na função drawGraph misturar nomes x e X e também y e Y é algo que tende a gerar muita confusão.

const yBase = 700;
const xBase = 50;
const size = 10; 
const max_rand = 60;
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

$(document).ready(function() {
    var numbers = [];

    for (var i = 0; i < 121; i++) {
        numbers.push({number: Math.random() * max_rand, color: getRandomColor()});
    }

    drawGraph(numbers);
    quickSort(numbers, 0, numbers.length - 1);
});

function drawGraph(numbers) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    var x = xBase;
    var y = yBase;

    for (var i = 0; i < numbers.length; i++) {
        ctx.fillStyle = numbers[i].color;

        for (var j = 0; j < numbers[i].number; j++) {
            ctx.fillRect(x, y, size, size);

            y -= size;
        }

        x += size;
        y = yBase;
    }
}

function sleep(miliseconds) {
    return new Promise(resolve => {
        setTimeout(resolve, miliseconds);
    });
}

async function quickSort(numbers, left, right) {
    if (numbers.length > 1) {

        var index = await partition(numbers, left, right);

        if (left < index - 1) {
            await quickSort(numbers, left, index - 1);
        }

        if (index < right) {
            await quickSort(numbers, index, right);
        }

    }
    return numbers;
}

async function swap(numbers, firstIndex, secondIndex, next) {
    var temp = numbers[firstIndex].number;
    numbers[firstIndex].number = numbers[secondIndex].number;
    numbers[secondIndex].number = temp;

    drawGraph(numbers);
    await sleep(50);
}

async function partition(numbers, left, right) {

    var pivot   = numbers[Math.floor((right + left) / 2)].number,
        i       = left,
        j       = right;

    while (i <= j) {

        while (numbers[i].number < pivot) {
            i++;
        }

        while (numbers[j].number > pivot) {
            j--;
        }

        if (i <= j) {
            await swap(numbers, i, j);
            i++;
            j--;
        }
    }

    return i;
}

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
body {
    margin: 0;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<canvas id="canvas" class="canvas" width="1400" height="750">
</canvas>

1

O problema é que a sua função sleep bloqueia a thread, evitando que o navegador possa processar qualquer outra coisa (renderização ou eventos). Isso acontece porque JavaScript é por natureza monothread.

Você pode contornar isso usando a função setTimeout, que aceita um callback e um número de milissegundos que será esperado para chamar o callback. Outra opção é o setInterval, que funciona de maneira parecida, mas a função é executado múltiplas vezes.

Você pode também utilizar a função requestAnimationFrame, e verificar se o tempo mínimo desde a última renderização já passou, mas essa solução exige um pouco mais de recursos do processador, já que requestAnimationFrame visa atingir 60 frames por sergundo.

Solução utilizando async:

<!DOCTYPE html>
<html>
    <head>
        <script
          src="https://code.jquery.com/jquery-3.2.1.min.js"
          integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
          crossorigin="anonymous"></script>

        <style type="text/css">
            body{
                margin: 0;
            }
        </style>
    </head>

    <body>
        <canvas id="canvas" class="canvas" width="1400" height="750">
        </canvas>
    </body>
</html>

<script type="text/javascript">
    const Y = 700;
    const X = 50;
    const size = 10; 
    const max_rand = 60;
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    async function run() {
        var numbers = [];

        for (var i = 0; i < 121; i++) {
            numbers.push({number: Math.random() * max_rand, color: getRandomColor()});
        }

        drawGraph(numbers);

        await sleep(200);

        await quickSort(numbers, 0, numbers.length-1); 
    }

    $(document).ready(function(){
        run();
    });

    function drawGraph(numbers){
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        var x = X;
        var y = Y;

        for (var i = 0; i < numbers.length; i++) {
            ctx.fillStyle = numbers[i].color;

            for (var j = 0; j < numbers[i].number; j++) {
                ctx.fillRect(x, y, size, size);

                y -= size;
            }

            x += size;
            y = Y;
        }
    }

    async function sleep(miliseconds) {
        return new Promise(function (resolve, reject) { setTimeout(resolve, miliseconds) });
    }

    async function quickSort(numbers, left, right) {
        var index;

        if (numbers.length > 1) {

            index = await partition(numbers, left, right);

            if (left < index - 1) {
                await quickSort(numbers, left, index - 1);
            }

            if (index < right) {
                await quickSort(numbers, index, right);
            }

        }

        return numbers;
    }

    async function swap(numbers, firstIndex, secondIndex){
        var temp = numbers[firstIndex].number;
        numbers[firstIndex].number = numbers[secondIndex].number;
        numbers[secondIndex].number = temp;

        drawGraph(numbers);
        await sleep(50);
    }

    async function partition(numbers, left, right) {

        var pivot   = numbers[Math.floor((right + left) / 2)].number,
            i       = left,
            j       = right;


        while (i <= j) {

            while (numbers[i].number < pivot) {
                i++;
            }

            while (numbers[j].number > pivot) {
                j--;
            }

            if (i <= j) {
                await swap(numbers, i, j);
                i++;
                j--;
            }
        }

        return i;
    }

    function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }
</script>
5
  • Você pode complementar o código mostrando a forma que o requestAnimationFrame ficaria no código que coloquei na questão ?? 22/10/2017 às 20:19
  • Você está implementando isso apenas para aprendizado, ou você pretende publicar isso para ser usado por outras pessoas? Caso seja a primeira opção, você pode usar async/await, que já é suportado pelos browsers mais modernos. 22/10/2017 às 20:51
  • Apenas para aprendizado mesmo. 22/10/2017 às 21:06
  • Adicionei o código adaptado com async/await. Ficou bem legal sua implementação por sinal. :) 22/10/2017 às 21:14
  • Funcionou perfeitamente. 22/10/2017 às 21:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .