<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js" type="text/javascript"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/addons/p5.dom.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/addons/p5.sound.js" type="text/javascript"></script>

//*********&&&&&&&&&&&&****************&&&&&&&&&&&&****************

// New particle class for use with matter.js 
// B New 2017.

function Pa2D(x,y,r,op){
    // Will be set to millis() when ball has done plinko run. When a number of seconds has elapsed thereafter, ball will be set to static.
    this.done = 0;
  
    // Options for matter.js physics body.
    if (op)
    var options = {
        isStatic: true,
        restitution: random(0.8,1),
        friction: 0
    };
    else
        var options = {
        isStatic: false,
        restitution: random(0.8,1),
        friction: 0,
          density: 0.001
    };
    
    // To better represent 50/50 chance of plinko balls going either right or left upon hitting first pin, when that pin is placed at width/2. Else, plinko balls will always fall to the left.    
    var xCorrect = random(-0.17,0.18);
        
    // Create a 2D Physics Body, a circle.
    this.bod = Matter.Bodies.circle(x+xCorrect,y,r,options);
    // Add the body to the Physics World.
    Matter.World.add(myWorld, this.bod);

}

// Pa2D.prototype.checkLanded = function(){
//    if (this.bod.position.y > height-100) 
//      this.bod.isStatic = true;
// }

Pa2D.prototype.render = function(){
    
//     var theColour;
//     theColour = this.bod.speed * 50;
//     if (this.bod.speed < 0.1) theColour = 255;
   
//     constrain(theColour, 0, 255);
    var theColour = 255;
  
  
    stroke(255);
    strokeWeight(1);
  
    fill(theColour, 0, theColour, 200);
    
  if (this.bod.isStatic) {fill(255,51);
                            stroke(0);}
  
  if (this.done !==0) {fill(255);}
  
    ellipse(this.bod.position.x,
            this.bod.position.y,
            this.bod.circleRadius*2,
            this.bod.circleRadius*2);
  
  var iX = this.bod.position.x;
  var iY = this.bod.position.y;
  var iS = this.bod.circleRadius*2;
            
}

function Ledge(x,y,w,h){
    
    // Create a 2D Physics Body, a rectangle.
    this.bod = Matter.Bodies.rectangle(x,y,w,h,{isStatic: true, restitution: 1});
    // Add the body to the Physics World.
    Matter.World.add(myWorld, this.bod);
    
    this.width = w;
    this.height = h;
    
} 

Ledge.prototype.render = function(){
    
    stroke(0);
    strokeWeight(1);
    fill(0,0,0);
    rect(this.bod.position.x-this.width/2, 
         this.bod.position.y-this.height/2, 
         this.width, this.height);
    
}





//*&*&*&*&*&*&*&*&*&*&*&*&*&*&*&
//*&*&*&*&*&*&*&*&*&*&*&*&*&*&*&

var pA = [];
var p;

// Global variables, giving reference to engine and world.
// Unlike 'myEngine', 'myWorld' is only an alias.
var myWorld; 
var myEngine;


// Pea farm rotary controller.
var orX;
var orY;
var rX;
var rY;
var rTheta;
var rRad;
var rSpeed;

function setup() {
    
    createCanvas(620,400);
    background(72);
    
    
    myEngine = Matter.Engine.create();
    myWorld = myEngine.world;  
    Matter.Events.on(myEngine, 'collisionStart', collision);
  
  
  
  
//    p = new Particle(200,200,50);
    
    // for (var i = 0; i < 9; i++){
    //    //var e = Math.round(random()) % 2 === 0;
    //     var e = false; // set to non-static.
    //     pA.push(new Pa2D(random(0,width),random(0,height/2),random(1,42),e)); 
    // }
    
    p = new Ledge(width/2, height, width, 10);
    leftW = new Ledge(0, height/2, 10, height);
    rightW = new Ledge(width, height/2, 10, height);

    //SetupRotor();
    
    SetupPegs();
    SetupBuckets();  
  
    // Start the engine!
    //Matter.Engine.run(myEngine);
    
}

function collision(event){
    //console.log(event);
    // var pairs = event.pairs;
    // for (var i = 0; pairs.length; i++){
    //   if (pairs[i].bodyA.label == 'peg' ||
    //      pairs[i].bodyB.label == 'peg'){
    //     //console.log('peg impact!');
    //   }
    // }
  }

function ResetPlinko(){
  
}

function SetupPegs(){
  
  var rowNum = 10;
  var colNum = 14;
  
  for (var row = 1; row <= rowNum; row++){
    
    for (var col = 1; col <= colNum; col++){
      var offSet = 0;
      if (row % 2 === 0) offSet = width/colNum*0.5;
      if (row > rowNum-3) break;
      if (offSet === 0 || col < colNum-1)
      PlaceBubl(width/colNum*col + offSet,
               height/rowNum*row,
               14,true);
    }
    
  }
  
}

function SetupBuckets(){
  var bucketNum = 24;
  
  for (var i = 1; i <= bucketNum; i++){
    pA.push(new Ledge(width/bucketNum*i,height-40,
                     2,80));
  }
  
}

function SpinRotor(){
    rX = rRad * Math.sin(radians(rTheta)) + orX;
    rY = rRad * Math.cos(radians(rTheta)) + orY;
    
    orX = (rRad*1.5) * Math.sin(radians(rTheta/4)) + orXX;
    
    rTheta -= rSpeed;
    //if (frameCount % 2 === 0) 
    PlaceBubl(rX,rY,22);
}

function SetupRotor(){
    orX = orXX = width/2;  // Origin.
    orY = 200;       
    rX;             // Position.
    rY;
    rTheta = 0;     // Angle or rotation.
    rRad = 82;      // Radius.
    rSpeed = 20;   // Rotation speed.
}

function PlaceBubl(mX,mY,mS,sS){
   
  pA.push(new Pa2D(mX,mY,mS,sS));
  
    // if (pA.length < 222)  pA.push(new Pa2D(mX,mY,mS,false));
    // else{
    //         Matter.World.remove(myWorld, pA[0].bod);
    //         pA.splice(0,1);
    //         pA.push(new Pa2D(mX,mY,mS,false))
    //     } 
}

function mouseDragged(){
    
    //PlaceBubl(mouseX,mouseY,24);
    
}
   


function draw() {
    background(72);
  //console.log(frameRate());  
  Matter.Engine.update(myEngine, 32);
  
   // Matter.Engine.update(myEngine);
  if (frameCount % 20 === 0) PlaceBubl(width/2,-10,7,false);  
  
  
    for (var i = 0; i < pA.length; i++){
        pA[i].render();
      // Check to see if ball finished run.
      // If so, turn to static after a certain duration.
      if (pA[i].bod.position.y > height-100 &&
          pA[i].done !== 0){
         if (millis() - pA[i].done > 7000)
           pA[i].bod.isStatic = true;}
         else if (pA[i].bod.position.y > height-100) pA[i].done = millis();
       
        
        //pA[i].checkLanded();
    }
    
    p.render();
    leftW.render();
    rightW.render();
    
  //fill(0,120,255,100);
 // rect(20,height/2,width-48,height/2);
  
    //SpinRotor();
    
}

//*&*&*&*&*&*&*&
//&*&*&*&*&*&*&*
//*&*&*&&&*&*&*&


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.min.js