matterTank

index.html

<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>

mattertank.markdown

matterTank

Touch/Drag mouse to make more sPlooshies!

My first play with the wonderful matter.js 2D Physics Engine.

A Pen by B New on CodePen.

License.

script.js

p5.disableFriendlyErrors = true;
//*********&&&&&&&&&&&&****************&&&&&&&&&&&&****************

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

function Pa2D(x,y,r,op){
    
    // Options for matter.js physics body.
    if (op)
    var options = {
        isStatic: true,
        restitution: 1,
        friction: 0.3
    }
    else
        var options = {
        isStatic: false,
        restitution: 0.5,
        friction: 0.3
    }
    
    // Create a 2D Physics Body, a circle.
    this.bod = Matter.Bodies.circle(x,y,r,options);
    // Add the body to the Physics World.
    Matter.World.add(myWorld, this.bod);

}

Pa2D.prototype.render = function(){
    
    var theColour;
    theColour = this.bod.speed * 50;
    if (this.bod.speed < 0.1) theColour = 255;
   
    constrain(theColour, 0, 255);
    
    stroke(0);
    strokeWeight(1);
    fill(42, theColour,42, 101);
    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;
  
//   textSize(iS);
//   text(String.fromCodePoint('0x1F' + 422).toString(16),iX-iS/2,iY+iS/2);
  
//   // text(String.fromCodePoint(
//   // '0x1F' + round(random(1536, 1616)).toString(16)),iX-iS/2,
//   //           iY+iS/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(4);
    fill(255);
    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 = width/2;
var orY = 40;
var rX;
var rY;
var rTheta = 0;
var rRad = 42;
var rSpeed;

function setup() {
    
    createCanvas(window.innerWidth,window.innerHeight);
    background(72);
    
    
    myEngine = Matter.Engine.create();
    myWorld = myEngine.world;  
    
//    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-12, 100);
    leftW = new Ledge(0+12, height/2, 20, height);
    rightW = new Ledge(width-21, height/2, 20, height);

    SetupRotor();
    
   // p = new Pa2D(width/2,height+100,width/2,true);
    
    // Start the engine!
    Matter.Engine.run(myEngine);
    
}

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){
   
    if (pA.length < 222)  pA.push(new Pa2D(mX,mY,random(1,mS),false));
    else{
            Matter.World.remove(myWorld, pA[0].bod);
            pA.splice(0,1);
            pA.push(new Pa2D(mX,mY,random(1,mS),false))
        } 
}

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


function draw() {
    background(72);
    
   // Matter.Engine.update(myEngine);
    
    for (var i = 0; i < pA.length; i++){
        pA[i].render();
    }
    
    p.render();
    leftW.render();
    rightW.render();
    
//   fill(0,120,255,100);
//   rect(20,height/2,width-48,height/2);
  
    SpinRotor();
    
}

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

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.min.js"></script>