matter.js test6

matter-js-test6.markdown

matter.js test6

A Pen by r00bal on CodePen.

License.

script.js

// parametrs 

var windowWidth = window.innerWidth-20,
    windowHeight = window.innerHeight-20;

// module aliases
var Engine = Matter.Engine,
    Render = Matter.Render,
    Composites = Matter.Composites,
    Runner = Matter.Runner,
    World = Matter.World,
    Bodies = Matter.Bodies,
    Mouse = Matter.Mouse,
    MouseConstraint = Matter.MouseConstraint;


// create an engine   
 var engine = Engine.create(),
     world = engine.world;

// create a renderer
var render = Render.create({
    element: document.body,
    engine: engine,
    options: {width: windowWidth,
            height: windowHeight}
});

var renderOptions = render.options;
        renderOptions.wireframes = false;
        renderOptions.showAngleIndicator = false;
        renderOptions.background = '#fff';


// add a mouse controlled constraint

 var canvasmouse = Mouse.create(render.canvas);
  var options = {
   mouse: canvasmouse  
  }
var mouseConstraint = MouseConstraint.create(engine,options);
World.add(engine.world, mouseConstraint);

//set gravity
var gravity = engine.world.gravity;

// boundaries
var wallStyle = {
         fillStyle: 'transparent',
         strokeStyle: 'transparent',
         lineWidth: 0
 };
var wallOptions = {
  isStatic: true,
  render: wallStyle,
  restitution: 0.9,
  density:0.001,
  restitution: 0.99,
  frictionStatic: 10,
  inverseInertia:0,
  density:0.001,
  frictionAir: 0,
  inverseInertia: 0
};

var topWall = Bodies.rectangle(windowWidth/2, 0-25, windowWidth, 60, wallOptions);
var leftWall = Bodies.rectangle(0-25, windowHeight/2, 60, windowHeight, wallOptions );
var rightWall = Bodies.rectangle(windowWidth+25, windowHeight/2, 60, windowHeight, wallOptions);
var bottomWall = Bodies.rectangle(windowWidth/2, windowHeight+25, windowWidth, 60, wallOptions);


//color of box
var color = {
         fillStyle: 'transparent',
         strokeStyle: '#000000',
         lineWidth: 0.5
 };

// bodies options
   var bodiesOptions = {
       isSleeping: false,
       friction:0.0001,
       restitution: 0.7,
       density:0.001,
       frictionAir: 0.0001,
       inverseInertia: 0,
       render: color, 
        force: {//x:.005,
               //y:-.005
        } 
       };

// bodies propeties
const BOX_NB = 5,
      BOX_SIZE = 15,
      BOX_SPACE_BETWEEN = 2,
      BORDER_BOX =  BOX_SIZE + BOX_SPACE_BETWEEN,
      TOTAL_COLUMNS = 47; // number of total columns in word section - contains either empty and filled up columns
      console.log(BORDER_BOX);
    var rows = 5,
        columns = 1,
        boxes =[],
        
        // MAIN COORDINATES
        // xx sets word in the middle of the screen - width
        // yy sets word in the middle of the screen - height
        xx = (windowWidth/2) - ((BORDER_BOX * TOTAL_COLUMNS)/2),
        yy = windowHeight/2 - ((BORDER_BOX * rows)/2);
        



function Draw(posX, posY, width, height,  cross ) {
  
 var cross = cross || false;
     var boxes = [];
  
 
  if (cross) {
      for (var i = 0; i < height; i++ ) {  // BOX_NB switch with  var height?
           boxes[i] =  Bodies.rectangle(posX,posY+cross, BOX_SIZE, BOX_SIZE, bodiesOptions);
           World.add(engine.world, boxes[i]);
           posY += BOX_SIZE +  BOX_SPACE_BETWEEN;
           posX += cross;
          }
   
      } else {
              this.body = Composites.stack(posX, posY, width, height, BOX_SPACE_BETWEEN, BOX_SPACE_BETWEEN, function(x, y) {
              return Bodies.rectangle(x,y, BOX_SIZE, BOX_SIZE,bodiesOptions);
               });
        World.add(engine.world, this.body);
       }
}

// function columnToTheLeft()
// function rowToTheBottom()
// function vertical()
// function horizontal()

// HELLO
var line = new Draw(xx, yy, columns, rows);
var line1 = new Draw(xx+ BORDER_BOX, yy+ (2*BORDER_BOX), 2, 1);
var line2 = new Draw(xx+ 3*BORDER_BOX, yy, columns, rows);
var line3 = new Draw(xx+ 5*BORDER_BOX, yy,columns, rows);

var line3 = new Draw(xx+ 6*BORDER_BOX, yy, 2, 1);
var line4 = new Draw(xx+ 6*BORDER_BOX, yy+ (2*BORDER_BOX), 2, 1);
var line5 = new Draw(xx+ 6*BORDER_BOX, yy+ (4*BORDER_BOX), 2, 1);

var line6 = new Draw(xx+ 9*BORDER_BOX, yy, columns, rows);
var line7 = new Draw(xx+ 10*BORDER_BOX, yy+ (4*BORDER_BOX), 2, 1);

var line8 = new Draw(xx+ 13*BORDER_BOX, yy, columns, rows);
var line9 = new Draw(xx+ 14*BORDER_BOX, yy+ (4*BORDER_BOX), 2, 1);

