matter
MATTER.JS
matter.js a 2D physics engine for the web
Watch the videos below or go to the matter.js website for information.
You will need to:
Copy the matter.js library into your folder (ie: your P5.js web editor folder) by:
Copying it from Student drive (S) /Digital Technology/13COMP - Resources OR
Downloading it from the matter.js website
Add a link to the matter.js library in your html <head>:
<script language="javascript" type="text/javascript" src="matter.js"></script>
tasks that matter
Remember copy the matter.js library into your P5.js web editor folder & add a link to it in your html <head>
TASK ONE: dropping things
Play around with the code below:
Randomly colour the boxes
'Drop' more than one box at time.
Add an initial horizontal speed.
Add a background image.
//matter_t01
// Uses matter.js to make a box fall due to gravity
/**********************************************/
var boxSize = 30;
// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies;
var engine;
var world;
var boxA;
/**********************************************/
function setup() {
createCanvas(450, 900);
// create an engine, a world & its bodies
engine = Engine.create();
world = engine.world;
boxA = Bodies.rectangle(width/2, 0, boxSize, boxSize);
World.add(world, boxA);
}
/**********************************************/
function draw() {
background(193, 40, 114);
Engine.update(engine);
rect(boxA.position.x, boxA.position.y, boxSize, boxSize);
// when the box reaches the canvas' bottom,
// remove it & add a new one
if(boxA.position.y > height - boxSize) {
World.remove(world, boxA);
boxA = Bodies.rectangle(width/2, 0, boxSize, boxSize);
// add the randomly coloured box to the world
World.add(world, boxA);
}
}
/**********************************************/
TASK TWO: friction & restitution
Play around with the code below:
What happens if you alter the friction co-efficient?
What happens if you alter the restitution co-efficient?
Add a mouse dragged event to drop boxes.
Change the boxes to circles.
//matter_t03
// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies;
var engine;
var world;
var boxes = [];
var ground;
var boxSize = 10;
/**************************************************/
function boxObj (x, y, w, h) {
this.body = Bodies.rectangle(x, y, w, h,
{friction: 0.3, restitution: 0.5});
this.w = w;
this.h = h;
World.add(world, this.body);
this.disp = function() {
var pos = this.body.position;
var angle = this.body.angle;
push();
translate(pos.x, pos.y);
rotate(angle);
rectMode(CENTER);
rect(0, 0, this.w, this.h);
pop();
}
}
/**************************************************/
function setup() {
createCanvas(430, 390);
// create an engine, a world & its bodies
engine = Engine.create();
world = engine.world;
ground = Bodies.rectangle(width/2, height, width, 20, {isStatic: true});
World.add(world, ground);
rectMode(CENTER);
}
/**************************************************/
function draw() {
background(140, 140, 140);
Engine.update(engine);
fill(255);
for (i = 0; i < boxes.length; i++) {
boxes[i].disp();
}
fill('brown');
rect(ground.position.x, ground.position.y, width, 20);
}
/**************************************************/
function mousePressed() {
boxes.push(new boxObj(mouseX, mouseY, boxSize, boxSize));
}
/**************************************************/
TASK THREE: bouncing balls
Play around with your TASK TWO code:
Copy the boxes code to create an array of boundary objects.
Replace the boxes (rectangle & rect) with balls (circle & ellipse).