creative-coding/7/sketch.js

const numBars = 100;
const barWidth = 20;
const maxBarHeight = 200;
const barColor = [255, 127, 127];
const barSpacing = 5;
const swapRate = 10;
let oldBars = [];
let osc;

function isSorted(arr) {
  for (let i = 0; i < arr.length - 1; i++) {
    if (arr[i] > arr[i + 1]) return false;
  }
  return true;
}

function refreshBars(p, bars) {
  const barX = (i) => i * (barWidth + barSpacing) + barSpacing;
  p.clear();
  p.background(10);
  for (let i = 0; i < numBars; i++) {
    p.fill(barColor);
    p.rect(barX(i), p.height - bars[i], barWidth, bars[i]);
  }
  diffIndexArray = bars
    .map((val, i) => (val !== oldBars[i] ? i : -1))
    .filter((i) => i !== -1);
  for (bar of diffIndexArray) {
    p.fill(180, 0, 180);
    p.rect(barX(bar), p.height - bars[bar], barWidth, bars[bar]);
  }
  oldBars = [...bars];
}

const sketch = function (p) {
  let bars = [];
  p.setup = function () {
    p.createCanvas(
      numBars * (barWidth + barSpacing) + barSpacing,
      maxBarHeight * 1.25
    );
    p.background(10);
    for (let i = 0; i < numBars; i++) {
      bars[i] = p.random(10, maxBarHeight);
    }
    oldBars = [...bars];
    p.noLoop();
    p.userStartAudio();
    osc = new p5.Oscillator("sine");
    executeSortingFunction("insertionSort", bars, p);
  };
};

function mousePressed() {
  console.log(p.getAudioContext());
  userStartAudio();
  console.log(p.getAudioContext());
}

async function executeSortingFunction(functionAsString, bars, p) {
  switch (functionAsString) {
    case "bogoSort":
      await bogoSort(bars, p);
      break;
    case "bozoSort":
      await bozoSort(bars, p);
      break;
    case "stalinSort":
      await stalinSort(bars, p);
      break;
    case "bubbleSort":
      await bubbleSort(bars, p);
      break;
    case "insertionSort":
      await insertionSort(bars, p);
      break;
  }
  refreshBars(p, bars);
  p.colorMode(p.HSL);
  osc.start();
  for (let i = 0; i < bars.length; i++) {
    p.fill((i / bars.length) * 360, 100, 50);
    p.rect(
      i * (barWidth + barSpacing) + barSpacing,
      p.height - bars[i],
      barWidth,
      bars[i]
    );
    osc.freq(((bars[i] * maxBarHeight) / 20 ) + 500);
    await new Promise((resolve) => setTimeout(resolve, 50));
  }
  osc.stop();
}

async function bogoSort(arr, p) {
  while (!isSorted(arr)) {
    for (let i = arr.length - 1; i > 0; i--) {
      // Fisher-Yates-Shuffle
      const j = Math.floor(Math.random() * (i + 1));
      [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    refreshBars(p, arr);
    await new Promise((resolve) => setTimeout(resolve, swapRate));
  }
  return arr;
}

async function bozoSort(arr, p) {
  while (!isSorted(arr)) {
    const bar1 = Math.floor(Math.random() * arr.length);
    const bar2 = Math.floor(Math.random() * arr.length);
    [arr[bar1], arr[bar2]] = [arr[bar2], arr[bar1]];
    refreshBars(p, arr);
    await new Promise((resolve) => setTimeout(resolve, swapRate));
  }
  return arr;
}

async function stalinSort(arr, p) {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] < arr[i - 1]) {
      arr.splice(i, 1);
      i -= 1;
      refreshBars(p, arr);
      await new Promise((resolve) => setTimeout(resolve, swapRate));
    }
  }
  return arr;
}

async function bubbleSort(arr, p) {
  while (!isSorted(arr)) {
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] > arr[i + 1]) {
        [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];
        refreshBars(p, arr);
        await new Promise((resolve) => setTimeout(resolve, swapRate));
      }
    }
  }
  return arr;
}

async function insertionSort(arr, p) {
  for (let i = 0; i <= arr.length - 1; i++) {
    let currentBarIndex = i;
    while (
      currentBarIndex > 0 &&
      arr[currentBarIndex - 1] > arr[currentBarIndex]
    ) {
      [arr[currentBarIndex], arr[currentBarIndex - 1]] = [
        arr[currentBarIndex - 1],
        arr[currentBarIndex],
      ];
      currentBarIndex--;
      refreshBars(p, arr);
      await new Promise((resolve) => setTimeout(resolve, swapRate));
    }
  }
  return arr;
}

const sketch2 = function (p) {};

p5Sketch = new p5(sketch);