var line10 = new Draw(xx+ 17*BORDER_BOX, yy, columns, rows);
var line11 = new Draw(xx+ 18*BORDER_BOX, yy+ (4*BORDER_BOX), 2, 1);
var line12 = new Draw(xx+ 18*BORDER_BOX, yy, 2, 1);
var line13 = new Draw(xx+ 20*BORDER_BOX, yy, columns, rows);

//WORLD
// W
var line13 = new Draw(xx+ 24*BORDER_BOX, yy, columns, rows);
var line14 = new Draw(xx+ 26.4*BORDER_BOX, yy+(3*BORDER_BOX)-2, columns, 3,-7.5);
var line15 = new Draw(xx+ 27*BORDER_BOX, yy+(3*BORDER_BOX), columns, 2,7.5);
var line13 = new Draw(xx+ 28*BORDER_BOX, yy, columns, rows);
// O
var line10 = new Draw(xx+ 30*BORDER_BOX, yy, columns, rows);
var line11 = new Draw(xx+ 31*BORDER_BOX, yy+ (4*BORDER_BOX), 2, 1);
var line12 = new Draw(xx+ 31*BORDER_BOX, yy, 2, 1);
var line13 = new Draw(xx+ 33*BORDER_BOX, yy, columns, rows);
// R
var line10 = new Draw(xx+ 35*BORDER_BOX, yy, columns, rows);
var line11 = new Draw(xx+ 36*BORDER_BOX, yy+ (2*BORDER_BOX), 2, 1);
var line12 = new Draw(xx+ 36*BORDER_BOX, yy, 2, 1);
var line15 = new Draw(xx+ 38*BORDER_BOX, yy+(3*BORDER_BOX), columns, 2,7.5);
var line13 = new Draw(xx+ 38*BORDER_BOX, yy, 1, 3);
// L
var line6 = new Draw(xx+ 40*BORDER_BOX, yy, columns, rows);
var line7 = new Draw(xx+ 41*BORDER_BOX, yy+ (4*BORDER_BOX), 2, 1);
// D
var line10 = new Draw(xx+ 44*BORDER_BOX, yy, columns, rows);
var line11 = new Draw(xx+ 45*BORDER_BOX, yy+ (4*BORDER_BOX), 2, 1);
var line12 = new Draw(xx+ 45*BORDER_BOX, yy, 2, 1);
var line13 = new Draw(xx+ 47*BORDER_BOX, yy+BORDER_BOX, columns, 3);

//var box = new Draw(0, yy + (2.3*BORDER_BOX) , 1, 1);
var box = Bodies.rectangle(24,yy + (2*BORDER_BOX), BOX_SIZE*2.5, BOX_SIZE*2.5 ,bodiesOptions);

box.render.fillStyle = 'none';
box.render.strokeStyle = 'transparent';


//box.force.x = 0.09;
//box.force.x = 0.12;
console.log(box)

function blast() {
 box.force.x = 0.32; 
 box.render.strokeStyle = '#000000';
 box.render.fillStyle = "#F00807"
 
}
setTimeout('blast()',2000);
/*
    var stack = Composites.stack(xx, yy, columns, rows, BOX_SPACE_BETWEEN, BOX_SPACE_BETWEEN, function(x, y) {
        return Bodies.rectangle(x,y, 30, 30,bodiesOptions);
    });
var stack2 = Composites.stack(windowWidth/10+32, yy + (2*32), 2, 1, BOX_SPACE_BETWEEN, BOX_SPACE_BETWEEN, function(x, y) {
        return Bodies.rectangle(x,y, 30, 30,bodiesOptions);
    });

var stack3 = Composites.stack(xx + (32*3), yy, columns, rows, BOX_SPACE_BETWEEN, BOX_SPACE_BETWEEN, function(x, y) {
        return Bodies.rectangle(x,y, 30, 30,bodiesOptions);
    });
*/
//bodiesOptions.force.x *= (-1);
/*
var stack4 = Composites.stack(xx*8 + (32*3), yy, columns, rows, BOX_SPACE_BETWEEN, BOX_SPACE_BETWEEN, function(x, y) {
  
        return Bodies.rectangle(x,y, 30, 30, bodiesOptions);
   
  
    });


newY = 33;
newX = 3;
for (var i = 0; i < BOX_NB; i++ ) {  
  boxes[i] =  Bodies.rectangle(xx*6,yy, 30, 30, bodiesOptions);
  //boxes[i].force.x = -0.009;
  World.add(engine.world, boxes[i]);
  yy += newY
  xx += newX
}

*/
// add all of the bodies to the world
World.add(engine.world, [topWall, leftWall, rightWall, bottomWall, box]);

// run the engine
Engine.run(engine);

// run the renderer
Render.run(render);
engine.world.gravity.y = 0;

// mouse constraint line connection
var mContext = mouseConstraint.constraint.render;   
mContext.lineWidth =0;
mContext.strokeStyle="#fff";
  

scripts

<script src="//cdn.rawgit.com/liabru/matter-js/d727e8601e689a3aeffd386d6ede3a16243563da/build/matter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.rawgit.com/liabru/matter-tools/0735205dcfc3b07381ea00c1b852e3e1ec7179b4/build/matter-tools.demo.js"></script>
<script src="//cdn.rawgit.com/liabru/matter-wrap/81b2adf1bb970245f5d964ddda0db71c1ff8aa43/build/matter-wrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js"></script>