let k = 4;

let n = 6;

let cList = [];

let cNumber;

let actPos = 1;

let roundActPos = 1;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  //KaTeX

  tex = createP();

  tex.style('font-size', '20px');

​

  //slider

  slider1 = createSlider(0, 1000, 0);

  slider1.style('width', '300px');

  slider1.addClass('slider1');

​

  //k

  slider2 = createSlider(0, 10, 4);

  slider2.style('width', '300px');

  slider2.addClass('slider2');

​

  //n

  slider3 = createSlider(0, 10, 6);

  slider3.style('width', '300px');

  slider3.addClass('slider3');

​

  //create all combinations of "n+k choose k" in an array

  cList = createCombinations();

  cNumber = cList.length;

}

​

function draw() {

  background(48, 50, 52);

  frameRate(30);

  noStroke();

  fill(208, 203, 196);

​

  slider1.position(width / 2 - 155, 400);

  slider2.position(width / 2 - 155, 300);

  slider3.position(width / 2 - 155, 330);

  tex.position(width / 2 - 110, 180);

​

  let n_old = n;

  n = slider2.value()

​

  if (n_old != n) {

    cList = createCombinations();

    cNumber = cList.length;

  }

​

  let k_old = k;

  k = slider3.value()

​

  if (k_old != k) {

    cList = createCombinations();

    cNumber = cList.length;

  }

​

  let cPos = round(slider1.value() / 1000 * (cNumber - 1) + 1);

​

  actPos = actPos + (cPos - actPos) / 10;

​

  roundActPos = round(actPos);

​

  let m = n + k;

​

  katex.render('\\color{#d0cbc4}\\displaystyle {' + m + '\\choose' + n + '}=\\frac{' + m + '!}{\\color{#268bd2}' + n + '!\\;\\color{#ff9933}' + k + '!}=' + cNumber, tex.elt);

​

  textSize(16);

  text("Kombination " + roundActPos + " von " + cNumber, width / 2 - 80, 100);

​

  let binPos = cList[Math.max(Math.min(roundActPos - 1, cNumber - 1), 0)];

​

​

  var count = 0;

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

    if (binPos[i] == "1") {

      fill(255, 153, 51);

      square(width / 2 - (m / 2) * 35 + i * 35, 130, 30, 5);

      count += 1;

    } else {

      fill(38, 139, 210);

      square(width / 2 - (m / 2) * 35 + i * 35, 130, 30, 5);

    }

​

  }

}

​

function createCombinations() {

​

  maxDec = Math.pow(2, n + k);

  var combiList = [];

​

  for (j = 0; j < maxDec; j++) {

    let binString = j.toString(2).split("");

    var count = 0;

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

      if (binString[i] == 1) {

        count += 1;

      }

      if (binString[i] != 1 && binString[i] != 0) {

        binString.unshift("0");

      }

    }

    if (count == k) {

      combiList.push(binString);

    }

  }

  return combiList;

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}