https://editor.p5js.org/cxran999/full/0u7n1I7Ot

1.The knockout stage of world cup

There are first half and second half in the knockout stage. each half will pick one team into the final.

There are 4 rounds in the in this stage, round of 16 have 16 teams, quarter-final have 8 teams, Semi-final have 4 teams, and two teams compete for the champion in the final.

for example, in the round of 16, the first team and the second compete for a position in quarter-final. and third team and fourth team compete for a position, and the two winner compete for a position in semi-final.

so I have to build 4 arrays for these 4 rounds and take half of the teams randomly from the last array to next array.

for example, in 16 to 8, I pick first one from team1 and team2, pick second one from team3 and team4,…… pick the 8th team from team15 and team16.

The same thing happen in quarter-final and semi-final, until there is only one team. so there will be a recursion function.

var flag16 = [];
var flag8 = [];
var flag4 = [];
var flag2 = [];
var flag1 = [];
var k = [1, 0];
var p = 1;
var x;
var c;
function preload() {
  for (var i = 0; i < 16; i++) {
    flag16[i] = loadImage(i + 1 + ".png");
  }
}
function setup() {
  createCanvas(windowWidth, windowWidth/2);
  for (var i = 0; i < 8; i++) {
    var m = random(k) + 2 * i;
    flag8[i] = flag16[m];
  }

  for (var i = 0; i < 4; i++) {
    var m = random(k) + 2 * i;
    flag4[i] = flag8[m];
  }

  for (var i = 0; i < 2; i++) {
    var m = random(k) + 2 * i;
    flag2[i] = flag4[m];
  }

  for (var i = 0; i < 1; i++) {
    var m = random(k) + 2 * i;
    flag1[i] = flag2[m];
  }

  x = width / 32 + 30;
  c = width / 16;
}
function pick(n){
	if(n>=1){
	for (var i = 0; i < n; i++) {
    var m = random(k) + 2 * i;
    flag+"n"[i] = flag+"2*n"[m];
  }
	pick(n/2);
}
}
function draw() {
  background(0);
  for (var i = 0; i < 16; i++) {
    image(flag16[i], 10, (i * height) / 16, width / 32, height / 16);
    if (i < 8)
      image(
        flag8[i],
        width / 32 + 30,
        (i * height) / 8,
        width / 16,
        height / 8
      );
    if (i < 4)
      image(
        flag4[i],
        (3 * width) / 32 + 50,
        (i * height) / 4,
        width / 8,
        height / 4
      );
    if (i < 2)
      image(
        flag2[i],
        (7 * width) / 32 + 70,
        (i * height) / 2,
        width / 4,
        height / 2
      );
    if (i < 1)
      image(flag1[i], (15 * width) / 32 + 90, i * height, width / 2, height);
  }

  noStroke();
  fill(0);
  rect(x, 0, width, height);
}

function mousePressed() {
  x += c + 20;
  c *= 2;
}