Визуализатор сортировки слиянием

Question

Мой визуализатор сортировки слиянием dr aws массив, но не показывает их сортировку и, похоже, неправильно объединяет их и отображает каждый шаг. вместо возврата отсортированного массива я быстро вижу sh массива, а затем пустой экран.

values ​​- это массив, а состояния должны изменяться в значении от -1 до 1 в зависимости от того, выполняется ли индекс в настоящее время, ожидает или завершен, но я пытаюсь сначала заставить сортировку и слияние .

//array of values to be sorted
let values = [];
//width of values
let w = 2;
//hold the state of the array
let states = [];

function setup() {
    createCanvas(windowWidth, windowHeight);
    values = new Array(floor(random(250, width / w)));
    for (i = 0; i < values.length; i++) {
        values[i] = random(height);
        states[i] = -1;
    }

}

async function mergeSort(arr) {
    if (arr.length <= 1) {
        return arr;
    }

    //get midpoint
    let mid = Math.round(arr.length / 2);
    states[mid] = -1;
    //split the array
    temp1 = arr.slice(0, mid);
    temp2 = arr.slice(mid, arr.length);
    //merge the array
    await Promise.all([
        merge(mergeSort(temp1), mergeSort(temp2))
    ]);

}

async function merge(arr1, arr2) {
    await sleep(25);
    let sorted = [];
    while (arr1.length > 0 && arr2.length > 0) {
        (arr1[0] < arr2[0]) ? sorted.push(arr1.shift()): 
sorted.push(arr2.shift());
    }
    while (arr1.length > 0) {
        sorted.push(arr1.shift());
    }
    while (arr2.length > 0) {
        sorted.push(arr2.shift());
    }
    values = sorted.slice();
}

function draw() {
    background(0);
    mergeSort(values);
    for (let i = 0; i < values.length; i++) {
        noStroke();
        if (states[i] == 0) {
            fill('#38e332');
        } else if (states[i] == 1) {
            fill('#c9c8c7');
        } else {
            fill(255);
        }
        //draw the array values at location x=i*w , y=height-array[i] with given width (w) and height(array[i])
        rect(i * w, height - values[i], w, values[i]);
    }

}


async function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
'