let k = 2;

let n = 2;

let cList = [];

let cNumber;

let actPos = 1;

let roundActPos = 1;

let blueMutations;

let orangeMutations;

let binPos;

let firstTime;

​

let hutBlau;

let hutOrange;

function preload() {

  hutBlau = loadImage('assets/HuT-M-blau.jpg');

  hutOrange = loadImage('assets/HuT-M-orange.jpg');  

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  firstTime = 1;

​

  //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, 4, 2);

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

  slider2.addClass('slider2');

​

  //n

  slider3 = createSlider(0, 4, 2);

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

  slider3.addClass('slider3');

​

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

  cList = createCombinations();

  cNumber = cList.length;

​

  let numbers = [1, 2, 3];

  createPermutations(numbers);

}

​

function draw() {

  background(48, 50, 52);

  frameRate(30);

  noStroke();

  fill(208, 203, 196);

​

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

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

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

  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 m = n + k;

  let roundActPos_old = roundActPos;

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

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

​

  if(m===0) {

    binPos = [];

  }

​

  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, 70);

​

  textSize(26);

  let blue = [];

  let orange = [];

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

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

      orange.push(orange.length+n);

      fill(255, 153, 51);

      image(hutOrange, width / 2 - (m / 2) * 60 + (i ) * 60, 80, 70,100);

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

      fill(48,50,52);

      text(orange.length+n, width / 2 - (m / 2) * 60 + (i ) * 60 + 25, 160);

    } else {

      blue.push(blue.length);

      fill(38, 139, 210);

      image(hutBlau, width / 2 - (m / 2) * 60 + (i ) * 60, 80, 70,100);

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

      fill(48,50,52);

      text(blue.length, width / 2 - (m / 2) * 60 + (i ) * 60 + 25, 160);

    }

  }

​

  textSize(12);

​

  blueMutations = createPermutations(blue);

  orangeMutations = createPermutations(orange);

  let bL = Math.max(blueMutations.length,1);

  let oL = Math.max(orangeMutations.length,1);

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

    for (let j = 0; j < oL; j++) {

      let blueCount=0;

      let orangeCount=0;

      for (let k = 0; k < binPos.length; k++) {

        if (binPos[k]==="0") {

          fill(38, 139, 210);

          text(blueMutations[i][k-orangeCount]+1, (width-(binPos.length*7+7)*blueMutations.length) / 2  + k*7 + binPos.length*7*i+i*7, 400+ 15*j);

          blueCount=blueCount+1;

        }

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

          fill(255, 153, 51);

          text(orangeMutations[j][k-blueCount]+1, (width-(binPos.length*7+7)*blueMutations.length) / 2 + k*7 + binPos.length*7*i+i*7, 400+ 15*j);

          orangeCount=orangeCount+1;

        }

      }

    }

  }

}

​

function createPermutations(xs) {

  let ret = [];

​

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

    let rest = createPermutations(xs.slice(0, i).concat(xs.slice(i + 1)));

​

    if (!rest.length) {

      ret.push([xs[i]])

    } else {

      for (let j = 0; j < rest.length; j = j + 1) {

        ret.push([xs[i]].concat(rest[j]))

      }

    }

  }

  return ret;

}

​

function createCombinations() {

​

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

  let combiList = [];

​

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

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

    let count = 0;

    for (let 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);

}