Central limit theorem

let Eng = Matter.Engine,

    Run = Matter.Runner,

    Bods = Matter.Bodies,

    Comp = Matter.Composite;

​

let eng;

let wrld;

let prts = [];

let pgs = [];

let bnds = [];

let bns = [];

let cls = 12;

let rws = 12;

let pc = 0;

let maxPc = 300;

let btn;

let toggleBtn;

let runner;

let byebyebe = 1;

let fcccc = 0;

let byebyeone = true;

​

function setup() {

    createCanvas(800, 700);

    if (width > height) {

        resizeCanvas(height * 1.3, height); 

    }

    let spcX = width / (cls + 1);

    let spcY = height / (rws + 7);

    eng = Eng.create();

    wrld = eng.world;

    bnds.push(new Bnd(width / 2, height, width, 0.05 * height));

    bnds.push(new Bnd(0, height / 2, 0.05 * width, height));

    bnds.push(new Bnd(width, height / 2, 0.05 * width, height));

    bnds.push(new Bnd(width / 2, 0, width, 0.05 * height));

​

    let bYOffset = 0.01 * height;

    bnds.push(new Bnd(width / 2 - 0.12 * width, bYOffset, 0.24 * width, 0.02 * height, PI / 4));

    bnds.push(new Bnd(width / 2 + 0.12 * width, bYOffset, 0.24 * width, 0.02 * height, -PI / 4));

​

    let pRad = 0.01 * height;

    let yOff = bYOffset + 0.1 * height;

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

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

            let x = (width / 2) + (i - j / 2) * spcX;

            let y = yOff + j * spcY;

            let pg = new Pg(x, y, pRad);

            pgs.push(pg);

        }

    }

​

    let bWidth = spcX;

    for (let i = 1; i < cls; i++) {

        let x = i * bWidth + bWidth / 2;

        let y = height - 0.05 * height;

        let bn = new Bnd(x, y, 0.01 * width, 0.3 * height);

        bns.push(bn);

    }

​

    runner = Run.create();

    Run.run(runner, eng);

​

    btn = createButton('Refresh');

    btn.position(20, 100);

    btn.style('background-color', '#008CBA');

    btn.style('color', 'white');

    btn.style('padding', '10px');

    btn.style('border', 'none');

    btn.style('border-radius', '12px');

    btn.mousePressed(refreshPrts);

​

    toggleBtn = createButton('All at Once');

    toggleBtn.position(20, 160);

    toggleBtn.style('background-color', '#f44336');

    toggleBtn.style('color', 'white');

    toggleBtn.style('padding', '10px');

    toggleBtn.style('border', 'none');

    toggleBtn.style('border-radius', '12px');

    toggleBtn.mousePressed(toggleDropMode);

}

​

function draw() {

    background(100);

​

    fill(255);

    textSize(24);

    text("Num: " + pc, 20, 40);

​

    if (byebyeone) {

        if (fcccc % byebyebe === 0 && pc < maxPc) {

            addPrt();

        }

        fcccc++;

    }

​

    for (let pg of pgs) {

        pg.shw();

    }

​

    for (let bn of bns) {

        bn.shw();

    }

​

    for (let bnd of bnds) {

        bnd.shw();

    }

​

    for (let prt of prts) {

        prt.shw();

    }

}

​

function addPrt() {

    let spcY = height / (rws + 7);

    let rndX = width / 2 + random(-0.02 * width, 0.02 * width);

    prts.push(new Prt(rndX, spcY / 2, 0.01 * height));

    pc++;

}

​

function addPrts(spcY) {

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

        let rndX = width / 2 + random(-0.02 * width, 0.02 * width);

        prts.push(new Prt(rndX, spcY / 2, 0.01 * height));

        pc++;

    }

}

​

function refreshPrts() {

    for (let prt of prts) {

        Comp.remove(wrld, prt.b);

    }

    prts = [];

    pc = 0;

    fcccc = 0;

    if (!byebyeone) {

        addPrts(height / (rws + 3));

    }

}

​

function toggleDropMode() {

    byebyeone = !byebyeone;

    toggleBtn.html(byebyeone ? 'All at Once' : 'One by One');

    refreshPrts();

}

​

class Prt {

    constructor(x, y, r) {

        this.b = Bods.circle(x, y, r, { restitution: 0.5 });

        this.r = r;

        Comp.add(wrld, this.b);

    }

​

    shw() {

        fill(255);

        stroke(255);

        let pos = this.b.position;

        push();

        translate(pos.x, pos.y);

        ellipse(0, 0, this.r * 2);

        pop();

    }

}

​

class Pg {

    constructor(x, y, r) {

        this.b = Bods.circle(x, y, r, { isStatic: true });

        this.r = r;

        Comp.add(wrld, this.b);

    }

​

    shw() {

        fill(127);

        stroke(200);

        let pos = this.b.position;

        push();

        translate(pos.x, pos.y);

        ellipse(0, 0, this.r * 2);

        pop();

    }

}

​

class Bnd {

    constructor(x, y, w, h, ang = 0) {

        this.b = Bods.rectangle(x, y, w, h, { isStatic: true, angle: ang });

        this.w = w;

        this.h = h;

        Comp.add(wrld, this.b);

    }

​

    shw() {

        fill(170);

        stroke(200);

        let pos = this.b.position;

        let ang = this.b.angle;

        push();

        translate(pos.x, pos.y);

        rotate(ang);

        rectMode(CENTER);

        rect(0, 0, this.w, this.h);

        pop();

    }

}

​