let states = [];

​

function setup() {

  createCanvas(800, 400);

  array = new Array(floor(width / 10)); // Adjust the size of the array based on width

  for (let i = 0; i < array.length; i++) {

    array[i] = random(height);

    states[i] = -1; // State for visualization (coloring)

  }

  mergeSort(array, 0, array.length - 1);

}

​

function draw() {

  background(0);

​

  // Display bars

  for (let i = 0; i < array.length; i++) {

    noStroke();

    if (states[i] == 0) {

      fill(255, 0, 0); // Red color indicates merging

    } else if (states[i] == 1) {

      fill(0, 255, 0); // Green indicates sorted

    } else {

      fill(255); // White for unsorted

    }

    rect(i * 10, height - array[i], 9, array[i]);

  }

}

​

async function mergeSort(arr, start, end) {

  if (start >= end) {

    return;

  }

  let mid = floor((start + end) / 2);

  await mergeSort(arr, start, mid);

  await mergeSort(arr, mid + 1, end);

  await merge(arr, start, mid, end);

}

​

async function merge(arr, start, mid, end) {

  let left = arr.slice(start, mid + 1);

  let right = arr.slice(mid + 1, end + 1);

  let i = 0, j = 0, k = start;

​

  while (i < left.length && j < right.length) {

    states[k] = 0; // Mark as being merged

    if (left[i] < right[j]) {

      arr[k] = left[i];

      i++;

    } else {

      arr[k] = right[j];

      j++;

    }

    k++;

    await sleep(50); // Adding delay for visualization

  }

​

  while (i < left.length) {

    arr[k] = left[i];

    i++;

    k++;

    await sleep(50);

  }

​

  while (j < right.length) {

    arr[k] = right[j];

    j++;

    k++;

    await sleep(50);

  }

​

  // Mark the section as sorted

  for (let i = start; i <= end; i++) {

    states[i] = 1;

  }

}

​

function sleep(ms) {

  return new Promise(resolve => setTimeout(resolve, ms));

}

​