let gems=[];

let box_x=400;

let box_y=100;

let box_d=150;

let num_of_gems=400;

let b_can,s_can;

let clickC=0;

let hand="";

let num_of_gems_filled=0;

let sc=0;

let rowc=0;

let samples=[];

let adct=[];

let bs=[];

function setup() {

  createCanvas(600, 400);

  background('white');

  b_can=createGraphics(200,400);

//  s_can=createGraphics(400,400);

  b_can.background('white');

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

    gems.push({x:random(25,165),y:random(box_y+100,box_y+50+box_d),gem:random(gems_types)});

  }

  make_box(25,150,box_d,box_d);

​

  image(b_can,400,0);

  frameRate(5);

​

}

​

function draw() {

  //print(rowc);

 /* if(mouseIsPressed){

    text("🤛🏻",mouseX,mouseY);

  }*/

  if(rowc<10 && clickC===1){

    let ss=draw_sample();

    samples.push(ss.sort(cmpr));

    let d={'🔴':0,'🟢':0,'🔵':0,'🟣':0};

    textSize(12);

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

       text(ss[i][0],15+20*i,50+30*rowc);

       d[ss[i][0]]+=1;

    }

    adct.push(d);

    rowc++;

  }

  else if(rowc<20 && clickC===2){

    let sss=samples[rowc-10];

    let ar=['🔴','🟢','🔵','🟣'];

    let cl=['red','green','blue','purple'];

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

       fill(cl[i]);

       text(adct[rowc-10][ar[i]],150+20*i,50+30*(rowc-10));

    }

    rowc++;

  }

  else if (rowc==20 && clickC===3){

      let cl=['red','green','blue','purple'];

      let x=[];

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

         fill(cl[i]);

        x[i]=createP();

        x[i].position(150+20*i,30*(rowc-20));

        x[i].style('color',cl[i]);

        x[i].style('font-size','15px');

        katex.render('x_'+(i+1), x[i].elt);

         //text("x"+(i+1),150+20*i,30+30*(rowc-20));

      }

      rowc++;

  }

  else if(rowc==21 && clickC===4){

    let p=createP();

    p.position(10,height-50);

    p.style('color','brown');

    p.style('font-size','10px');

    katex.render("So~each~combination~can~be~seen~as~(x_1,x_2,x_3,x_4)~such~that~x_1+x_2+x_3+x_4=6,x_i\\ge0~for~i=1,2,3,4",p.elt);

    rowc++;

  }

  else if(rowc<32 && clickC===5){

    let sss=samples[rowc-22];

    let ar=['🔴','🟢','🔵','🟣'];

    let cl=['red','green','blue','purple'];

    fill("black");

    text("→",230,50+30*(rowc-22));

    let t=0;

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

      for( let j=0;j<adct[rowc-22][ar[i]];j++){

            fill(cl[i]);

            text(0,250+10*t,50+30*(rowc-22)); t++;

      }

      if(i< (ar.length-1)) { fill('black');text(1,250+10*t,50+30*(rowc-22)); t++};

     // print(adct[rowc-22]);

​

      }

    }

    else if(rowc==32 && clickC===6){

      fill('black');

      text("Number of binary strings of length nine",360,50);

       text("with exactly three 1's",360,80);

        let p=createP();

        p.position(475,50);

        p.style('color','Indigo');

        p.style('font-size','15px');

        katex.render("= \\binom{9}{3} = \\binom{6+4-1}{4-1}",p.elt);

        rowc++;

    }

    else if(rowc == 33) noLoop();

​

}

​

function make_box(x,y,d){

  b_can.strokeWeight(2);

  //noFill();

  b_can.ellipse(x+d/2,y,d,d/10);

  b_can.ellipse(x+d/2,y+d,d,d/10);

  b_can.line(x,y,x,y+d)

  b_can.line(x+d,y,x+d,y+d)

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

    b_can.text(gems[i].gem[0],gems[i].x,gems[i].y);

  }

​

}

​

function mousePressed(){

  clickC++;

}

function cmpr(a,b){

   if(a[1]>b[1]) return 1;

   if(a[1]<b[1]) return -1;

   return 0;

}

​

function draw_sample(){

   let s= new Set();

  let r=[];

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

     let ix=floor(random(0,gems.length));

     if (! s.has(ix)) 

     {

       r.push(gems[ix].gem);

       s.add(ix);

     } 

     else{i--;}

   }

  return r;

}

​

function toBs(smps){

  smpslist=[];

  let ar=['🔴','🟢','🔵','🟣'];

  let d={'🔴':0,'🟢':1,'🔵':2,'🟣':3};

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

    let t=0;

    let ts=[];

    for(let j=0;j<smps[i].length;j++){

        if(smps[i][j][0]!=ar[t]){

            let ii=0;

            while(ii<d[smps[i][j][0]]-d[ar[t]]){

              ts.push("1"); ii++;

            }

            t=t+ii;

        }

        ts.push(smps[i][j][0]);

​

    }

  smpslist.push(ts);

​

  }

  return smpslist;

}

​

function keyPressed(){rowc++;}

​