let n = 50; // Number of bars

let i = 0; // Current index in outer loop

let j = 0; // Current index in inner loop

let swapping = false;

let paused = true;

let sorted = false;

​

function setup() {

  createCanvas(800, 600);

  noLoop();

  initializeArray();

  createUI();

  drawBars();

}

​

function draw() {

  background(255);

  drawBars();

  if (!paused && !sorted) {

    bubbleSortStep();

  }

}

​

function initializeArray() {

  values = [];

  for (let i = 0; i < n; i++) {

    values.push(random(height));

  }

}

​

function drawBars() {

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

    if (i === j || i === j + 1) {

      fill(255, 0, 0); // Highlight colors for current comparison

    } else {

      fill(0, 150, 255); // Normal colors

    }

    rect(i * (width / n), height - values[i], width / n, values[i]);

  }

  fill(0);

  textSize(16);

  textAlign(CENTER, CENTER);

  text("Bubble Sort Visualization", width / 2, 30);

  textSize(12);

  text("Click 'Start' to begin. Click 'Pause' to pause. Click 'Reset' to restart.", width / 2, 50);

}

​

function bubbleSortStep() {

  if (j >= n - i - 1) {

    j = 0;

    i++;

    if (i >= n - 1) {

      sorted = true;

      noLoop();

      fill(0);

      textSize(24);

      textAlign(CENTER, CENTER);

      text("Sorting Complete!", width / 2, height / 2);

      return;

    }

  }

​

  if (values[j] > values[j + 1]) {

    swapping = true;

    swap(j, j + 1);

  }

​

  j++;

}

​

function swap(a, b) {

  let temp = values[a];

  values[a] = values[b];

  values[b] = temp;

}

​

function createUI() {

  let startButton = createButton('Start');

  startButton.position(10, height + 10);

  startButton.mousePressed(() => {

    if (sorted) {

      sorted = false;

      initializeArray();

      i = 0;

      j = 0;

      loop();

    } else {

      paused = false;

      loop();

    }

  });

​

  let pauseButton = createButton('Pause');

  pauseButton.position(70, height + 10);

  pauseButton.mousePressed(() => {

    paused = true;

    noLoop();

  });

​

  let resetButton = createButton('Reset');

  resetButton.position(130, height + 10);

  resetButton.mousePressed(() => {

    paused = true;

    sorted = false;

    initializeArray();

    i = 0;

    j = 0;

    drawBars();

  });

}

​