let configurations = {};

​

let slider;

​

function setup() {

  createCanvas(400, 200).parent("canvasContainer");

  slider = createSlider(1, 29, 1);

  slider.parent("sliderContainer");

  let tribeColors = ["#00BFFF", "#B22222", "#FFD700"];

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

    let tribe = i < 6 ? "A" : i < 12 ? "B" : "C";

    let col = tribeColors[i < 6 ? 0 : i < 12 ? 1 : 2];

    survivors.push(

      new Survivor(tribe, (i % 6) * 60 + 50, int(i / 6) * 70 + 25, col)

    );

  }

}

​

function draw() {

  background(175);

  survivors.forEach((player) => player.update());

  if (frameCount % (30 - slider.value()) === 0) {

    swap();

    updateTable();

  }

}

​

class Survivor {

  constructor(tribe, x, y, color) {

    this.tribe = tribe;

    this.x = x;

    this.y = y;

    this.targetX = x;

    this.targetY = y;

    this.color = color;

  }

​

  update() {

    let amt = map(slider.value(), 1, 30, 0.2, 1);

    this.x = lerp(this.x, this.targetX, amt);

    this.y = lerp(this.y, this.targetY, amt);

    fill(this.color);

    circle(this.x, this.y, 30);

  }

}

​

function swap() {

  survivors.sort(() => random() - 0.5);

​

  let newTribes = [[], [], []];

  survivors.forEach((survivor, index) => {

    newTribes[index % 3].push(survivor.tribe);

  });

​

  let config = newTribes.map((tribe) => [

    tribe.filter((g) => g === "A").length,

    tribe.filter((g) => g === "B").length,

    tribe.filter((g) => g === "C").length,

  ]);

​

  // Sort the groups themselves using your method

  config.sort((a, b) => {

    return a.join("") > b.join("") ? 1 : -1;

  });

​

  const configKey = JSON.stringify(config);

​

  configurations[configKey] = (configurations[configKey] || 0) + 1;

​

  // Updating the target positions for animation

  survivors.forEach((survivor, index) => {

    survivor.targetX = (index % 5) * 70 + 50;

    survivor.targetY = int(index / 5) * 70 + 25;

  });

}

​

function updateTable() {

  let tableContainer = document.getElementById("tableContainer");

  tableContainer.innerHTML = "";

  let table = document.createElement("table");

  tableContainer.appendChild(table);

​

  let headers = ["Configuration", "Count", "Probability"];

  let headerRow = table.insertRow();

  headers.forEach((header) => {

    let th = document.createElement("th");

    th.innerText = header;

    headerRow.appendChild(th);

  });

​

  let total = 0;

  for (let key in configurations) {

    total += configurations[key];

  }

​

  // Convert the configurations object into an array and sort it by count in descending order

  let sortedConfigurations = Object.entries(configurations).sort(

    (a, b) => b[1] - a[1]

  );

​

  sortedConfigurations.forEach(([key, count]) => {

    let row = table.insertRow();

​

    // Check if the configuration matches the target, and if so, apply the highlight style

    if (

      key ===

      JSON.stringify([

        [0, 4, 1],

        [2, 2, 1],

        [4, 0, 1],

      ])

    ) {

      row.style.backgroundColor = "#daf8da"; // You can choose another color or style

    }

​

    let configCell = row.insertCell();

    configCell.innerText = key;

​

    let countCell = row.insertCell();

    countCell.innerText = count;

​

    let probCell = row.insertCell();

    probCell.innerText = ((count / total) * 100).toFixed(2) + "%";

  });

}

​