260116

const { animate } = anime;
const W = 800;
const H = 800;
let palette = [];
let animeValue = {
  count: 0,
};
const NUM = 280;
const OFFSET = 1;
let sortSteps = [];
let currentStep = 0;
let originalSizes = [];
let originalColors = [];
let comparingIndices = [-1, -1];

function setup() {
  createCanvas(W, H, WEBGL);
  palette = colorArray[1].colors;
  background(palette[0]);

  for (let i = 0; i < NUM; i++) {
    originalSizes.push(random(1, 200));
    originalColors.push(palette[(i % (palette.length - 1)) + 1]);
  }

  generateSortSteps();

  animate(animeValue, {
    count: 1,
    duration: 15000,
    ease: 'inExpo',
    loop: true,
    loopDelay: 1000,
    alternate: true,
  });
}

function draw() {
  background(palette[0]);
  orbitControl();

  rotateX(-TAU / 4);

  let f = animeValue.count;

  if (sortSteps.length > 0) {
    currentStep = floor(f * (sortSteps.length - 1));
    currentStep = constrain(currentStep, 0, sortSteps.length - 1);

    let step = sortSteps[currentStep];
    let sizes = step.array;
    let colors = step.colors;
    comparingIndices = step.comparing;

    noFill();

    for (let i = 0; i < sizes.length; i++) {
      push();
      let size = sizes[i];
      strokeWeight(6);
      stroke(colors[i]);
      let angle = (i / sizes.length) * TAU * 8;
      let radius = 15 + i * OFFSET;
      let x = cos(angle) * radius;
      let y = sin(angle) * radius;
      translate(x, 0, y);
      line(0, -size, 0, 0);
      pop();
    }
  }
}

// ソート
function generateSortSteps() {
  let arr = [...originalSizes];
  let colors = [...originalColors];
  sortSteps = [];
  comparingIndices = [];

  for (let i = 0; i < arr.length - 1; i++) {
    for (let j = 0; j < arr.length - i - 1; j++) {
      sortSteps.push({
        array: arr.slice(),
        colors: colors.slice(),
        comparing: [j, j + 1],
        swapped: false,
      });
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
        [colors[j], colors[j + 1]] = [colors[j + 1], colors[j]];
        sortSteps.push({
          array: arr.slice(),
          colors: colors.slice(),
          comparing: [j, j + 1],
          swapped: true,
        });
      }
    }
  }
  sortSteps.push({
    array: arr.slice(),
    colors: colors.slice(),
    comparing: [-1, -1],
    swapped: false,
  });
}

const colorArray = [
  {
    id: 0,
    colors: ['#253276', '#dfdad3', '#ffffff', '#000000'],
  },
  {
    id: 1,
    colors: [
      '#9dbdba',
      '#f8b042',
      '#e47763',
      '#253276',
      '#dfdad3',
      '#FFFFFF',
      '#000000',
    ],
  },
];