├── docs ├── _config.yml └── assets │ ├── fonts │ ├── EOT │ │ ├── SourceCodePro-Bold.eot │ │ └── SourceCodePro-Regular.eot │ ├── OTF │ │ ├── SourceCodePro-Bold.otf │ │ └── SourceCodePro-Regular.otf │ ├── TTF │ │ ├── SourceCodePro-Bold.ttf │ │ └── SourceCodePro-Regular.ttf │ ├── WOFF │ │ ├── OTF │ │ │ ├── SourceCodePro-Bold.otf.woff │ │ │ └── SourceCodePro-Regular.otf.woff │ │ └── TTF │ │ │ ├── SourceCodePro-Bold.ttf.woff │ │ │ └── SourceCodePro-Regular.ttf.woff │ ├── WOFF2 │ │ ├── OTF │ │ │ ├── SourceCodePro-Bold.otf.woff2 │ │ │ └── SourceCodePro-Regular.otf.woff2 │ │ └── TTF │ │ │ ├── SourceCodePro-Bold.ttf.woff2 │ │ │ └── SourceCodePro-Regular.ttf.woff2 │ ├── source-code-pro.css │ └── LICENSE.txt │ ├── bass-addons.css │ ├── github.css │ ├── style.css │ ├── site.js │ ├── anchor.js │ └── bass.css ├── examples ├── mouse-orbit │ ├── assets │ │ ├── moon-96.png │ │ └── earth-128.png │ ├── index.html │ └── mouse-orbit.js ├── falling-ball │ ├── falling-ball.js │ └── index.html ├── lattice │ ├── index.html │ └── lattice.js ├── pendulum │ ├── index.html │ └── pendulum.js ├── flappy-bird │ ├── index.html │ └── flappy-bird.js ├── flip-gravity │ ├── index.html │ └── flip-gravity.js ├── freeze-click │ ├── index.html │ └── freeze-click.js ├── physics-sign │ ├── index.html │ └── physics-sign.js ├── throw-block │ ├── index.html │ └── throw-block.js ├── draw-barriers │ ├── index.html │ └── draw-barriers.js ├── simple-platform │ ├── index.html │ └── simple-platform.js ├── tilted-platform │ ├── index.html │ └── tilted-platform.js └── break-connection │ ├── index.html │ └── break-connection.js ├── template ├── index.html ├── sketch.js └── lib │ └── p5-matter │ └── 1.1.0 │ ├── p5-matter.min.js │ ├── p5-matter.min.js.map │ └── p5-matter.js ├── package.json ├── .gitignore ├── README.md ├── src ├── p5-matter.min.js ├── p5-matter.min.js.map └── p5-matter.js └── LICENSE /docs/_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-dinky -------------------------------------------------------------------------------- /examples/mouse-orbit/assets/moon-96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pzp1997/p5-matter/HEAD/examples/mouse-orbit/assets/moon-96.png -------------------------------------------------------------------------------- /examples/mouse-orbit/assets/earth-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pzp1997/p5-matter/HEAD/examples/mouse-orbit/assets/earth-128.png -------------------------------------------------------------------------------- /docs/assets/fonts/EOT/SourceCodePro-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pzp1997/p5-matter/HEAD/docs/assets/fonts/EOT/SourceCodePro-Bold.eot -------------------------------------------------------------------------------- /docs/assets/fonts/OTF/SourceCodePro-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pzp1997/p5-matter/HEAD/docs/assets/fonts/OTF/SourceCodePro-Bold.otf -------------------------------------------------------------------------------- /docs/assets/fonts/TTF/SourceCodePro-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pzp1997/p5-matter/HEAD/docs/assets/fonts/TTF/SourceCodePro-Bold.ttf -------------------------------------------------------------------------------- /docs/assets/fonts/EOT/SourceCodePro-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pzp1997/p5-matter/HEAD/docs/assets/fonts/EOT/SourceCodePro-Regular.eot -------------------------------------------------------------------------------- /docs/assets/fonts/OTF/SourceCodePro-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pzp1997/p5-matter/HEAD/docs/assets/fonts/OTF/SourceCodePro-Regular.otf -------------------------------------------------------------------------------- /docs/assets/fonts/TTF/SourceCodePro-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pzp1997/p5-matter/HEAD/docs/assets/fonts/TTF/SourceCodePro-Regular.ttf -------------------------------------------------------------------------------- /docs/assets/fonts/WOFF/OTF/SourceCodePro-Bold.otf.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pzp1997/p5-matter/HEAD/docs/assets/fonts/WOFF/OTF/SourceCodePro-Bold.otf.woff -------------------------------------------------------------------------------- /docs/assets/fonts/WOFF/TTF/SourceCodePro-Bold.ttf.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pzp1997/p5-matter/HEAD/docs/assets/fonts/WOFF/TTF/SourceCodePro-Bold.ttf.woff -------------------------------------------------------------------------------- /docs/assets/fonts/WOFF/OTF/SourceCodePro-Regular.otf.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pzp1997/p5-matter/HEAD/docs/assets/fonts/WOFF/OTF/SourceCodePro-Regular.otf.woff -------------------------------------------------------------------------------- /docs/assets/fonts/WOFF/TTF/SourceCodePro-Regular.ttf.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pzp1997/p5-matter/HEAD/docs/assets/fonts/WOFF/TTF/SourceCodePro-Regular.ttf.woff -------------------------------------------------------------------------------- /docs/assets/fonts/WOFF2/OTF/SourceCodePro-Bold.otf.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pzp1997/p5-matter/HEAD/docs/assets/fonts/WOFF2/OTF/SourceCodePro-Bold.otf.woff2 -------------------------------------------------------------------------------- /docs/assets/fonts/WOFF2/TTF/SourceCodePro-Bold.ttf.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pzp1997/p5-matter/HEAD/docs/assets/fonts/WOFF2/TTF/SourceCodePro-Bold.ttf.woff2 -------------------------------------------------------------------------------- /docs/assets/fonts/WOFF2/OTF/SourceCodePro-Regular.otf.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pzp1997/p5-matter/HEAD/docs/assets/fonts/WOFF2/OTF/SourceCodePro-Regular.otf.woff2 -------------------------------------------------------------------------------- /docs/assets/fonts/WOFF2/TTF/SourceCodePro-Regular.ttf.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pzp1997/p5-matter/HEAD/docs/assets/fonts/WOFF2/TTF/SourceCodePro-Regular.ttf.woff2 -------------------------------------------------------------------------------- /docs/assets/bass-addons.css: -------------------------------------------------------------------------------- 1 | .input { 2 | font-family: inherit; 3 | display: block; 4 | width: 100%; 5 | height: 2rem; 6 | padding: .5rem; 7 | margin-bottom: 1rem; 8 | border: 1px solid #ccc; 9 | font-size: .875rem; 10 | border-radius: 3px; 11 | box-sizing: border-box; 12 | } 13 | -------------------------------------------------------------------------------- /examples/falling-ball/falling-ball.js: -------------------------------------------------------------------------------- 1 | var ball; 2 | 3 | function setup() { 4 | createCanvas(600, 600); 5 | noStroke(); 6 | fill(255); 7 | 8 | matter.init(); 9 | ball = matter.makeBall(width / 2, 50, 60); 10 | } 11 | 12 | function draw() { 13 | background(127); 14 | ball.show(); 15 | if (ball.isOffCanvas()) { 16 | matter.forget(ball); 17 | ball = matter.makeBall(width / 2, 50, 60); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Starter Template | p5-matter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/lattice/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lattice | p5-matter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/pendulum/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pendulum | p5-matter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/falling-ball/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Falling Ball | p5-matter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/flappy-bird/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Flappy Bird | p5-matter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/flip-gravity/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Flip Gravity | p5-matter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/freeze-click/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Freeze Click | p5-matter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/mouse-orbit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mouse Orbit | p5-matter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/physics-sign/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Physics Sign | p5-matter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/throw-block/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Throw Block | p5-matter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/draw-barriers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Draw Barriers | p5-matter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/simple-platform/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple Platform | p5-matter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/tilted-platform/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tilted Platform | p5-matter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/break-connection/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Break Connection | p5-matter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template/sketch.js: -------------------------------------------------------------------------------- 1 | /* This is the start of a simple p5.js sketch using p5-matter. 2 | Use this as a template for creating your own sketches! */ 3 | 4 | var ball; 5 | var floor; 6 | 7 | function setup() { 8 | // put setup code here. 9 | createCanvas(600, 600); 10 | 11 | ball = matter.makeBall(width / 2, 40, 80); 12 | floor = matter.makeBarrier(width / 2, height, width, 50); 13 | } 14 | 15 | function draw() { 16 | // put the drawing code here 17 | background(0); 18 | 19 | fill(127); 20 | floor.show(); 21 | 22 | fill(255); 23 | ball.show(); 24 | } 25 | -------------------------------------------------------------------------------- /examples/pendulum/pendulum.js: -------------------------------------------------------------------------------- 1 | var ceiling; 2 | var bob; 3 | var string; 4 | 5 | function setup() { 6 | var canvas = createCanvas(600, 600); 7 | fill(0); 8 | 9 | matter.init(); 10 | matter.mouseInteraction(canvas); 11 | 12 | ceiling = matter.makeBarrier(width / 2, -100, width + 400, 240); 13 | 14 | bob = matter.makeBall(0, 0, 70, { 15 | frictionAir: 0 16 | }); 17 | 18 | string = matter.connect(ceiling, bob, { 19 | stiffnes: 0.8, 20 | pointA: { 21 | x: 0, 22 | y: 120 23 | } 24 | }); 25 | } 26 | 27 | function draw() { 28 | background(255); 29 | 30 | ceiling.show(); 31 | bob.show(); 32 | string.show(); 33 | } 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "p5-matter", 3 | "version": "1.1.0", 4 | "description": "Seamlessly integrate matter.js with p5.js", 5 | "scripts": { 6 | "build": "npm run minify & npm run generate-docs", 7 | "minify": "uglifyjs --keep-fnames --source-map --output src/p5-matter.min.js src/p5-matter.js", 8 | "generate-docs": "documentation build src/p5-matter.js -f html -o docs/" 9 | }, 10 | "main": "src/p5-matter.js", 11 | "author": "Palmer Paul ", 12 | "license": "LGPL-3.0", 13 | "dependencies": { 14 | "matter-js": "^0.12.0", 15 | "p5": "^0.5.11" 16 | }, 17 | "devDependencies": { 18 | "documentation": "^4.0.0-rc.1", 19 | "uglify-js": "^3.0.15" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/simple-platform/simple-platform.js: -------------------------------------------------------------------------------- 1 | var blocks = []; 2 | var platform; 3 | 4 | function setup() { 5 | createCanvas(600, 600); 6 | noStroke(); 7 | 8 | matter.init(); 9 | platform = matter.makeBarrier(width / 2, height, width, 100); 10 | } 11 | 12 | function mousePressed() { 13 | blocks.push( 14 | matter.makeBlock(mouseX, mouseY, random(20, 80), random(20, 80))); 15 | } 16 | 17 | function draw() { 18 | background(127); 19 | 20 | fill(0); 21 | noStroke(); 22 | platform.show(); 23 | 24 | fill(170); 25 | stroke(255); 26 | 27 | for (var i = blocks.length - 1; i >= 0; i--) { 28 | var b = blocks[i]; 29 | b.show(); 30 | if (b.isOffCanvas()) { 31 | matter.forget(b); 32 | blocks.splice(i, 1); 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /examples/mouse-orbit/mouse-orbit.js: -------------------------------------------------------------------------------- 1 | var moon; 2 | var earthImg; 3 | var moonImg; 4 | 5 | function preload() { 6 | earthImg = loadImage("assets/earth-128.png"); 7 | moonImg = loadImage("assets/moon-96.png"); 8 | } 9 | 10 | function setup() { 11 | createCanvas(600, 600); 12 | noCursor(); 13 | imageMode(CENTER); 14 | fill(255); 15 | noStroke(); 16 | 17 | matter.init(); 18 | moon = matter.makeBall(width / 2, height / 2, moonImg.width); 19 | } 20 | 21 | function draw() { 22 | background(0, 0, 64); 23 | 24 | var theta = atan2(mouseY - moon.getPositionY(), 25 | mouseX - moon.getPositionX()); 26 | matter.changeGravity(cos(theta), sin(theta)); 27 | 28 | image(earthImg, mouseX, mouseY); 29 | image(moonImg, moon.getPositionX(), moon.getPositionY()); 30 | } 31 | -------------------------------------------------------------------------------- /examples/tilted-platform/tilted-platform.js: -------------------------------------------------------------------------------- 1 | var balls = []; 2 | var topPlatform; 3 | var bottomPlatform; 4 | 5 | function setup() { 6 | createCanvas(600, 600); 7 | noStroke(); 8 | 9 | matter.init(); 10 | 11 | topPlatform = matter.makeBarrier(200, 100, 300, 30, { 12 | angle: radians(20), 13 | friction: 0 14 | }); 15 | 16 | bottomPlatform = matter.makeBarrier(400, 400, 300, 30, { 17 | angle: radians(-30), 18 | friction: 0 19 | }); 20 | } 21 | 22 | function mousePressed() { 23 | balls.push(matter.makeBall(mouseX, mouseY, random(30, 60), { 24 | friction: 0 25 | })); 26 | } 27 | 28 | function draw() { 29 | background(0); 30 | 31 | fill(255); 32 | topPlatform.show(); 33 | bottomPlatform.show(); 34 | 35 | fill(127); 36 | for (var i = balls.length - 1; i >= 0; i--) { 37 | var b = balls[i]; 38 | b.show(); 39 | if (b.isOffCanvas()) { 40 | matter.forget(b); 41 | balls.splice(i, 1); 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /examples/break-connection/break-connection.js: -------------------------------------------------------------------------------- 1 | var ball1; 2 | var ball2; 3 | var connection; 4 | var floor; 5 | 6 | function setup() { 7 | createCanvas(600, 600); 8 | 9 | matter.init(); 10 | matter.changeGravity(0, 0.2); 11 | 12 | ball1 = matter.makeBall(random(0, width), random(0, height * 0.2), 70); 13 | ball2 = matter.makeBall(random(0, width), random(0, height * 0.2), 70); 14 | connection = matter.connect(ball1, ball2, { 15 | stiffness: 0.005, 16 | length: 0.7 * dist(ball1.getPositionX(), ball1.getPositionY(), 17 | ball2.getPositionX(), ball2.getPositionY()) 18 | }); 19 | 20 | floor = matter.makeBarrier(width / 2, height + 50, width, 100); 21 | } 22 | 23 | function mousePressed() { 24 | matter.forget(connection); 25 | connection = null; 26 | } 27 | 28 | function draw() { 29 | background(0); 30 | 31 | fill(255); 32 | noStroke(); 33 | ball1.show(); 34 | ball2.show(); 35 | 36 | if (connection) { 37 | stroke(0, 255, 0); 38 | connection.show(); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /docs/assets/fonts/source-code-pro.css: -------------------------------------------------------------------------------- 1 | @font-face{ 2 | font-family: 'Source Code Pro'; 3 | font-weight: 400; 4 | font-style: normal; 5 | font-stretch: normal; 6 | src: url('EOT/SourceCodePro-Regular.eot') format('embedded-opentype'), 7 | url('WOFF2/TTF/SourceCodePro-Regular.ttf.woff2') format('woff2'), 8 | url('WOFF/OTF/SourceCodePro-Regular.otf.woff') format('woff'), 9 | url('OTF/SourceCodePro-Regular.otf') format('opentype'), 10 | url('TTF/SourceCodePro-Regular.ttf') format('truetype'); 11 | } 12 | 13 | @font-face{ 14 | font-family: 'Source Code Pro'; 15 | font-weight: 700; 16 | font-style: normal; 17 | font-stretch: normal; 18 | src: url('EOT/SourceCodePro-Bold.eot') format('embedded-opentype'), 19 | url('WOFF2/TTF/SourceCodePro-Bold.ttf.woff2') format('woff2'), 20 | url('WOFF/OTF/SourceCodePro-Bold.otf.woff') format('woff'), 21 | url('OTF/SourceCodePro-Bold.otf') format('opentype'), 22 | url('TTF/SourceCodePro-Bold.ttf') format('truetype'); 23 | } 24 | -------------------------------------------------------------------------------- /examples/throw-block/throw-block.js: -------------------------------------------------------------------------------- 1 | var block; 2 | 3 | function setup() { 4 | var canvas = createCanvas(600, 600); 5 | fill(127); 6 | stroke(255); 7 | 8 | matter.init(); 9 | matter.mouseInteraction(canvas); 10 | 11 | block = matter.makeBlock(width / 2, height / 2, 70, 70); 12 | 13 | /* "What's with all this 300 business?" you ask. Simple, I need to stop the 14 | block from flying off the screen when it experiences a large force. The 15 | boundaries are also overlapping so that I can protect the corners. The 16 | number 300 itself is pretty arbitrary. */ 17 | var extra = 300; 18 | var floor = matter.makeBarrier( 19 | width / 2, height + extra, width + 2 * extra, 2 * extra); 20 | var ceiling = matter.makeBarrier( 21 | width / 2, -extra, width + 2 * extra, 2 * extra); 22 | var leftWall = matter.makeBarrier( 23 | -extra, height / 2, 2 * extra, height + 2 * extra); 24 | var rightWall = matter.makeBarrier( 25 | width + extra, height / 2, 2 * extra, height + 2 * extra); 26 | } 27 | 28 | function draw() { 29 | background(0); 30 | 31 | block.show(); 32 | } 33 | -------------------------------------------------------------------------------- /examples/freeze-click/freeze-click.js: -------------------------------------------------------------------------------- 1 | var balls = []; 2 | 3 | function setup() { 4 | createCanvas(600, 600); 5 | 6 | matter.init(); 7 | matter.changeGravity(0, 0.2); 8 | 9 | for (var i = 0; i < 10; i++) { 10 | addBall(); 11 | } 12 | } 13 | 14 | function addBall() { 15 | balls.push(matter.makeBall( 16 | random(0, width), random(-70, -100), random(40, 70), { 17 | restitution: 1, 18 | frictionAir: 0 19 | })); 20 | } 21 | 22 | function mousePressed() { 23 | for (var i = 0; i < balls.length; i++) { 24 | var ball = balls[i]; 25 | var d = dist(mouseX, mouseY, ball.getPositionX(), ball.getPositionY()); 26 | if (d <= ball.getRadius()) { 27 | if (ball.isFrozen()) { 28 | ball.unfreeze(); 29 | } else { 30 | ball.freeze(); 31 | } 32 | } 33 | } 34 | } 35 | 36 | function draw() { 37 | background(0); 38 | 39 | for (var i = balls.length - 1; i >= 0; i--) { 40 | var ball = balls[i]; 41 | 42 | if (ball.isFrozen()) { 43 | fill(255, 0, 0); 44 | } else { 45 | fill(255); 46 | } 47 | 48 | ball.show(); 49 | 50 | if (ball.isOffCanvas(100)) { 51 | matter.forget(ball); 52 | balls.splice(i, 1); 53 | addBall(); 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /examples/flappy-bird/flappy-bird.js: -------------------------------------------------------------------------------- 1 | var bird; 2 | var topPipe; 3 | var botPipe; 4 | var GAP_SIZE = 140; 5 | var score = 0; 6 | 7 | 8 | function setup() { 9 | createCanvas(600, 600); 10 | fill(0); 11 | noStroke(); 12 | textSize(32); 13 | 14 | matter.init(); 15 | 16 | bird = matter.makeBall(width / 2, height / 2, 70, 70, { friction: 0, restitution: 1 }); 17 | makePipes(); 18 | } 19 | 20 | function mousePressed() { 21 | bird.setVelocityY(-8); 22 | } 23 | 24 | function draw() { 25 | background(255); 26 | 27 | topPipe.show(); 28 | botPipe.show(); 29 | bird.show(); 30 | 31 | text(score, width - 100, 100); 32 | 33 | var pipePosition = topPipe.getPositionX(); 34 | topPipe.setPositionX(pipePosition - 2); 35 | botPipe.setPositionX(pipePosition - 2); 36 | 37 | if (topPipe.isOffCanvas()) { 38 | makePipes(); 39 | score += 10; 40 | } 41 | 42 | if (bird.isOffCanvas()) { 43 | bird = matter.makeBall(width / 2, height / 2, 70, 70); 44 | score = 0; 45 | } 46 | } 47 | 48 | function makePipes() { 49 | var gap = random(height / 4, 3 * height / 4); 50 | var gapStart = gap - GAP_SIZE / 2; 51 | var gapEnd = gap + GAP_SIZE / 2; 52 | 53 | topPipe = matter.makeBarrier(width, gapStart / 2, 80, gapStart, { friction: 0, restitution: 1 }); 54 | botPipe = matter.makeBarrier(width, (height + gapEnd) / 2, 80, height - gapEnd, { friction: 0, restitution: 1 }); 55 | } 56 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ############ 2 | ### Node ### 3 | ############ 4 | 5 | # Logs 6 | logs 7 | *.log 8 | npm-debug.log* 9 | yarn-debug.log* 10 | yarn-error.log* 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | 24 | # nyc test coverage 25 | .nyc_output 26 | 27 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 28 | .grunt 29 | 30 | # Bower dependency directory (https://bower.io/) 31 | bower_components 32 | 33 | # node-waf configuration 34 | .lock-wscript 35 | 36 | # Compiled binary addons (http://nodejs.org/api/addons.html) 37 | build/Release 38 | 39 | # Dependency directories 40 | node_modules/ 41 | jspm_packages/ 42 | 43 | # Typescript v1 declaration files 44 | typings/ 45 | 46 | # Optional npm cache directory 47 | .npm 48 | 49 | # Optional eslint cache 50 | .eslintcache 51 | 52 | # Optional REPL history 53 | .node_repl_history 54 | 55 | # Output of 'npm pack' 56 | *.tgz 57 | 58 | # Yarn Integrity file 59 | .yarn-integrity 60 | 61 | # dotenv environment variables file 62 | .env 63 | 64 | 65 | ############# 66 | ### macOS ### 67 | ############# 68 | 69 | # General 70 | *.DS_Store 71 | .AppleDouble 72 | .LSOverride 73 | 74 | # Icon must end with two \r 75 | Icon 76 | 77 | 78 | # Thumbnails 79 | ._* 80 | 81 | # Files that might appear in the root of a volume 82 | .DocumentRevisions-V100 83 | .fseventsd 84 | .Spotlight-V100 85 | .TemporaryItems 86 | .Trashes 87 | .VolumeIcon.icns 88 | .com.apple.timemachine.donotpresent 89 | 90 | # Directories potentially created on remote AFP share 91 | .AppleDB 92 | .AppleDesktop 93 | Network Trash Folder 94 | Temporary Items 95 | .apdisk 96 | -------------------------------------------------------------------------------- /examples/physics-sign/physics-sign.js: -------------------------------------------------------------------------------- 1 | var signs = []; 2 | var balls = []; 3 | var floor; 4 | 5 | 6 | function setup() { 7 | createCanvas(600, 600); 8 | textSize(60); 9 | 10 | matter.init(); 11 | matter.changeGravity(0, 0.25); 12 | 13 | signs.push(matter.makeSign("physics", width / 2 - 120, height / 2, { 14 | restitution: 1 15 | })); 16 | signs.push(matter.makeSign("is", width / 2 + 20, height / 2, { 17 | restitution: 1 18 | })); 19 | signs.push(matter.makeSign("cool!", width / 2 + 120, height / 2, { 20 | restitution: 1 21 | })); 22 | 23 | for (var j = 0; j < signs.length; j++) { 24 | signs[j].freeze(); 25 | } 26 | 27 | floor = matter.makeBarrier(width / 2, height, width, 30, { 28 | restitution: 1 29 | }); 30 | 31 | for (var i = 0; i < 20; i++) { 32 | var ballAbove = matter.makeBall(random(0.15 * width, 0.85 * width), 33 | random(0, height * 0.4), random(30, 60), { 34 | restitution: 1 35 | }); 36 | balls.push(ballAbove); 37 | } 38 | for (i = 0; i < 10; i++) { 39 | ballBelow = matter.makeBall(random(0.15 * width, 0.85 * width), 40 | random(height * 0.6, height * 0.8), random(30, 60), { 41 | restitution: 1 42 | }); 43 | balls.push(ballBelow); 44 | } 45 | } 46 | 47 | function mousePressed() { 48 | for (i = 0; i < signs.length; i++) { 49 | var sign = signs[i]; 50 | if (2 * abs(mouseX - sign.getPositionX()) <= sign.getWidth() && 51 | 2 * abs(mouseY - sign.getPositionY()) <= sign.getHeight()) { 52 | sign.unfreeze(); 53 | } 54 | } 55 | } 56 | 57 | function draw() { 58 | background(255); 59 | 60 | fill(255, 0, 0); 61 | 62 | for (j = 0; j < signs.length; j++) { 63 | signs[j].show(); 64 | } 65 | 66 | fill(0); 67 | 68 | for (var i = 0; i < balls.length; i++) { 69 | balls[i].show(); 70 | } 71 | 72 | floor.show(); 73 | } 74 | -------------------------------------------------------------------------------- /examples/draw-barriers/draw-barriers.js: -------------------------------------------------------------------------------- 1 | var barriers = []; 2 | var balls = []; 3 | var previewStart; 4 | 5 | function setup() { 6 | createCanvas(600, 600); 7 | 8 | matter.init(); 9 | 10 | addBall(); 11 | setInterval(addBall, 3000); 12 | } 13 | 14 | function addBall() { 15 | balls.push(matter.makeBall(random(0, width), 0, 40)); 16 | } 17 | 18 | function mousePressed() { 19 | previewStart = createVector(mouseX, mouseY); 20 | } 21 | 22 | function mouseDragged() { 23 | stroke(127); 24 | strokeWeight(10); 25 | line(previewStart.x, previewStart.y, mouseX, mouseY); 26 | 27 | // var x = (barrierStart.x + mouseX) / 2; 28 | // var y = (barrierStart.y + mouseY) / 2; 29 | // var length = dist(barrierStart.x, barrierStart.y, mouseX, mouseY); 30 | // var theta = atan2(mouseY - barrierStart.y, mouseX - barrierStart.x); 31 | // push(); 32 | // fill(127); 33 | // translate(x, y); 34 | // rotate(theta); 35 | // rect(0, 0, length, 10); 36 | // pop(); 37 | } 38 | 39 | function mouseReleased() { 40 | var x = (previewStart.x + mouseX) / 2; 41 | var y = (previewStart.y + mouseY) / 2; 42 | var length = dist(previewStart.x, previewStart.y, mouseX, mouseY); 43 | var theta = atan2(mouseY - previewStart.y, mouseX - previewStart.x); 44 | var barrier = matter.makeBarrier(x, y, length, 10, { 45 | angle: theta 46 | }); 47 | barriers.push(barrier); 48 | } 49 | 50 | function draw() { 51 | background(255); 52 | 53 | stroke(0); 54 | strokeWeight(5); 55 | line(0, 0, width, 0); 56 | line(0, height, width, height); 57 | line(0, 0, 0, height); 58 | line(width, 0, width, height); 59 | 60 | fill(0); 61 | noStroke(); 62 | for (var i = 0; i < barriers.length; i++) { 63 | barriers[i].show(); 64 | } 65 | 66 | for (var j = balls.length - 1; j >= 0; j--) { 67 | var ball = balls[j]; 68 | ball.show(); 69 | if (ball.isOffCanvas()) { 70 | matter.forget(ball); 71 | } 72 | } 73 | 74 | } 75 | -------------------------------------------------------------------------------- /examples/flip-gravity/flip-gravity.js: -------------------------------------------------------------------------------- 1 | var floor; 2 | var ceiling; 3 | var objects = []; 4 | var upsideDown = false; 5 | 6 | function setup() { 7 | createCanvas(600, 600); 8 | noStroke(); 9 | 10 | matter.init(); 11 | 12 | /* I want to make the barriers at the edges of the canvas, so it looks like 13 | the objects are bouncing off the frame of the window. It is okay that the 14 | barriers are off the canvas, note below that I do not even .show() them! */ 15 | floor = matter.makeBarrier(width / 2, -50, width, 100); 16 | ceiling = matter.makeBarrier(width / 2, height + 50, width, 100); 17 | leftWall = matter.makeBarrier(-50, height / 2, 100, height); 18 | rightWall = matter.makeBarrier(width + 50, height / 2, 100, height); 19 | 20 | for (var i = 0; i < 10; i++) { 21 | var randomBall = matter.makeBall( 22 | random(0, width), random(0, height), random(30, 60)); 23 | 24 | /* I am adding a color attribute to each of the balls, so that I can 25 | fill() them individually in draw(). I can do this because all physical 26 | objects are just plain JavaScript objects. There is nothing special going 27 | on here, I'm just adding an attribute. */ 28 | randomBall.color = color(random(0, 255), random(0, 255), random(0, 255)); 29 | objects.push(randomBall); 30 | } 31 | 32 | for (var j = 0; j < 10; j++) { 33 | var randomBlock = matter.makeBlock( 34 | random(0, width), random(0, height), random(20, 80), random(20, 80)); 35 | randomBlock.color = color(random(0, 255), random(0, 255), random(0, 255)); 36 | objects.push(randomBlock); 37 | } 38 | } 39 | 40 | function mousePressed() { 41 | if (upsideDown) { 42 | matter.normalGravity(); 43 | } else { 44 | matter.invertedGravity(); 45 | } 46 | upsideDown = !upsideDown; 47 | } 48 | 49 | function draw() { 50 | background(0); 51 | 52 | for (var i = objects.length - 1; i >= 0; i--) { 53 | var o = objects[i]; 54 | fill(o.color); 55 | o.show(); 56 | if (o.isOffCanvas()) { 57 | matter.forget(o); 58 | objects.splice(i, 1); 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /examples/lattice/lattice.js: -------------------------------------------------------------------------------- 1 | var latticeBalls = []; 2 | var latticeConnections = []; 3 | var latticeDiagonals = []; 4 | var floor; 5 | var BALLS_PER_SIDE = 5; 6 | var GAP_SIZE = 80; 7 | 8 | function setup() { 9 | var canvas = createCanvas(600, 600); 10 | 11 | matter.init(); 12 | matter.mouseInteraction(canvas); 13 | 14 | floor = matter.makeBarrier(width / 2, height, width, 50, { 15 | restitution: 1 16 | }); 17 | 18 | var halfSide = GAP_SIZE * Math.floor(BALLS_PER_SIDE / 2); 19 | for (var i = -halfSide; i <= halfSide; i += GAP_SIZE) { 20 | for (var j = -halfSide; j <= halfSide; j += GAP_SIZE) { 21 | latticeBalls.push(matter.makeBall(j + width / 2, i - GAP_SIZE, 30, { 22 | restitution: 1 23 | })); 24 | } 25 | } 26 | 27 | for (var m = 0; m < latticeBalls.length; m++) { 28 | for (var n = 0; n < latticeBalls.length; n++) { 29 | // horizontal supports 30 | if (m - n === 1 && 31 | Math.floor(m / BALLS_PER_SIDE) === Math.floor(n / BALLS_PER_SIDE)) { 32 | latticeConnections.push( 33 | matter.connect(latticeBalls[m], latticeBalls[n], { 34 | stiffness: 0.1 35 | })); 36 | } 37 | 38 | // vertical supports 39 | if (m - n === BALLS_PER_SIDE) { 40 | latticeConnections.push( 41 | matter.connect(latticeBalls[m], latticeBalls[n], { 42 | stiffness: 0.1 43 | })); 44 | } 45 | 46 | // diagonal supports 47 | if ((m - n === BALLS_PER_SIDE + 1 || m - n === BALLS_PER_SIDE - 1) && 48 | Math.floor(m / BALLS_PER_SIDE) - Math.floor(n / BALLS_PER_SIDE) === 1) { 49 | latticeDiagonals.push( 50 | matter.connect(latticeBalls[m], latticeBalls[n], { 51 | stiffness: 0.1 52 | })); 53 | } 54 | } 55 | } 56 | } 57 | 58 | function draw() { 59 | background(127); 60 | 61 | stroke(0, 255, 0); 62 | for (var i = 0; i < latticeConnections.length; i++) { 63 | latticeConnections[i].show(); 64 | } 65 | 66 | stroke(255, 0, 0); 67 | for (var j = 0; j < latticeDiagonals.length; j++) { 68 | latticeDiagonals[j].show(); 69 | } 70 | 71 | noStroke(); 72 | fill(255); 73 | for (var k = 0; k < latticeBalls.length; k++) { 74 | latticeBalls[k].show(); 75 | } 76 | 77 | fill(0); 78 | floor.show(); 79 | } 80 | -------------------------------------------------------------------------------- /docs/assets/github.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | github.com style (c) Vasily Polovnyov 4 | 5 | */ 6 | 7 | .hljs { 8 | display: block; 9 | overflow-x: auto; 10 | padding: 0.5em; 11 | color: #333; 12 | background: #f8f8f8; 13 | -webkit-text-size-adjust: none; 14 | } 15 | 16 | .hljs-comment, 17 | .diff .hljs-header, 18 | .hljs-javadoc { 19 | color: #998; 20 | font-style: italic; 21 | } 22 | 23 | .hljs-keyword, 24 | .css .rule .hljs-keyword, 25 | .hljs-winutils, 26 | .nginx .hljs-title, 27 | .hljs-subst, 28 | .hljs-request, 29 | .hljs-status { 30 | color: #1184CE; 31 | } 32 | 33 | .hljs-number, 34 | .hljs-hexcolor, 35 | .ruby .hljs-constant { 36 | color: #ed225d; 37 | } 38 | 39 | .hljs-string, 40 | .hljs-tag .hljs-value, 41 | .hljs-phpdoc, 42 | .hljs-dartdoc, 43 | .tex .hljs-formula { 44 | color: #ed225d; 45 | } 46 | 47 | .hljs-title, 48 | .hljs-id, 49 | .scss .hljs-preprocessor { 50 | color: #900; 51 | font-weight: bold; 52 | } 53 | 54 | .hljs-list .hljs-keyword, 55 | .hljs-subst { 56 | font-weight: normal; 57 | } 58 | 59 | .hljs-class .hljs-title, 60 | .hljs-type, 61 | .vhdl .hljs-literal, 62 | .tex .hljs-command { 63 | color: #458; 64 | font-weight: bold; 65 | } 66 | 67 | .hljs-tag, 68 | .hljs-tag .hljs-title, 69 | .hljs-rules .hljs-property, 70 | .django .hljs-tag .hljs-keyword { 71 | color: #000080; 72 | font-weight: normal; 73 | } 74 | 75 | .hljs-attribute, 76 | .hljs-variable, 77 | .lisp .hljs-body { 78 | color: #008080; 79 | } 80 | 81 | .hljs-regexp { 82 | color: #009926; 83 | } 84 | 85 | .hljs-symbol, 86 | .ruby .hljs-symbol .hljs-string, 87 | .lisp .hljs-keyword, 88 | .clojure .hljs-keyword, 89 | .scheme .hljs-keyword, 90 | .tex .hljs-special, 91 | .hljs-prompt { 92 | color: #990073; 93 | } 94 | 95 | .hljs-built_in { 96 | color: #0086b3; 97 | } 98 | 99 | .hljs-preprocessor, 100 | .hljs-pragma, 101 | .hljs-pi, 102 | .hljs-doctype, 103 | .hljs-shebang, 104 | .hljs-cdata { 105 | color: #999; 106 | font-weight: bold; 107 | } 108 | 109 | .hljs-deletion { 110 | background: #fdd; 111 | } 112 | 113 | .hljs-addition { 114 | background: #dfd; 115 | } 116 | 117 | .diff .hljs-change { 118 | background: #0086b3; 119 | } 120 | 121 | .hljs-chunk { 122 | color: #aaa; 123 | } 124 | -------------------------------------------------------------------------------- /docs/assets/style.css: -------------------------------------------------------------------------------- 1 | .documentation { 2 | font-family: Helvetica, sans-serif; 3 | color: #666; 4 | line-height: 1.5; 5 | background: #f5f5f5; 6 | } 7 | 8 | .black { 9 | color: #666; 10 | } 11 | 12 | .bg-white { 13 | background-color: #fff; 14 | } 15 | 16 | h4 { 17 | margin: 20px 0 10px 0; 18 | } 19 | 20 | .documentation h3 { 21 | color: #000; 22 | } 23 | 24 | .border-bottom { 25 | border-color: #ddd; 26 | } 27 | 28 | a { 29 | color: #1184CE; 30 | text-decoration: none; 31 | } 32 | 33 | .documentation a[href]:hover { 34 | text-decoration: underline; 35 | } 36 | 37 | a:hover { 38 | cursor: pointer; 39 | } 40 | 41 | .py1-ul li { 42 | padding: 5px 0; 43 | } 44 | 45 | .max-height-100 { 46 | max-height: 100%; 47 | } 48 | 49 | section:target h3 { 50 | font-weight:700; 51 | } 52 | 53 | .documentation td, 54 | .documentation th { 55 | padding: .25rem .25rem; 56 | } 57 | 58 | h1:hover .anchorjs-link, 59 | h2:hover .anchorjs-link, 60 | h3:hover .anchorjs-link, 61 | h4:hover .anchorjs-link { 62 | opacity: 1; 63 | } 64 | 65 | .fix-3 { 66 | width: 25%; 67 | max-width: 244px; 68 | } 69 | 70 | .fix-3 { 71 | width: 25%; 72 | max-width: 244px; 73 | } 74 | 75 | @media (min-width: 52em) { 76 | .fix-margin-3 { 77 | margin-left: 25%; 78 | } 79 | } 80 | 81 | .pre, pre, code, .code { 82 | font-family: Source Code Pro,Menlo,Consolas,Liberation Mono,monospace; 83 | font-size: 14px; 84 | } 85 | 86 | .fill-light { 87 | background: #F9F9F9; 88 | } 89 | 90 | .width2 { 91 | width: 1rem; 92 | } 93 | 94 | .input { 95 | font-family: inherit; 96 | display: block; 97 | width: 100%; 98 | height: 2rem; 99 | padding: .5rem; 100 | margin-bottom: 1rem; 101 | border: 1px solid #ccc; 102 | font-size: .875rem; 103 | border-radius: 3px; 104 | box-sizing: border-box; 105 | } 106 | 107 | table { 108 | border-collapse: collapse; 109 | } 110 | 111 | .prose table th, 112 | .prose table td { 113 | text-align: left; 114 | padding:8px; 115 | border:1px solid #ddd; 116 | } 117 | 118 | .prose table th:nth-child(1) { border-right: none; } 119 | .prose table th:nth-child(2) { border-left: none; } 120 | 121 | .prose table { 122 | border:1px solid #ddd; 123 | } 124 | 125 | .prose-big { 126 | font-size: 18px; 127 | line-height: 30px; 128 | } 129 | 130 | .quiet { 131 | opacity: 0.7; 132 | } 133 | 134 | .minishadow { 135 | box-shadow: 2px 2px 10px #f3f3f3; 136 | } 137 | -------------------------------------------------------------------------------- /docs/assets/site.js: -------------------------------------------------------------------------------- 1 | /* global anchors */ 2 | 3 | // add anchor links to headers 4 | anchors.options.placement = 'left'; 5 | anchors.add('h3'); 6 | 7 | // Filter UI 8 | var tocElements = document.getElementById('toc').getElementsByTagName('li'); 9 | 10 | document.getElementById('filter-input').addEventListener('keyup', function(e) { 11 | var i, element, children; 12 | 13 | // enter key 14 | if (e.keyCode === 13) { 15 | // go to the first displayed item in the toc 16 | for (i = 0; i < tocElements.length; i++) { 17 | element = tocElements[i]; 18 | if (!element.classList.contains('display-none')) { 19 | location.replace(element.firstChild.href); 20 | return e.preventDefault(); 21 | } 22 | } 23 | } 24 | 25 | var match = function() { 26 | return true; 27 | }; 28 | 29 | var value = this.value.toLowerCase(); 30 | 31 | if (!value.match(/^\s*$/)) { 32 | match = function(element) { 33 | return element.firstChild.innerHTML.toLowerCase().indexOf(value) !== -1; 34 | }; 35 | } 36 | 37 | for (i = 0; i < tocElements.length; i++) { 38 | element = tocElements[i]; 39 | children = Array.from(element.getElementsByTagName('li')); 40 | if (match(element) || children.some(match)) { 41 | element.classList.remove('display-none'); 42 | } else { 43 | element.classList.add('display-none'); 44 | } 45 | } 46 | }); 47 | 48 | var toggles = document.getElementsByClassName('toggle-step-sibling'); 49 | for (var i = 0; i < toggles.length; i++) { 50 | toggles[i].addEventListener('click', toggleStepSibling); 51 | } 52 | 53 | function toggleStepSibling() { 54 | var stepSibling = this.parentNode.parentNode.parentNode.getElementsByClassName( 55 | 'toggle-target' 56 | )[0]; 57 | var klass = 'display-none'; 58 | if (stepSibling.classList.contains(klass)) { 59 | stepSibling.classList.remove(klass); 60 | stepSibling.innerHTML = '▾'; 61 | } else { 62 | stepSibling.classList.add(klass); 63 | stepSibling.innerHTML = '▸'; 64 | } 65 | } 66 | 67 | var items = document.getElementsByClassName('toggle-sibling'); 68 | for (var j = 0; j < items.length; j++) { 69 | items[j].addEventListener('click', toggleSibling); 70 | } 71 | 72 | function toggleSibling() { 73 | var stepSibling = this.parentNode.getElementsByClassName('toggle-target')[0]; 74 | var icon = this.getElementsByClassName('icon')[0]; 75 | var klass = 'display-none'; 76 | if (stepSibling.classList.contains(klass)) { 77 | stepSibling.classList.remove(klass); 78 | icon.innerHTML = '▾'; 79 | } else { 80 | stepSibling.classList.add(klass); 81 | icon.innerHTML = '▸'; 82 | } 83 | } 84 | 85 | function showHashTarget(targetId) { 86 | var hashTarget = document.getElementById(targetId); 87 | // new target is hidden 88 | if ( 89 | hashTarget && 90 | hashTarget.offsetHeight === 0 && 91 | hashTarget.parentNode.parentNode.classList.contains('display-none') 92 | ) { 93 | hashTarget.parentNode.parentNode.classList.remove('display-none'); 94 | } 95 | } 96 | 97 | window.addEventListener('hashchange', function() { 98 | showHashTarget(location.hash.substring(1)); 99 | }); 100 | 101 | showHashTarget(location.hash.substring(1)); 102 | 103 | var toclinks = document.getElementsByClassName('pre-open'); 104 | for (var k = 0; k < toclinks.length; k++) { 105 | toclinks[k].addEventListener('mousedown', preOpen, false); 106 | } 107 | 108 | function preOpen() { 109 | showHashTarget(this.hash.substring(1)); 110 | } 111 | -------------------------------------------------------------------------------- /docs/assets/fonts/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries. 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | 5 | This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL 6 | 7 | 8 | ----------------------------------------------------------- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | ----------------------------------------------------------- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide 14 | development of collaborative font projects, to support the font creation 15 | efforts of academic and linguistic communities, and to provide a free and 16 | open framework in which fonts may be shared and improved in partnership 17 | with others. 18 | 19 | The OFL allows the licensed fonts to be used, studied, modified and 20 | redistributed freely as long as they are not sold by themselves. The 21 | fonts, including any derivative works, can be bundled, embedded, 22 | redistributed and/or sold with any software provided that any reserved 23 | names are not used by derivative works. The fonts and derivatives, 24 | however, cannot be released under any other type of license. The 25 | requirement for fonts to remain under this license does not apply 26 | to any document created using the fonts or their derivatives. 27 | 28 | DEFINITIONS 29 | "Font Software" refers to the set of files released by the Copyright 30 | Holder(s) under this license and clearly marked as such. This may 31 | include source files, build scripts and documentation. 32 | 33 | "Reserved Font Name" refers to any names specified as such after the 34 | copyright statement(s). 35 | 36 | "Original Version" refers to the collection of Font Software components as 37 | distributed by the Copyright Holder(s). 38 | 39 | "Modified Version" refers to any derivative made by adding to, deleting, 40 | or substituting -- in part or in whole -- any of the components of the 41 | Original Version, by changing formats or by porting the Font Software to a 42 | new environment. 43 | 44 | "Author" refers to any designer, engineer, programmer, technical 45 | writer or other person who contributed to the Font Software. 46 | 47 | PERMISSION & CONDITIONS 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 50 | redistribute, and sell modified and unmodified copies of the Font 51 | Software, subject to the following conditions: 52 | 53 | 1) Neither the Font Software nor any of its individual components, 54 | in Original or Modified Versions, may be sold by itself. 55 | 56 | 2) Original or Modified Versions of the Font Software may be bundled, 57 | redistributed and/or sold with any software, provided that each copy 58 | contains the above copyright notice and this license. These can be 59 | included either as stand-alone text files, human-readable headers or 60 | in the appropriate machine-readable metadata fields within text or 61 | binary files as long as those fields can be easily viewed by the user. 62 | 63 | 3) No Modified Version of the Font Software may use the Reserved Font 64 | Name(s) unless explicit written permission is granted by the corresponding 65 | Copyright Holder. This restriction only applies to the primary font name as 66 | presented to the users. 67 | 68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 69 | Software shall not be used to promote, endorse or advertise any 70 | Modified Version, except to acknowledge the contribution(s) of the 71 | Copyright Holder(s) and the Author(s) or with their explicit written 72 | permission. 73 | 74 | 5) The Font Software, modified or unmodified, in part or in whole, 75 | must be distributed entirely under this license, and must not be 76 | distributed under any other license. The requirement for fonts to 77 | remain under this license does not apply to any document created 78 | using the Font Software. 79 | 80 | TERMINATION 81 | This license becomes null and void if any of the above conditions are 82 | not met. 83 | 84 | DISCLAIMER 85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 93 | OTHER DEALINGS IN THE FONT SOFTWARE. 94 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # p5-matter 2 | ### Seamlessly integrate matter.js with p5.js 3 | 4 | The aim of this library is to make it simple to use matter.js, a JavaScript based physics engine, in your p5.js sketches. matter.js has a lot of options. This means that it is highly customizable, but also sometimes overwhelming. p5-matter hides some of this complexity (without reducing the overall power) so that you can quickly start adding realistic physics interactions to your creations. We automatically deal with the messy stuff, like configuring and maintaining the environment, so that you can focus on the important stuff, like making an awesome game. 5 | 6 | p5-matter makes the interplay between p5.js and matter.js more natural. The API will feel more intuitive for someone with a p5.js background. Default rendering of physical objects is provided in p5.js. We resolve the places where p5.js and matter.js clash, such as the positioning system for rectangles for you. p5-matter also supports features that do not exist in matter.js; "signs" are text that respond to collisions and other physics phenomena. 7 | 8 | 9 | ## Starter Template 10 | 11 | Use our starter template to get p5-matter up and running as quickly as possible. The template includes all the dependencies, p5.js, matter.js, and p5-matter, and comes with a small demo program. You can run it by unzipping the download and opening the index.html file in any browser. To start creating, just modify the sketch.js file. 12 | 13 | **[Download the Starter Template!](http://palmerpaul.com/p5-matter/p5-matter-template.zip)** 14 | 15 | 16 | ## Documentation 17 | 18 | Everything you can do as a user of p5-matter exists in the global `matter` object. This object has a handful of methods for creating physics-aware objects and manipulating the environment. See the [documentation](http://palmerpaul.com/p5-matter/docs) for details. 19 | 20 | 21 | ## Examples 22 | 23 | ### Highlights 24 | 25 | **Draw Barriers** - Click and drag to draw a barrier to stop falling balls.
26 | [See it live!](http://palmerpaul.com/p5-matter/examples/draw-barriers) — [View source code.](https://github.com/pzp1997/p5-matter/blob/master/examples/draw-barriers/draw-barriers.js) 27 | 28 | **Lattice** - Drag around a lattice of interconnected balls.
29 | [See it live!](http://palmerpaul.com/p5-matter/examples/lattice) — [View source code.](https://github.com/pzp1997/p5-matter/blob/master/examples/lattice/lattice.js) 30 | 31 | **Mouse Orbit** - You are the Earth! Move your mouse around to make the Moon orbit around you.
32 | [See it live!](http://palmerpaul.com/p5-matter/examples/mouse-orbit) — [View source code.](https://github.com/pzp1997/p5-matter/blob/master/examples/mouse-orbit/mouse-orbit.js) 33 | 34 | **Physics Sign** - Physics-aware text! Balls will bounce off the text. Click the mouse to make the sign fall.
35 | [See it live!](http://palmerpaul.com/p5-matter/examples/physics-sign) — [View source code.](https://github.com/pzp1997/p5-matter/blob/master/examples/physics-sign/physics-sign.js) 36 | 37 | ### All Examples 38 | 39 | **Freeze Click** - Click on the falling balls to freeze them in place (click again to unfreeze the ball).
40 | [See it live!](http://palmerpaul.com/p5-matter/examples/freeze-click) — [View source code.](https://github.com/pzp1997/p5-matter/blob/master/examples/freeze-click/freeze-click.js) 41 | 42 | **Pendulum** - Interactive pendulum simulation.
43 | [See it live!](http://palmerpaul.com/p5-matter/examples/pendulum) — [View source code.](https://github.com/pzp1997/p5-matter/blob/master/examples/pendulum/pendulum.js) 44 | 45 | **Throw Block** - Throw a block around the screen.
46 | [See it live!](http://palmerpaul.com/p5-matter/examples/throw-block) — [View source code.](https://github.com/pzp1997/p5-matter/blob/master/examples/throw-block/throw-block.js) 47 | 48 | **Flip Gravity** - Change the direction of gravity by clicking your mouse.
49 | [See it live!](http://palmerpaul.com/p5-matter/examples/flip-gravity) — [View source code.](https://github.com/pzp1997/p5-matter/blob/master/examples/flip-gravity/flip-gravity.js) 50 | 51 | **Flappy Bird** - Skeleton for a flappy birds style game. Press the mouse to jump.
[See it live!](http://palmerpaul.com/p5-matter/examples/flappy-bird) — [View source code.](https://github.com/pzp1997/p5-matter/blob/master/examples/flappy-bird/flappy-bird.js) 52 | 53 | **Falling Ball** - Simple simulation of a ball falling with gravity.
54 | [See it live!](http://palmerpaul.com/p5-matter/examples/falling-ball) — [View source code.](https://github.com/pzp1997/p5-matter/blob/master/examples/falling-ball/falling-ball.js) 55 | 56 | **Simple Platform** - Drop boxes onto a floor with realistic collisions by clicking your mouse.
57 | [See it live!](http://palmerpaul.com/p5-matter/examples/simple-platform) — [View source code.](https://github.com/pzp1997/p5-matter/blob/master/examples/simple-platform/simple-platform.js) 58 | 59 | **Tilted Platform** - Roll balls down a series of tilted platforms with realistic collisions by clicking your mouse.
60 | [See it live!](http://palmerpaul.com/p5-matter/examples/tilted-platform) — [View source code.](https://github.com/pzp1997/p5-matter/blob/master/examples/tilted-platform/tilted-platform.js) 61 | 62 | **Break Connection** - Click the mouse to break the string connecting two balls.
63 | [See it live!](http://palmerpaul.com/p5-matter/examples/break-connection) — [View source code.](https://github.com/pzp1997/p5-matter/blob/master/examples/break-connection/break-connection.js) 64 | 65 | 66 | ## Credit 67 | 68 | Palmer Paul (programmer, maintainer) 69 |
70 | Stephen Lewis (concept) 71 | -------------------------------------------------------------------------------- /src/p5-matter.min.js: -------------------------------------------------------------------------------- 1 | var matter=function(){"use strict";var engine=null;var mouseEnabled=[];var init=function(manual){if(engine===null){engine=Matter.Engine.create();if(!manual){Matter.Engine.run(engine)}}};var addToWorld=function(physicalObject){init();Matter.World.addBody(engine.world,physicalObject.body)};var makeBall=function(x,y,diameter,options){var ball=new Ball(x,y,diameter,options);addToWorld(ball);return ball};var makeBlock=function(x,y,width,height,options){var block=new Block(x,y,width,height,options);addToWorld(block);return block};var makeBarrier=function(x,y,width,height,options){var barrier=new Block(x,y,width,height,options);barrier.freeze();addToWorld(barrier);return barrier};var makeSign=function(text,x,y,options){var sign=new Sign(text,x,y,options);addToWorld(sign);return sign};var connect=function(physicalObjectA,physicalObjectB,options){options=options||{};options.bodyA=physicalObjectA.body;options.bodyB=physicalObjectB.body;var constraint=Matter.Constraint.create(options);var conn=new Connection(constraint,physicalObjectA,physicalObjectB);physicalObjectA.connections.push(conn);physicalObjectB.connections.push(conn);init();Matter.World.addConstraint(engine.world,constraint);return conn};var normalGravity=function(){changeGravity(0,1)};var invertedGravity=function(){changeGravity(0,-1)};var zeroGravity=function(){changeGravity(0,0)};var changeGravity=function(x,y){init();engine.world.gravity.x=x;engine.world.gravity.y=y};var forget=function(physicalObjectOrConnection){init();if(physicalObjectOrConnection===null){return}if(physicalObjectOrConnection.body){var physicalObject=physicalObjectOrConnection;var connections=physicalObject.connections;for(var i=connections.length-1;i>=0;i--){forget(connections[i])}Matter.World.remove(engine.world,physicalObject.body)}else if(physicalObjectOrConnection.constraint){var connection=physicalObjectOrConnection;var physObj=connection.physicalObjectA;var index=physObj.connections.lastIndexOf(connection);if(index>=0){physObj.connections.splice(index,1)}physObj=connection.physicalObjectB;index=physObj.connections.lastIndexOf(connection);if(index>=0){physObj.connections.splice(index,1)}Matter.World.remove(engine.world,connection.constraint)}physicalObjectOrConnection.active=false};var manualTick=function(){init(true);Matter.Engine.update(engine)};var mouseInteraction=function(canvas){var canvasElt;if(canvas&&canvas.elt){canvasElt=canvas.elt}else if(window&&window.canvas){canvasElt=window.canvas}else{canvasElt=null}if(canvasElt&&!mouseEnabled.includes(canvasElt)){var mouse=Matter.Mouse.create(canvasElt);mouse.pixelRatio=pixelDensity();init();Matter.World.add(engine.world,Matter.MouseConstraint.create(engine,{mouse:mouse}));mouseEnabled.push(canvasElt)}};var PhysicalObject=function(body,width,height){if(this.constructor===PhysicalObject){throw new Error("PhysicalObject is an abstract class, "+"so you can't make instances of it!")}this.body=body;this.width=width;this.height=height;this.connections=[];this.active=true};PhysicalObject.prototype.getPositionX=function(){return this.body.position.x};PhysicalObject.prototype.getPositionY=function(){return this.body.position.y};PhysicalObject.prototype.setPosition=function(xPos,yPos){Matter.Body.setPosition(this.body,{x:xPos,y:yPos})};PhysicalObject.prototype.setPositionX=function(xPos){this.setPosition(xPos,this.getPositionY())};PhysicalObject.prototype.setPositionY=function(yPos){this.setPosition(this.getPositionX(),yPos)};PhysicalObject.prototype.getVelocityX=function(){return this.body.velocity.x};PhysicalObject.prototype.getVelocityY=function(){return this.body.velocity.y};PhysicalObject.prototype.setVelocity=function(xVel,yVel){Matter.Body.setVelocity(this.body,{x:xVel,y:yVel})};PhysicalObject.prototype.setVelocityX=function(xVel){this.setVelocity(xVel,this.getVelocityY())};PhysicalObject.prototype.setVelocityY=function(yVel){this.setVelocity(this.getVelocityX(),yVel)};PhysicalObject.prototype.getWidth=function(){return this.width};PhysicalObject.prototype.getHeight=function(){return this.height};PhysicalObject.prototype.getAngle=function(){return this.body.angle};PhysicalObject.prototype.setAngle=function(angle){Matter.Body.setAngle(this.body,angle)};PhysicalObject.prototype.isFrozen=function(){return this.body.isStatic};PhysicalObject.prototype.freeze=function(){Matter.Body.setStatic(this.body,true)};PhysicalObject.prototype.unfreeze=function(){Matter.Body.setStatic(this.body,false)};PhysicalObject.prototype.isOffCanvas=function(bufferZone){bufferZone=bufferZone||0;var x=this.getPositionX();var y=this.getPositionY();var wid=this.getWidth();var hgt=this.getHeight();var minX=-(wid+bufferZone);var minY=-(hgt+bufferZone);var maxX=width+wid+bufferZone;var maxY=height+hgt+bufferZone;return xmaxX||ymaxY};PhysicalObject.prototype.isActive=function(){return this.active};PhysicalObject.prototype.show=function(){throw new Error("PhysicalObject.show is an abstract method, "+"so you can't invoke it!")};PhysicalObject.prototype.getX=function(){return this.body.position.x};PhysicalObject.prototype.getY=function(){return this.body.position.y};var Ball=function(x,y,diameter,options){var body=Matter.Bodies.circle(x,y,diameter/2,options);PhysicalObject.call(this,body,diameter,diameter)};Ball.prototype=Object.create(PhysicalObject.prototype);Ball.prototype.constructor=Ball;Ball.prototype.show=function(){push();translate(this.getPositionX(),this.getPositionY());rotate(this.getAngle());ellipseMode(CENTER);ellipse(0,0,this.getWidth(),this.getHeight());pop()};Ball.prototype.getDiameter=Ball.prototype.getWidth;Ball.prototype.getRadius=function(){return this.getDiameter()/2};var Block=function(x,y,width,height,options){var body=Matter.Bodies.rectangle(x,y,width,height,options);PhysicalObject.call(this,body,width,height)};Block.prototype=Object.create(PhysicalObject.prototype);Block.prototype.constructor=Block;Block.prototype.show=function(){push();translate(this.getPositionX(),this.getPositionY());rotate(this.getAngle());rectMode(CENTER);rect(0,0,this.getWidth(),this.getHeight());pop()};var Sign=function(text,x,y,options){this.text=text;Block.call(this,x,y,textWidth(text),textSize(),options)};Sign.prototype=Object.create(Block.prototype);Sign.prototype.constructor=Sign;Sign.prototype.getText=function(){return this.text};Sign.prototype.show=function(){push();translate(this.getPositionX(),this.getPositionY()+this.getHeight()*.25);rotate(this.getAngle());textAlign(CENTER);text(this.getText(),0,0);pop()};var Connection=function(constraint,physicalObjectA,physicalObjectB){this.constraint=constraint;this.physicalObjectA=physicalObjectA;this.physicalObjectB=physicalObjectB;this.active=true};Connection.prototype.isActive=function(){return this.active};Connection.prototype.show=function(){var aX=this.physicalObjectA.getPositionX();var aY=this.physicalObjectA.getPositionY();if(this.constraint.pointA){aX+=this.constraint.pointA.x;aY+=this.constraint.pointA.y}var bX=this.physicalObjectB.getPositionX();var bY=this.physicalObjectB.getPositionY();if(this.constraint.pointB){aX+=this.constraint.pointB.x;aY+=this.constraint.pointB.y}line(aX,aY,bX,bY)};return{init:init,makeBall:makeBall,makeBlock:makeBlock,makeBarrier:makeBarrier,makeSign:makeSign,connect:connect,normalGravity:normalGravity,invertedGravity:invertedGravity,zeroGravity:zeroGravity,changeGravity:changeGravity,forget:forget,manualTick:manualTick,mouseInteraction:mouseInteraction}}(); -------------------------------------------------------------------------------- /template/lib/p5-matter/1.1.0/p5-matter.min.js: -------------------------------------------------------------------------------- 1 | var matter=function(){"use strict";var engine=null;var mouseEnabled=[];var init=function(manual){if(engine===null){engine=Matter.Engine.create();if(!manual){Matter.Engine.run(engine)}}};var addToWorld=function(physicalObject){init();Matter.World.addBody(engine.world,physicalObject.body)};var makeBall=function(x,y,diameter,options){var ball=new Ball(x,y,diameter,options);addToWorld(ball);return ball};var makeBlock=function(x,y,width,height,options){var block=new Block(x,y,width,height,options);addToWorld(block);return block};var makeBarrier=function(x,y,width,height,options){var barrier=new Block(x,y,width,height,options);barrier.freeze();addToWorld(barrier);return barrier};var makeSign=function(text,x,y,options){var sign=new Sign(text,x,y,options);addToWorld(sign);return sign};var connect=function(physicalObjectA,physicalObjectB,options){options=options||{};options.bodyA=physicalObjectA.body;options.bodyB=physicalObjectB.body;var constraint=Matter.Constraint.create(options);var conn=new Connection(constraint,physicalObjectA,physicalObjectB);physicalObjectA.connections.push(conn);physicalObjectB.connections.push(conn);init();Matter.World.addConstraint(engine.world,constraint);return conn};var normalGravity=function(){changeGravity(0,1)};var invertedGravity=function(){changeGravity(0,-1)};var zeroGravity=function(){changeGravity(0,0)};var changeGravity=function(x,y){init();engine.world.gravity.x=x;engine.world.gravity.y=y};var forget=function(physicalObjectOrConnection){init();if(physicalObjectOrConnection===null){return}if(physicalObjectOrConnection.body){var physicalObject=physicalObjectOrConnection;var connections=physicalObject.connections;for(var i=connections.length-1;i>=0;i--){forget(connections[i])}Matter.World.remove(engine.world,physicalObject.body)}else if(physicalObjectOrConnection.constraint){var connection=physicalObjectOrConnection;var physObj=connection.physicalObjectA;var index=physObj.connections.lastIndexOf(connection);if(index>=0){physObj.connections.splice(index,1)}physObj=connection.physicalObjectB;index=physObj.connections.lastIndexOf(connection);if(index>=0){physObj.connections.splice(index,1)}Matter.World.remove(engine.world,connection.constraint)}physicalObjectOrConnection.active=false};var manualTick=function(){init(true);Matter.Engine.update(engine)};var mouseInteraction=function(canvas){var canvasElt;if(canvas&&canvas.elt){canvasElt=canvas.elt}else if(window&&window.canvas){canvasElt=window.canvas}else{canvasElt=null}if(canvasElt&&!mouseEnabled.includes(canvasElt)){var mouse=Matter.Mouse.create(canvasElt);mouse.pixelRatio=pixelDensity();init();Matter.World.add(engine.world,Matter.MouseConstraint.create(engine,{mouse:mouse}));mouseEnabled.push(canvasElt)}};var PhysicalObject=function(body,width,height){if(this.constructor===PhysicalObject){throw new Error("PhysicalObject is an abstract class, "+"so you can't make instances of it!")}this.body=body;this.width=width;this.height=height;this.connections=[];this.active=true};PhysicalObject.prototype.getPositionX=function(){return this.body.position.x};PhysicalObject.prototype.getPositionY=function(){return this.body.position.y};PhysicalObject.prototype.setPosition=function(xPos,yPos){Matter.Body.setPosition(this.body,{x:xPos,y:yPos})};PhysicalObject.prototype.setPositionX=function(xPos){this.setPosition(xPos,this.getPositionY())};PhysicalObject.prototype.setPositionY=function(yPos){this.setPosition(this.getPositionX(),yPos)};PhysicalObject.prototype.getVelocityX=function(){return this.body.velocity.x};PhysicalObject.prototype.getVelocityY=function(){return this.body.velocity.y};PhysicalObject.prototype.setVelocity=function(xVel,yVel){Matter.Body.setVelocity(this.body,{x:xVel,y:yVel})};PhysicalObject.prototype.setVelocityX=function(xVel){this.setVelocity(xVel,this.getVelocityY())};PhysicalObject.prototype.setVelocityY=function(yVel){this.setVelocity(this.getVelocityX(),yVel)};PhysicalObject.prototype.getWidth=function(){return this.width};PhysicalObject.prototype.getHeight=function(){return this.height};PhysicalObject.prototype.getAngle=function(){return this.body.angle};PhysicalObject.prototype.setAngle=function(angle){Matter.Body.setAngle(this.body,angle)};PhysicalObject.prototype.isFrozen=function(){return this.body.isStatic};PhysicalObject.prototype.freeze=function(){Matter.Body.setStatic(this.body,true)};PhysicalObject.prototype.unfreeze=function(){Matter.Body.setStatic(this.body,false)};PhysicalObject.prototype.isOffCanvas=function(bufferZone){bufferZone=bufferZone||0;var x=this.getPositionX();var y=this.getPositionY();var wid=this.getWidth();var hgt=this.getHeight();var minX=-(wid+bufferZone);var minY=-(hgt+bufferZone);var maxX=width+wid+bufferZone;var maxY=height+hgt+bufferZone;return xmaxX||ymaxY};PhysicalObject.prototype.isActive=function(){return this.active};PhysicalObject.prototype.show=function(){throw new Error("PhysicalObject.show is an abstract method, "+"so you can't invoke it!")};PhysicalObject.prototype.getX=function(){return this.body.position.x};PhysicalObject.prototype.getY=function(){return this.body.position.y};var Ball=function(x,y,diameter,options){var body=Matter.Bodies.circle(x,y,diameter/2,options);PhysicalObject.call(this,body,diameter,diameter)};Ball.prototype=Object.create(PhysicalObject.prototype);Ball.prototype.constructor=Ball;Ball.prototype.show=function(){push();translate(this.getPositionX(),this.getPositionY());rotate(this.getAngle());ellipseMode(CENTER);ellipse(0,0,this.getWidth(),this.getHeight());pop()};Ball.prototype.getDiameter=Ball.prototype.getWidth;Ball.prototype.getRadius=function(){return this.getDiameter()/2};var Block=function(x,y,width,height,options){var body=Matter.Bodies.rectangle(x,y,width,height,options);PhysicalObject.call(this,body,width,height)};Block.prototype=Object.create(PhysicalObject.prototype);Block.prototype.constructor=Block;Block.prototype.show=function(){push();translate(this.getPositionX(),this.getPositionY());rotate(this.getAngle());rectMode(CENTER);rect(0,0,this.getWidth(),this.getHeight());pop()};var Sign=function(text,x,y,options){this.text=text;Block.call(this,x,y,textWidth(text),textSize(),options)};Sign.prototype=Object.create(Block.prototype);Sign.prototype.constructor=Sign;Sign.prototype.getText=function(){return this.text};Sign.prototype.show=function(){push();translate(this.getPositionX(),this.getPositionY()+this.getHeight()*.25);rotate(this.getAngle());textAlign(CENTER);text(this.getText(),0,0);pop()};var Connection=function(constraint,physicalObjectA,physicalObjectB){this.constraint=constraint;this.physicalObjectA=physicalObjectA;this.physicalObjectB=physicalObjectB;this.active=true};Connection.prototype.isActive=function(){return this.active};Connection.prototype.show=function(){var aX=this.physicalObjectA.getPositionX();var aY=this.physicalObjectA.getPositionY();if(this.constraint.pointA){aX+=this.constraint.pointA.x;aY+=this.constraint.pointA.y}var bX=this.physicalObjectB.getPositionX();var bY=this.physicalObjectB.getPositionY();if(this.constraint.pointB){aX+=this.constraint.pointB.x;aY+=this.constraint.pointB.y}line(aX,aY,bX,bY)};return{init:init,makeBall:makeBall,makeBlock:makeBlock,makeBarrier:makeBarrier,makeSign:makeSign,connect:connect,normalGravity:normalGravity,invertedGravity:invertedGravity,zeroGravity:zeroGravity,changeGravity:changeGravity,forget:forget,manualTick:manualTick,mouseInteraction:mouseInteraction}}(); -------------------------------------------------------------------------------- /src/p5-matter.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["src/p5-matter.js"],"names":["matter","engine","mouseEnabled","init","manual","Matter","Engine","create","run","addToWorld","physicalObject","World","addBody","world","body","makeBall","x","y","diameter","options","ball","Ball","makeBlock","width","height","block","Block","makeBarrier","barrier","freeze","makeSign","text","sign","Sign","connect","physicalObjectA","physicalObjectB","bodyA","bodyB","constraint","Constraint","conn","Connection","connections","push","addConstraint","normalGravity","changeGravity","invertedGravity","zeroGravity","gravity","forget","physicalObjectOrConnection","i","length","remove","connection","physObj","index","lastIndexOf","splice","active","manualTick","update","mouseInteraction","canvas","canvasElt","elt","window","includes","mouse","Mouse","pixelRatio","pixelDensity","add","MouseConstraint","PhysicalObject","this","constructor","Error","prototype","getPositionX","position","getPositionY","setPosition","xPos","yPos","Body","setPositionX","setPositionY","getVelocityX","velocity","getVelocityY","setVelocity","xVel","yVel","setVelocityX","setVelocityY","getWidth","getHeight","getAngle","angle","setAngle","isFrozen","isStatic","setStatic","unfreeze","isOffCanvas","bufferZone","wid","hgt","minX","minY","maxX","maxY","isActive","show","getX","getY","Bodies","circle","call","Object","translate","rotate","ellipseMode","CENTER","ellipse","pop","getDiameter","getRadius","rectangle","rectMode","rect","textWidth","textSize","getText","textAlign","aX","aY","pointA","bX","bY","pointB","line"],"mappings":"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"} -------------------------------------------------------------------------------- /template/lib/p5-matter/1.1.0/p5-matter.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["src/p5-matter.js"],"names":["matter","engine","mouseEnabled","init","manual","Matter","Engine","create","run","addToWorld","physicalObject","World","addBody","world","body","makeBall","x","y","diameter","options","ball","Ball","makeBlock","width","height","block","Block","makeBarrier","barrier","freeze","makeSign","text","sign","Sign","connect","physicalObjectA","physicalObjectB","bodyA","bodyB","constraint","Constraint","conn","Connection","connections","push","addConstraint","normalGravity","changeGravity","invertedGravity","zeroGravity","gravity","forget","physicalObjectOrConnection","i","length","remove","connection","physObj","index","lastIndexOf","splice","active","manualTick","update","mouseInteraction","canvas","canvasElt","elt","window","includes","mouse","Mouse","pixelRatio","pixelDensity","add","MouseConstraint","PhysicalObject","this","constructor","Error","prototype","getPositionX","position","getPositionY","setPosition","xPos","yPos","Body","setPositionX","setPositionY","getVelocityX","velocity","getVelocityY","setVelocity","xVel","yVel","setVelocityX","setVelocityY","getWidth","getHeight","getAngle","angle","setAngle","isFrozen","isStatic","setStatic","unfreeze","isOffCanvas","bufferZone","wid","hgt","minX","minY","maxX","maxY","isActive","show","getX","getY","Bodies","circle","call","Object","translate","rotate","ellipseMode","CENTER","ellipse","pop","getDiameter","getRadius","rectangle","rectMode","rect","textWidth","textSize","getText","textAlign","aX","aY","pointA","bX","bY","pointB","line"],"mappings":"AAiDA,IAAIA,OAAU,WACZ,aAEA,IAAIC,OAAS,KACb,IAAIC,gBAeJ,IAAIC,KAAO,SAASC,QAClB,GAAIH,SAAW,KAAM,CACnBA,OAASI,OAAOC,OAAOC,SACvB,IAAKH,OAAQ,CACXC,OAAOC,OAAOE,IAAIP,WAYxB,IAAIQ,WAAa,SAASC,gBACxBP,OACAE,OAAOM,MAAMC,QAAQX,OAAOY,MAAOH,eAAeI,OAepD,IAAIC,SAAW,SAASC,EAAGC,EAAGC,SAAUC,SACtC,IAAIC,KAAO,IAAIC,KAAKL,EAAGC,EAAGC,SAAUC,SACpCV,WAAWW,MACX,OAAOA,MAgBT,IAAIE,UAAY,SAASN,EAAGC,EAAGM,MAAOC,OAAQL,SAC5C,IAAIM,MAAQ,IAAIC,MAAMV,EAAGC,EAAGM,MAAOC,OAAQL,SAC3CV,WAAWgB,OACX,OAAOA,OAiBT,IAAIE,YAAc,SAASX,EAAGC,EAAGM,MAAOC,OAAQL,SAC9C,IAAIS,QAAU,IAAIF,MAAMV,EAAGC,EAAGM,MAAOC,OAAQL,SAC7CS,QAAQC,SACRpB,WAAWmB,SACX,OAAOA,SAiBT,IAAIE,SAAW,SAASC,KAAMf,EAAGC,EAAGE,SAClC,IAAIa,KAAO,IAAIC,KAAKF,KAAMf,EAAGC,EAAGE,SAChCV,WAAWuB,MACX,OAAOA,MAoBT,IAAIE,QAAU,SAASC,gBAAiBC,gBAAiBjB,SACvDA,QAAUA,YACVA,QAAQkB,MAAQF,gBAAgBrB,KAChCK,QAAQmB,MAAQF,gBAAgBtB,KAChC,IAAIyB,WAAalC,OAAOmC,WAAWjC,OAAOY,SAE1C,IAAIsB,KAAO,IAAIC,WAAWH,WAAYJ,gBAAiBC,iBACvDD,gBAAgBQ,YAAYC,KAAKH,MACjCL,gBAAgBO,YAAYC,KAAKH,MAEjCtC,OACAE,OAAOM,MAAMkC,cAAc5C,OAAOY,MAAO0B,YAEzC,OAAOE,MAST,IAAIK,cAAgB,WAClBC,cAAc,EAAG,IASnB,IAAIC,gBAAkB,WACpBD,cAAc,GAAI,IASpB,IAAIE,YAAc,WAChBF,cAAc,EAAG,IAanB,IAAIA,cAAgB,SAAS/B,EAAGC,GAC9Bd,OACAF,OAAOY,MAAMqC,QAAQlC,EAAIA,EACzBf,OAAOY,MAAMqC,QAAQjC,EAAIA,GAa3B,IAAIkC,OAAS,SAASC,4BACpBjD,OAEA,GAAIiD,6BAA+B,KAAM,CACvC,OAGF,GAAIA,2BAA2BtC,KAAM,CACnC,IAAIJ,eAAiB0C,2BAErB,IAAIT,YAAcjC,eAAeiC,YACjC,IAAK,IAAIU,EAAIV,YAAYW,OAAS,EAAGD,GAAK,EAAGA,IAAK,CAChDF,OAAOR,YAAYU,IAGrBhD,OAAOM,MAAM4C,OAAOtD,OAAOY,MAAOH,eAAeI,WAC5C,GAAIsC,2BAA2Bb,WAAY,CAChD,IAAIiB,WAAaJ,2BAEjB,IAAIK,QAAUD,WAAWrB,gBACzB,IAAIuB,MAAQD,QAAQd,YAAYgB,YAAYH,YAC5C,GAAIE,OAAS,EAAG,CACdD,QAAQd,YAAYiB,OAAOF,MAAO,GAGpCD,QAAUD,WAAWpB,gBACrBsB,MAAQD,QAAQd,YAAYgB,YAAYH,YACxC,GAAIE,OAAS,EAAG,CACdD,QAAQd,YAAYiB,OAAOF,MAAO,GAGpCrD,OAAOM,MAAM4C,OAAOtD,OAAOY,MAAO2C,WAAWjB,YAG/Ca,2BAA2BS,OAAS,OAUtC,IAAIC,WAAa,WACf3D,KAAK,MACLE,OAAOC,OAAOyD,OAAO9D,SAcvB,IAAI+D,iBAAmB,SAASC,QAC9B,IAAIC,UAEJ,GAAID,QAAUA,OAAOE,IAAK,CACxBD,UAAYD,OAAOE,SACd,GAAIC,QAAUA,OAAOH,OAAQ,CAClCC,UAAYE,OAAOH,WACd,CACLC,UAAY,KAGd,GAAIA,YAAchE,aAAamE,SAASH,WAAY,CAClD,IAAII,MAAQjE,OAAOkE,MAAMhE,OAAO2D,WAChCI,MAAME,WAAaC,eAEnBtE,OACAE,OAAOM,MAAM+D,IAAIzE,OAAOY,MACtBR,OAAOsE,gBAAgBpE,OAAON,QAC5BqE,MAAOA,SAGXpE,aAAa0C,KAAKsB,aAqBtB,IAAIU,eAAiB,SAAS9D,KAAMS,MAAOC,QACzC,GAAIqD,KAAKC,cAAgBF,eAAgB,CACvC,MAAM,IAAIG,MAAM,wCACd,sCAGJF,KAAK/D,KAAOA,KACZ+D,KAAKtD,MAAQA,MACbsD,KAAKrD,OAASA,OACdqD,KAAKlC,eACLkC,KAAKhB,OAAS,MAQhBe,eAAeI,UAAUC,aAAe,WACtC,OAAOJ,KAAK/D,KAAKoE,SAASlE,GAQ5B4D,eAAeI,UAAUG,aAAe,WACtC,OAAON,KAAK/D,KAAKoE,SAASjE,GAS5B2D,eAAeI,UAAUI,YAAc,SAASC,KAAMC,MACpDjF,OAAOkF,KAAKH,YAAYP,KAAK/D,MAC3BE,EAAGqE,KACHpE,EAAGqE,QAUPV,eAAeI,UAAUQ,aAAe,SAASH,MAC/CR,KAAKO,YAAYC,KAAMR,KAAKM,iBAS9BP,eAAeI,UAAUS,aAAe,SAASH,MAC/CT,KAAKO,YAAYP,KAAKI,eAAgBK,OAQxCV,eAAeI,UAAUU,aAAe,WACtC,OAAOb,KAAK/D,KAAK6E,SAAS3E,GAQ5B4D,eAAeI,UAAUY,aAAe,WACtC,OAAOf,KAAK/D,KAAK6E,SAAS1E,GAS5B2D,eAAeI,UAAUa,YAAc,SAASC,KAAMC,MACpD1F,OAAOkF,KAAKM,YAAYhB,KAAK/D,MAC3BE,EAAG8E,KACH7E,EAAG8E,QAUPnB,eAAeI,UAAUgB,aAAe,SAASF,MAC/CjB,KAAKgB,YAAYC,KAAMjB,KAAKe,iBAS9BhB,eAAeI,UAAUiB,aAAe,SAASF,MAC/ClB,KAAKgB,YAAYhB,KAAKa,eAAgBK,OAQxCnB,eAAeI,UAAUkB,SAAW,WAClC,OAAOrB,KAAKtD,OAQdqD,eAAeI,UAAUmB,UAAY,WACnC,OAAOtB,KAAKrD,QAQdoD,eAAeI,UAAUoB,SAAW,WAClC,OAAOvB,KAAK/D,KAAKuF,OAQnBzB,eAAeI,UAAUsB,SAAW,SAASD,OAC3ChG,OAAOkF,KAAKe,SAASzB,KAAK/D,KAAMuF,QAQlCzB,eAAeI,UAAUuB,SAAW,WAClC,OAAO1B,KAAK/D,KAAK0F,UAMnB5B,eAAeI,UAAUnD,OAAS,WAChCxB,OAAOkF,KAAKkB,UAAU5B,KAAK/D,KAAM,OAMnC8D,eAAeI,UAAU0B,SAAW,WAClCrG,OAAOkF,KAAKkB,UAAU5B,KAAK/D,KAAM,QASnC8D,eAAeI,UAAU2B,YAAc,SAASC,YAC9CA,WAAaA,YAAc,EAE3B,IAAI5F,EAAI6D,KAAKI,eACb,IAAIhE,EAAI4D,KAAKM,eACb,IAAI0B,IAAMhC,KAAKqB,WACf,IAAIY,IAAMjC,KAAKsB,YAEf,IAAIY,OAASF,IAAMD,YACnB,IAAII,OAASF,IAAMF,YACnB,IAAIK,KAAO1F,MAAQsF,IAAMD,WACzB,IAAIM,KAAO1F,OAASsF,IAAMF,WAE1B,OAAO5F,EAAI+F,MAAQ/F,EAAIiG,MAAQhG,EAAI+F,MAAQ/F,EAAIiG,MASjDtC,eAAeI,UAAUmC,SAAW,WAClC,OAAOtC,KAAKhB,QASde,eAAeI,UAAUoC,KAAO,WAC9B,MAAM,IAAIrC,MAAM,8CACd,4BAOJH,eAAeI,UAAUqC,KAAO,WAC9B,OAAOxC,KAAK/D,KAAKoE,SAASlE,GAO5B4D,eAAeI,UAAUsC,KAAO,WAC9B,OAAOzC,KAAK/D,KAAKoE,SAASjE,GAqB5B,IAAII,KAAO,SAASL,EAAGC,EAAGC,SAAUC,SAClC,IAAIL,KAAOT,OAAOkH,OAAOC,OAAOxG,EAAGC,EAAGC,SAAW,EAAGC,SACpDyD,eAAe6C,KAAK5C,KAAM/D,KAAMI,SAAUA,WAE5CG,KAAK2D,UAAY0C,OAAOnH,OAAOqE,eAAeI,WAC9C3D,KAAK2D,UAAUF,YAAczD,KAE7BA,KAAK2D,UAAUoC,KAAO,WACpBxE,OACA+E,UAAU9C,KAAKI,eAAgBJ,KAAKM,gBACpCyC,OAAO/C,KAAKuB,YACZyB,YAAYC,QACZC,QAAQ,EAAG,EAAGlD,KAAKqB,WAAYrB,KAAKsB,aACpC6B,OAUF3G,KAAK2D,UAAUiD,YAAc5G,KAAK2D,UAAUkB,SAO5C7E,KAAK2D,UAAUkD,UAAY,WACzB,OAAOrD,KAAKoD,cAAgB,GAoB9B,IAAIvG,MAAQ,SAASV,EAAGC,EAAGM,MAAOC,OAAQL,SACxC,IAAIL,KAAOT,OAAOkH,OAAOY,UAAUnH,EAAGC,EAAGM,MAAOC,OAAQL,SACxDyD,eAAe6C,KAAK5C,KAAM/D,KAAMS,MAAOC,SAEzCE,MAAMsD,UAAY0C,OAAOnH,OAAOqE,eAAeI,WAC/CtD,MAAMsD,UAAUF,YAAcpD,MAE9BA,MAAMsD,UAAUoC,KAAO,WACrBxE,OACA+E,UAAU9C,KAAKI,eAAgBJ,KAAKM,gBACpCyC,OAAO/C,KAAKuB,YACZgC,SAASN,QACTO,KAAK,EAAG,EAAGxD,KAAKqB,WAAYrB,KAAKsB,aACjC6B,OAkBF,IAAI/F,KAAO,SAASF,KAAMf,EAAGC,EAAGE,SAC9B0D,KAAK9C,KAAOA,KACZL,MAAM+F,KAAK5C,KAAM7D,EAAGC,EAAGqH,UAAUvG,MAAOwG,WAAYpH,UAEtDc,KAAK+C,UAAY0C,OAAOnH,OAAOmB,MAAMsD,WACrC/C,KAAK+C,UAAUF,YAAc7C,KAO7BA,KAAK+C,UAAUwD,QAAU,WACvB,OAAO3D,KAAK9C,MAGdE,KAAK+C,UAAUoC,KAAO,WACpBxE,OACA+E,UAAU9C,KAAKI,eACbJ,KAAKM,eAAiBN,KAAKsB,YAAc,KAC3CyB,OAAO/C,KAAKuB,YACZqC,UAAUX,QACV/F,KAAK8C,KAAK2D,UAAW,EAAG,GACxBR,OAmBF,IAAItF,WAAa,SAASH,WAAYJ,gBAAiBC,iBACrDyC,KAAKtC,WAAaA,WAClBsC,KAAK1C,gBAAkBA,gBACvB0C,KAAKzC,gBAAkBA,gBACvByC,KAAKhB,OAAS,MAShBnB,WAAWsC,UAAUmC,SAAW,WAC9B,OAAOtC,KAAKhB,QAMdnB,WAAWsC,UAAUoC,KAAO,WAC1B,IAAIsB,GAAK7D,KAAK1C,gBAAgB8C,eAC9B,IAAI0D,GAAK9D,KAAK1C,gBAAgBgD,eAC9B,GAAIN,KAAKtC,WAAWqG,OAAQ,CAC1BF,IAAM7D,KAAKtC,WAAWqG,OAAO5H,EAC7B2H,IAAM9D,KAAKtC,WAAWqG,OAAO3H,EAG/B,IAAI4H,GAAKhE,KAAKzC,gBAAgB6C,eAC9B,IAAI6D,GAAKjE,KAAKzC,gBAAgB+C,eAC9B,GAAIN,KAAKtC,WAAWwG,OAAQ,CAC1BL,IAAM7D,KAAKtC,WAAWwG,OAAO/H,EAC7B2H,IAAM9D,KAAKtC,WAAWwG,OAAO9H,EAG/B+H,KAAKN,GAAIC,GAAIE,GAAIC,KAGnB,OACE3I,KAAMA,KACNY,SAAUA,SACVO,UAAWA,UACXK,YAAaA,YACbG,SAAUA,SACVI,QAASA,QACTY,cAAeA,cACfE,gBAAiBA,gBACjBC,YAAaA,YACbF,cAAeA,cACfI,OAAQA,OACRW,WAAYA,WACZE,iBAAkBA"} -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU LESSER GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | 9 | This version of the GNU Lesser General Public License incorporates 10 | the terms and conditions of version 3 of the GNU General Public 11 | License, supplemented by the additional permissions listed below. 12 | 13 | 0. Additional Definitions. 14 | 15 | As used herein, "this License" refers to version 3 of the GNU Lesser 16 | General Public License, and the "GNU GPL" refers to version 3 of the GNU 17 | General Public License. 18 | 19 | "The Library" refers to a covered work governed by this License, 20 | other than an Application or a Combined Work as defined below. 21 | 22 | An "Application" is any work that makes use of an interface provided 23 | by the Library, but which is not otherwise based on the Library. 24 | Defining a subclass of a class defined by the Library is deemed a mode 25 | of using an interface provided by the Library. 26 | 27 | A "Combined Work" is a work produced by combining or linking an 28 | Application with the Library. The particular version of the Library 29 | with which the Combined Work was made is also called the "Linked 30 | Version". 31 | 32 | The "Minimal Corresponding Source" for a Combined Work means the 33 | Corresponding Source for the Combined Work, excluding any source code 34 | for portions of the Combined Work that, considered in isolation, are 35 | based on the Application, and not on the Linked Version. 36 | 37 | The "Corresponding Application Code" for a Combined Work means the 38 | object code and/or source code for the Application, including any data 39 | and utility programs needed for reproducing the Combined Work from the 40 | Application, but excluding the System Libraries of the Combined Work. 41 | 42 | 1. Exception to Section 3 of the GNU GPL. 43 | 44 | You may convey a covered work under sections 3 and 4 of this License 45 | without being bound by section 3 of the GNU GPL. 46 | 47 | 2. Conveying Modified Versions. 48 | 49 | If you modify a copy of the Library, and, in your modifications, a 50 | facility refers to a function or data to be supplied by an Application 51 | that uses the facility (other than as an argument passed when the 52 | facility is invoked), then you may convey a copy of the modified 53 | version: 54 | 55 | a) under this License, provided that you make a good faith effort to 56 | ensure that, in the event an Application does not supply the 57 | function or data, the facility still operates, and performs 58 | whatever part of its purpose remains meaningful, or 59 | 60 | b) under the GNU GPL, with none of the additional permissions of 61 | this License applicable to that copy. 62 | 63 | 3. Object Code Incorporating Material from Library Header Files. 64 | 65 | The object code form of an Application may incorporate material from 66 | a header file that is part of the Library. You may convey such object 67 | code under terms of your choice, provided that, if the incorporated 68 | material is not limited to numerical parameters, data structure 69 | layouts and accessors, or small macros, inline functions and templates 70 | (ten or fewer lines in length), you do both of the following: 71 | 72 | a) Give prominent notice with each copy of the object code that the 73 | Library is used in it and that the Library and its use are 74 | covered by this License. 75 | 76 | b) Accompany the object code with a copy of the GNU GPL and this license 77 | document. 78 | 79 | 4. Combined Works. 80 | 81 | You may convey a Combined Work under terms of your choice that, 82 | taken together, effectively do not restrict modification of the 83 | portions of the Library contained in the Combined Work and reverse 84 | engineering for debugging such modifications, if you also do each of 85 | the following: 86 | 87 | a) Give prominent notice with each copy of the Combined Work that 88 | the Library is used in it and that the Library and its use are 89 | covered by this License. 90 | 91 | b) Accompany the Combined Work with a copy of the GNU GPL and this license 92 | document. 93 | 94 | c) For a Combined Work that displays copyright notices during 95 | execution, include the copyright notice for the Library among 96 | these notices, as well as a reference directing the user to the 97 | copies of the GNU GPL and this license document. 98 | 99 | d) Do one of the following: 100 | 101 | 0) Convey the Minimal Corresponding Source under the terms of this 102 | License, and the Corresponding Application Code in a form 103 | suitable for, and under terms that permit, the user to 104 | recombine or relink the Application with a modified version of 105 | the Linked Version to produce a modified Combined Work, in the 106 | manner specified by section 6 of the GNU GPL for conveying 107 | Corresponding Source. 108 | 109 | 1) Use a suitable shared library mechanism for linking with the 110 | Library. A suitable mechanism is one that (a) uses at run time 111 | a copy of the Library already present on the user's computer 112 | system, and (b) will operate properly with a modified version 113 | of the Library that is interface-compatible with the Linked 114 | Version. 115 | 116 | e) Provide Installation Information, but only if you would otherwise 117 | be required to provide such information under section 6 of the 118 | GNU GPL, and only to the extent that such information is 119 | necessary to install and execute a modified version of the 120 | Combined Work produced by recombining or relinking the 121 | Application with a modified version of the Linked Version. (If 122 | you use option 4d0, the Installation Information must accompany 123 | the Minimal Corresponding Source and Corresponding Application 124 | Code. If you use option 4d1, you must provide the Installation 125 | Information in the manner specified by section 6 of the GNU GPL 126 | for conveying Corresponding Source.) 127 | 128 | 5. Combined Libraries. 129 | 130 | You may place library facilities that are a work based on the 131 | Library side by side in a single library together with other library 132 | facilities that are not Applications and are not covered by this 133 | License, and convey such a combined library under terms of your 134 | choice, if you do both of the following: 135 | 136 | a) Accompany the combined library with a copy of the same work based 137 | on the Library, uncombined with any other library facilities, 138 | conveyed under the terms of this License. 139 | 140 | b) Give prominent notice with the combined library that part of it 141 | is a work based on the Library, and explaining where to find the 142 | accompanying uncombined form of the same work. 143 | 144 | 6. Revised Versions of the GNU Lesser General Public License. 145 | 146 | The Free Software Foundation may publish revised and/or new versions 147 | of the GNU Lesser General Public License from time to time. Such new 148 | versions will be similar in spirit to the present version, but may 149 | differ in detail to address new problems or concerns. 150 | 151 | Each version is given a distinguishing version number. If the 152 | Library as you received it specifies that a certain numbered version 153 | of the GNU Lesser General Public License "or any later version" 154 | applies to it, you have the option of following the terms and 155 | conditions either of that published version or of any later version 156 | published by the Free Software Foundation. If the Library as you 157 | received it does not specify a version number of the GNU Lesser 158 | General Public License, you may choose any version of the GNU Lesser 159 | General Public License ever published by the Free Software Foundation. 160 | 161 | If the Library as you received it specifies that a proxy can decide 162 | whether future versions of the GNU Lesser General Public License shall 163 | apply, that proxy's public statement of acceptance of any version is 164 | permanent authorization for you to choose that version for the 165 | Library. 166 | -------------------------------------------------------------------------------- /docs/assets/anchor.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * AnchorJS - v1.2.1 - 2015-07-02 3 | * https://github.com/bryanbraun/anchorjs 4 | * Copyright (c) 2015 Bryan Braun; Licensed MIT 5 | */ 6 | 7 | function AnchorJS(options) { 8 | 'use strict'; 9 | this.options = options || {}; 10 | 11 | this._applyRemainingDefaultOptions = function(opts) { 12 | this.options.icon = this.options.hasOwnProperty('icon') 13 | ? opts.icon 14 | : '\ue9cb'; // Accepts characters (and also URLs?), like '#', '¶', '❡', or '§'. 15 | this.options.visible = this.options.hasOwnProperty('visible') 16 | ? opts.visible 17 | : 'hover'; // Also accepts 'always' 18 | this.options.placement = this.options.hasOwnProperty('placement') 19 | ? opts.placement 20 | : 'right'; // Also accepts 'left' 21 | this.options.class = this.options.hasOwnProperty('class') ? opts.class : ''; // Accepts any class name. 22 | }; 23 | 24 | this._applyRemainingDefaultOptions(options); 25 | 26 | this.add = function(selector) { 27 | var elements, 28 | elsWithIds, 29 | idList, 30 | elementID, 31 | i, 32 | roughText, 33 | tidyText, 34 | index, 35 | count, 36 | newTidyText, 37 | readableID, 38 | anchor; 39 | 40 | this._applyRemainingDefaultOptions(this.options); 41 | 42 | // Provide a sensible default selector, if none is given. 43 | if (!selector) { 44 | selector = 'h1, h2, h3, h4, h5, h6'; 45 | } else if (typeof selector !== 'string') { 46 | throw new Error('The selector provided to AnchorJS was invalid.'); 47 | } 48 | 49 | elements = document.querySelectorAll(selector); 50 | if (elements.length === 0) { 51 | return false; 52 | } 53 | 54 | this._addBaselineStyles(); 55 | 56 | // We produce a list of existing IDs so we don't generate a duplicate. 57 | elsWithIds = document.querySelectorAll('[id]'); 58 | idList = [].map.call(elsWithIds, function assign(el) { 59 | return el.id; 60 | }); 61 | 62 | for (i = 0; i < elements.length; i++) { 63 | if (elements[i].hasAttribute('id')) { 64 | elementID = elements[i].getAttribute('id'); 65 | } else { 66 | roughText = elements[i].textContent; 67 | 68 | // Refine it so it makes a good ID. Strip out non-safe characters, replace 69 | // spaces with hyphens, truncate to 32 characters, and make toLowerCase. 70 | // 71 | // Example string: // '⚡⚡⚡ Unicode icons are cool--but they definitely don't belong in a URL fragment.' 72 | tidyText = roughText 73 | .replace(/[^\w\s-]/gi, '') // ' Unicode icons are cool--but they definitely dont belong in a URL fragment' 74 | .replace(/\s+/g, '-') // '-Unicode-icons-are-cool--but-they-definitely-dont-belong-in-a-URL-fragment' 75 | .replace(/-{2,}/g, '-') // '-Unicode-icons-are-cool-but-they-definitely-dont-belong-in-a-URL-fragment' 76 | .substring(0, 64) // '-Unicode-icons-are-cool-but-they-definitely-dont-belong-in-a-URL' 77 | .replace(/^-+|-+$/gm, '') // 'Unicode-icons-are-cool-but-they-definitely-dont-belong-in-a-URL' 78 | .toLowerCase(); // 'unicode-icons-are-cool-but-they-definitely-dont-belong-in-a-url' 79 | 80 | // Compare our generated ID to existing IDs (and increment it if needed) 81 | // before we add it to the page. 82 | newTidyText = tidyText; 83 | count = 0; 84 | do { 85 | if (index !== undefined) { 86 | newTidyText = tidyText + '-' + count; 87 | } 88 | // .indexOf is supported in IE9+. 89 | index = idList.indexOf(newTidyText); 90 | count += 1; 91 | } while (index !== -1); 92 | index = undefined; 93 | idList.push(newTidyText); 94 | 95 | // Assign it to our element. 96 | // Currently the setAttribute element is only supported in IE9 and above. 97 | elements[i].setAttribute('id', newTidyText); 98 | 99 | elementID = newTidyText; 100 | } 101 | 102 | readableID = elementID.replace(/-/g, ' '); 103 | 104 | // The following code builds the following DOM structure in a more effiecient (albeit opaque) way. 105 | // ''; 106 | anchor = document.createElement('a'); 107 | anchor.className = 'anchorjs-link ' + this.options.class; 108 | anchor.href = '#' + elementID; 109 | anchor.setAttribute('aria-label', 'Anchor link for: ' + readableID); 110 | anchor.setAttribute('data-anchorjs-icon', this.options.icon); 111 | 112 | if (this.options.visible === 'always') { 113 | anchor.style.opacity = '1'; 114 | } 115 | 116 | if (this.options.icon === '\ue9cb') { 117 | anchor.style.fontFamily = 'anchorjs-icons'; 118 | anchor.style.fontStyle = 'normal'; 119 | anchor.style.fontVariant = 'normal'; 120 | anchor.style.fontWeight = 'normal'; 121 | anchor.style.lineHeight = 1; 122 | } 123 | 124 | if (this.options.placement === 'left') { 125 | anchor.style.position = 'absolute'; 126 | anchor.style.marginLeft = '-1em'; 127 | anchor.style.paddingRight = '0.5em'; 128 | elements[i].insertBefore(anchor, elements[i].firstChild); 129 | } else { 130 | // if the option provided is `right` (or anything else). 131 | anchor.style.paddingLeft = '0.375em'; 132 | elements[i].appendChild(anchor); 133 | } 134 | } 135 | 136 | return this; 137 | }; 138 | 139 | this.remove = function(selector) { 140 | var domAnchor, elements = document.querySelectorAll(selector); 141 | for (var i = 0; i < elements.length; i++) { 142 | domAnchor = elements[i].querySelector('.anchorjs-link'); 143 | if (domAnchor) { 144 | elements[i].removeChild(domAnchor); 145 | } 146 | } 147 | return this; 148 | }; 149 | 150 | this._addBaselineStyles = function() { 151 | // We don't want to add global baseline styles if they've been added before. 152 | if (document.head.querySelector('style.anchorjs') !== null) { 153 | return; 154 | } 155 | 156 | var style = document.createElement('style'), 157 | linkRule = ' .anchorjs-link {' + 158 | ' opacity: 0;' + 159 | ' text-decoration: none;' + 160 | ' -webkit-font-smoothing: antialiased;' + 161 | ' -moz-osx-font-smoothing: grayscale;' + 162 | ' }', 163 | hoverRule = ' *:hover > .anchorjs-link,' + 164 | ' .anchorjs-link:focus {' + 165 | ' opacity: 1;' + 166 | ' }', 167 | anchorjsLinkFontFace = ' @font-face {' + 168 | ' font-family: "anchorjs-icons";' + 169 | ' font-style: normal;' + 170 | ' font-weight: normal;' + // Icon from icomoon; 10px wide & 10px tall; 2 empty below & 4 above 171 | ' src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBTUAAAC8AAAAYGNtYXAWi9QdAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zgq29TcAAAF4AAABNGhlYWQEZM3pAAACrAAAADZoaGVhBhUDxgAAAuQAAAAkaG10eASAADEAAAMIAAAAFGxvY2EAKACuAAADHAAAAAxtYXhwAAgAVwAAAygAAAAgbmFtZQ5yJ3cAAANIAAAB2nBvc3QAAwAAAAAFJAAAACAAAwJAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpywPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6cv//f//AAAAAAAg6cv//f//AAH/4xY5AAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAACADEARAJTAsAAKwBUAAABIiYnJjQ/AT4BMzIWFxYUDwEGIicmND8BNjQnLgEjIgYPAQYUFxYUBw4BIwciJicmND8BNjIXFhQPAQYUFx4BMzI2PwE2NCcmNDc2MhcWFA8BDgEjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAEAAAABAACiToc1Xw889QALBAAAAAAA0XnFFgAAAADRecUWAAAAAAJTAsAAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAAlMAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAACAAAAAoAAMQAAAAAACgAUAB4AmgABAAAABQBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIABwCfAAEAAAAAAAMADgBLAAEAAAAAAAQADgC0AAEAAAAAAAUACwAqAAEAAAAAAAYADgB1AAEAAAAAAAoAGgDeAAMAAQQJAAEAHAAOAAMAAQQJAAIADgCmAAMAAQQJAAMAHABZAAMAAQQJAAQAHADCAAMAAQQJAAUAFgA1AAMAAQQJAAYAHACDAAMAAQQJAAoANAD4YW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("truetype");' + 172 | ' }', 173 | pseudoElContent = ' [data-anchorjs-icon]::after {' + 174 | ' content: attr(data-anchorjs-icon);' + 175 | ' }', 176 | firstStyleEl; 177 | 178 | style.className = 'anchorjs'; 179 | style.appendChild(document.createTextNode('')); // Necessary for Webkit. 180 | 181 | // We place it in the head with the other style tags, if possible, so as to 182 | // not look out of place. We insert before the others so these styles can be 183 | // overridden if necessary. 184 | firstStyleEl = document.head.querySelector('[rel="stylesheet"], style'); 185 | if (firstStyleEl === undefined) { 186 | document.head.appendChild(style); 187 | } else { 188 | document.head.insertBefore(style, firstStyleEl); 189 | } 190 | 191 | style.sheet.insertRule(linkRule, style.sheet.cssRules.length); 192 | style.sheet.insertRule(hoverRule, style.sheet.cssRules.length); 193 | style.sheet.insertRule(pseudoElContent, style.sheet.cssRules.length); 194 | style.sheet.insertRule(anchorjsLinkFontFace, style.sheet.cssRules.length); 195 | }; 196 | } 197 | 198 | var anchors = new AnchorJS(); 199 | -------------------------------------------------------------------------------- /docs/assets/bass.css: -------------------------------------------------------------------------------- 1 | /*! Basscss | http://basscss.com | MIT License */ 2 | 3 | .h1{ font-size: 2rem } 4 | .h2{ font-size: 1.5rem } 5 | .h3{ font-size: 1.25rem } 6 | .h4{ font-size: 1rem } 7 | .h5{ font-size: .875rem } 8 | .h6{ font-size: .75rem } 9 | 10 | .font-family-inherit{ font-family:inherit } 11 | .font-size-inherit{ font-size:inherit } 12 | .text-decoration-none{ text-decoration:none } 13 | 14 | .bold{ font-weight: bold; font-weight: bold } 15 | .regular{ font-weight:normal } 16 | .italic{ font-style:italic } 17 | .caps{ text-transform:uppercase; letter-spacing: .2em; } 18 | 19 | .left-align{ text-align:left } 20 | .center{ text-align:center } 21 | .right-align{ text-align:right } 22 | .justify{ text-align:justify } 23 | 24 | .nowrap{ white-space:nowrap } 25 | .break-word{ word-wrap:break-word } 26 | 27 | .line-height-1{ line-height: 1 } 28 | .line-height-2{ line-height: 1.125 } 29 | .line-height-3{ line-height: 1.25 } 30 | .line-height-4{ line-height: 1.5 } 31 | 32 | .list-style-none{ list-style:none } 33 | .underline{ text-decoration:underline } 34 | 35 | .truncate{ 36 | max-width:100%; 37 | overflow:hidden; 38 | text-overflow:ellipsis; 39 | white-space:nowrap; 40 | } 41 | 42 | .list-reset{ 43 | list-style:none; 44 | padding-left:0; 45 | } 46 | 47 | .inline{ display:inline } 48 | .block{ display:block } 49 | .inline-block{ display:inline-block } 50 | .table{ display:table } 51 | .table-cell{ display:table-cell } 52 | 53 | .overflow-hidden{ overflow:hidden } 54 | .overflow-scroll{ overflow:scroll } 55 | .overflow-auto{ overflow:auto } 56 | 57 | .clearfix:before, 58 | .clearfix:after{ 59 | content:" "; 60 | display:table 61 | } 62 | .clearfix:after{ clear:both } 63 | 64 | .left{ float:left } 65 | .right{ float:right } 66 | 67 | .fit{ max-width:100% } 68 | 69 | .max-width-1{ max-width: 24rem } 70 | .max-width-2{ max-width: 32rem } 71 | .max-width-3{ max-width: 48rem } 72 | .max-width-4{ max-width: 64rem } 73 | 74 | .border-box{ box-sizing:border-box } 75 | 76 | .align-baseline{ vertical-align:baseline } 77 | .align-top{ vertical-align:top } 78 | .align-middle{ vertical-align:middle } 79 | .align-bottom{ vertical-align:bottom } 80 | 81 | .m0{ margin:0 } 82 | .mt0{ margin-top:0 } 83 | .mr0{ margin-right:0 } 84 | .mb0{ margin-bottom:0 } 85 | .ml0{ margin-left:0 } 86 | .mx0{ margin-left:0; margin-right:0 } 87 | .my0{ margin-top:0; margin-bottom:0 } 88 | 89 | .m1{ margin: .5rem } 90 | .mt1{ margin-top: .5rem } 91 | .mr1{ margin-right: .5rem } 92 | .mb1{ margin-bottom: .5rem } 93 | .ml1{ margin-left: .5rem } 94 | .mx1{ margin-left: .5rem; margin-right: .5rem } 95 | .my1{ margin-top: .5rem; margin-bottom: .5rem } 96 | 97 | .m2{ margin: 1rem } 98 | .mt2{ margin-top: 1rem } 99 | .mr2{ margin-right: 1rem } 100 | .mb2{ margin-bottom: 1rem } 101 | .ml2{ margin-left: 1rem } 102 | .mx2{ margin-left: 1rem; margin-right: 1rem } 103 | .my2{ margin-top: 1rem; margin-bottom: 1rem } 104 | 105 | .m3{ margin: 2rem } 106 | .mt3{ margin-top: 2rem } 107 | .mr3{ margin-right: 2rem } 108 | .mb3{ margin-bottom: 2rem } 109 | .ml3{ margin-left: 2rem } 110 | .mx3{ margin-left: 2rem; margin-right: 2rem } 111 | .my3{ margin-top: 2rem; margin-bottom: 2rem } 112 | 113 | .m4{ margin: 4rem } 114 | .mt4{ margin-top: 4rem } 115 | .mr4{ margin-right: 4rem } 116 | .mb4{ margin-bottom: 4rem } 117 | .ml4{ margin-left: 4rem } 118 | .mx4{ margin-left: 4rem; margin-right: 4rem } 119 | .my4{ margin-top: 4rem; margin-bottom: 4rem } 120 | 121 | .mxn1{ margin-left: -.5rem; margin-right: -.5rem; } 122 | .mxn2{ margin-left: -1rem; margin-right: -1rem; } 123 | .mxn3{ margin-left: -2rem; margin-right: -2rem; } 124 | .mxn4{ margin-left: -4rem; margin-right: -4rem; } 125 | 126 | .ml-auto{ margin-left:auto } 127 | .mr-auto{ margin-right:auto } 128 | .mx-auto{ margin-left:auto; margin-right:auto; } 129 | 130 | .p0{ padding:0 } 131 | .pt0{ padding-top:0 } 132 | .pr0{ padding-right:0 } 133 | .pb0{ padding-bottom:0 } 134 | .pl0{ padding-left:0 } 135 | .px0{ padding-left:0; padding-right:0 } 136 | .py0{ padding-top:0; padding-bottom:0 } 137 | 138 | .p1{ padding: .5rem } 139 | .pt1{ padding-top: .5rem } 140 | .pr1{ padding-right: .5rem } 141 | .pb1{ padding-bottom: .5rem } 142 | .pl1{ padding-left: .5rem } 143 | .py1{ padding-top: .5rem; padding-bottom: .5rem } 144 | .px1{ padding-left: .5rem; padding-right: .5rem } 145 | 146 | .p2{ padding: 1rem } 147 | .pt2{ padding-top: 1rem } 148 | .pr2{ padding-right: 1rem } 149 | .pb2{ padding-bottom: 1rem } 150 | .pl2{ padding-left: 1rem } 151 | .py2{ padding-top: 1rem; padding-bottom: 1rem } 152 | .px2{ padding-left: 1rem; padding-right: 1rem } 153 | 154 | .p3{ padding: 2rem } 155 | .pt3{ padding-top: 2rem } 156 | .pr3{ padding-right: 2rem } 157 | .pb3{ padding-bottom: 2rem } 158 | .pl3{ padding-left: 2rem } 159 | .py3{ padding-top: 2rem; padding-bottom: 2rem } 160 | .px3{ padding-left: 2rem; padding-right: 2rem } 161 | 162 | .p4{ padding: 4rem } 163 | .pt4{ padding-top: 4rem } 164 | .pr4{ padding-right: 4rem } 165 | .pb4{ padding-bottom: 4rem } 166 | .pl4{ padding-left: 4rem } 167 | .py4{ padding-top: 4rem; padding-bottom: 4rem } 168 | .px4{ padding-left: 4rem; padding-right: 4rem } 169 | 170 | .col{ 171 | float:left; 172 | box-sizing:border-box; 173 | } 174 | 175 | .col-right{ 176 | float:right; 177 | box-sizing:border-box; 178 | } 179 | 180 | .col-1{ 181 | width:8.33333%; 182 | } 183 | 184 | .col-2{ 185 | width:16.66667%; 186 | } 187 | 188 | .col-3{ 189 | width:25%; 190 | } 191 | 192 | .col-4{ 193 | width:33.33333%; 194 | } 195 | 196 | .col-5{ 197 | width:41.66667%; 198 | } 199 | 200 | .col-6{ 201 | width:50%; 202 | } 203 | 204 | .col-7{ 205 | width:58.33333%; 206 | } 207 | 208 | .col-8{ 209 | width:66.66667%; 210 | } 211 | 212 | .col-9{ 213 | width:75%; 214 | } 215 | 216 | .col-10{ 217 | width:83.33333%; 218 | } 219 | 220 | .col-11{ 221 | width:91.66667%; 222 | } 223 | 224 | .col-12{ 225 | width:100%; 226 | } 227 | @media (min-width: 40em){ 228 | 229 | .sm-col{ 230 | float:left; 231 | box-sizing:border-box; 232 | } 233 | 234 | .sm-col-right{ 235 | float:right; 236 | box-sizing:border-box; 237 | } 238 | 239 | .sm-col-1{ 240 | width:8.33333%; 241 | } 242 | 243 | .sm-col-2{ 244 | width:16.66667%; 245 | } 246 | 247 | .sm-col-3{ 248 | width:25%; 249 | } 250 | 251 | .sm-col-4{ 252 | width:33.33333%; 253 | } 254 | 255 | .sm-col-5{ 256 | width:41.66667%; 257 | } 258 | 259 | .sm-col-6{ 260 | width:50%; 261 | } 262 | 263 | .sm-col-7{ 264 | width:58.33333%; 265 | } 266 | 267 | .sm-col-8{ 268 | width:66.66667%; 269 | } 270 | 271 | .sm-col-9{ 272 | width:75%; 273 | } 274 | 275 | .sm-col-10{ 276 | width:83.33333%; 277 | } 278 | 279 | .sm-col-11{ 280 | width:91.66667%; 281 | } 282 | 283 | .sm-col-12{ 284 | width:100%; 285 | } 286 | 287 | } 288 | @media (min-width: 52em){ 289 | 290 | .md-col{ 291 | float:left; 292 | box-sizing:border-box; 293 | } 294 | 295 | .md-col-right{ 296 | float:right; 297 | box-sizing:border-box; 298 | } 299 | 300 | .md-col-1{ 301 | width:8.33333%; 302 | } 303 | 304 | .md-col-2{ 305 | width:16.66667%; 306 | } 307 | 308 | .md-col-3{ 309 | width:25%; 310 | } 311 | 312 | .md-col-4{ 313 | width:33.33333%; 314 | } 315 | 316 | .md-col-5{ 317 | width:41.66667%; 318 | } 319 | 320 | .md-col-6{ 321 | width:50%; 322 | } 323 | 324 | .md-col-7{ 325 | width:58.33333%; 326 | } 327 | 328 | .md-col-8{ 329 | width:66.66667%; 330 | } 331 | 332 | .md-col-9{ 333 | width:75%; 334 | } 335 | 336 | .md-col-10{ 337 | width:83.33333%; 338 | } 339 | 340 | .md-col-11{ 341 | width:91.66667%; 342 | } 343 | 344 | .md-col-12{ 345 | width:100%; 346 | } 347 | 348 | } 349 | @media (min-width: 64em){ 350 | 351 | .lg-col{ 352 | float:left; 353 | box-sizing:border-box; 354 | } 355 | 356 | .lg-col-right{ 357 | float:right; 358 | box-sizing:border-box; 359 | } 360 | 361 | .lg-col-1{ 362 | width:8.33333%; 363 | } 364 | 365 | .lg-col-2{ 366 | width:16.66667%; 367 | } 368 | 369 | .lg-col-3{ 370 | width:25%; 371 | } 372 | 373 | .lg-col-4{ 374 | width:33.33333%; 375 | } 376 | 377 | .lg-col-5{ 378 | width:41.66667%; 379 | } 380 | 381 | .lg-col-6{ 382 | width:50%; 383 | } 384 | 385 | .lg-col-7{ 386 | width:58.33333%; 387 | } 388 | 389 | .lg-col-8{ 390 | width:66.66667%; 391 | } 392 | 393 | .lg-col-9{ 394 | width:75%; 395 | } 396 | 397 | .lg-col-10{ 398 | width:83.33333%; 399 | } 400 | 401 | .lg-col-11{ 402 | width:91.66667%; 403 | } 404 | 405 | .lg-col-12{ 406 | width:100%; 407 | } 408 | 409 | } 410 | .flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex } 411 | 412 | @media (min-width: 40em){ 413 | .sm-flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex } 414 | } 415 | 416 | @media (min-width: 52em){ 417 | .md-flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex } 418 | } 419 | 420 | @media (min-width: 64em){ 421 | .lg-flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex } 422 | } 423 | 424 | .flex-column{ -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column } 425 | .flex-wrap{ -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap } 426 | 427 | .items-start{ -webkit-box-align:start; -webkit-align-items:flex-start; -ms-flex-align:start; -ms-grid-row-align:flex-start; align-items:flex-start } 428 | .items-end{ -webkit-box-align:end; -webkit-align-items:flex-end; -ms-flex-align:end; -ms-grid-row-align:flex-end; align-items:flex-end } 429 | .items-center{ -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; -ms-grid-row-align:center; align-items:center } 430 | .items-baseline{ -webkit-box-align:baseline; -webkit-align-items:baseline; -ms-flex-align:baseline; -ms-grid-row-align:baseline; align-items:baseline } 431 | .items-stretch{ -webkit-box-align:stretch; -webkit-align-items:stretch; -ms-flex-align:stretch; -ms-grid-row-align:stretch; align-items:stretch } 432 | 433 | .self-start{ -webkit-align-self:flex-start; -ms-flex-item-align:start; align-self:flex-start } 434 | .self-end{ -webkit-align-self:flex-end; -ms-flex-item-align:end; align-self:flex-end } 435 | .self-center{ -webkit-align-self:center; -ms-flex-item-align:center; align-self:center } 436 | .self-baseline{ -webkit-align-self:baseline; -ms-flex-item-align:baseline; align-self:baseline } 437 | .self-stretch{ -webkit-align-self:stretch; -ms-flex-item-align:stretch; align-self:stretch } 438 | 439 | .justify-start{ -webkit-box-pack:start; -webkit-justify-content:flex-start; -ms-flex-pack:start; justify-content:flex-start } 440 | .justify-end{ -webkit-box-pack:end; -webkit-justify-content:flex-end; -ms-flex-pack:end; justify-content:flex-end } 441 | .justify-center{ -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center } 442 | .justify-between{ -webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between } 443 | .justify-around{ -webkit-justify-content:space-around; -ms-flex-pack:distribute; justify-content:space-around } 444 | 445 | .content-start{ -webkit-align-content:flex-start; -ms-flex-line-pack:start; align-content:flex-start } 446 | .content-end{ -webkit-align-content:flex-end; -ms-flex-line-pack:end; align-content:flex-end } 447 | .content-center{ -webkit-align-content:center; -ms-flex-line-pack:center; align-content:center } 448 | .content-between{ -webkit-align-content:space-between; -ms-flex-line-pack:justify; align-content:space-between } 449 | .content-around{ -webkit-align-content:space-around; -ms-flex-line-pack:distribute; align-content:space-around } 450 | .content-stretch{ -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch } 451 | .flex-auto{ 452 | -webkit-box-flex:1; 453 | -webkit-flex:1 1 auto; 454 | -ms-flex:1 1 auto; 455 | flex:1 1 auto; 456 | min-width:0; 457 | min-height:0; 458 | } 459 | .flex-none{ -webkit-box-flex:0; -webkit-flex:none; -ms-flex:none; flex:none } 460 | 461 | .order-0{ -webkit-box-ordinal-group:1; -webkit-order:0; -ms-flex-order:0; order:0 } 462 | .order-1{ -webkit-box-ordinal-group:2; -webkit-order:1; -ms-flex-order:1; order:1 } 463 | .order-2{ -webkit-box-ordinal-group:3; -webkit-order:2; -ms-flex-order:2; order:2 } 464 | .order-3{ -webkit-box-ordinal-group:4; -webkit-order:3; -ms-flex-order:3; order:3 } 465 | .order-last{ -webkit-box-ordinal-group:100000; -webkit-order:99999; -ms-flex-order:99999; order:99999 } 466 | 467 | .relative{ position:relative } 468 | .absolute{ position:absolute } 469 | .fixed{ position:fixed } 470 | 471 | .top-0{ top:0 } 472 | .right-0{ right:0 } 473 | .bottom-0{ bottom:0 } 474 | .left-0{ left:0 } 475 | 476 | .z1{ z-index: 1 } 477 | .z2{ z-index: 2 } 478 | .z3{ z-index: 3 } 479 | .z4{ z-index: 4 } 480 | 481 | .border{ 482 | border-style:solid; 483 | border-width: 1px; 484 | } 485 | 486 | .border-top{ 487 | border-top-style:solid; 488 | border-top-width: 1px; 489 | } 490 | 491 | .border-right{ 492 | border-right-style:solid; 493 | border-right-width: 1px; 494 | } 495 | 496 | .border-bottom{ 497 | border-bottom-style:solid; 498 | border-bottom-width: 1px; 499 | } 500 | 501 | .border-left{ 502 | border-left-style:solid; 503 | border-left-width: 1px; 504 | } 505 | 506 | .border-none{ border:0 } 507 | 508 | .rounded{ border-radius: 3px } 509 | .circle{ border-radius:50% } 510 | 511 | .rounded-top{ border-radius: 3px 3px 0 0 } 512 | .rounded-right{ border-radius: 0 3px 3px 0 } 513 | .rounded-bottom{ border-radius: 0 0 3px 3px } 514 | .rounded-left{ border-radius: 3px 0 0 3px } 515 | 516 | .not-rounded{ border-radius:0 } 517 | 518 | .hide{ 519 | position:absolute !important; 520 | height:1px; 521 | width:1px; 522 | overflow:hidden; 523 | clip:rect(1px, 1px, 1px, 1px); 524 | } 525 | 526 | @media (max-width: 40em){ 527 | .xs-hide{ display:none !important } 528 | } 529 | 530 | @media (min-width: 40em) and (max-width: 52em){ 531 | .sm-hide{ display:none !important } 532 | } 533 | 534 | @media (min-width: 52em) and (max-width: 64em){ 535 | .md-hide{ display:none !important } 536 | } 537 | 538 | @media (min-width: 64em){ 539 | .lg-hide{ display:none !important } 540 | } 541 | 542 | .display-none{ display:none !important } 543 | 544 | -------------------------------------------------------------------------------- /src/p5-matter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * The global object for interacting with matter.js. Has a handful of methods 3 | * for creating physics-aware objects and manipulating the environment. Before 4 | * you go any further, here are a couple of general notes about the library. 5 | * 6 | * Throughout the docs, I will refer to Matter.Body properties. 7 | * These properties are used to configure some more advanced settings for your 8 | * object. You should pass all the properties you want to configure as a 9 | * JavaScript object. The most interesting ones are angle, 10 | * friction, frictionAir, and 11 | * restitution. You can find the full list of properties at 12 | * {@link http://brm.io/matter-js/docs/classes/Body.html#property_angle}. (When 13 | * you create the options Object, do not prefix the properties with 14 | * body., e.g. if I want to set the initial angle to 30 degrees, 15 | * my options would look like { angle: radians(30) }.) 16 | * 17 | * All the positioning is done from the center of the object. Note that this 18 | * differs slightly from p5.js's default system, which interprets the first 19 | * two arguments to rect and text as being the 20 | * top-left corner of the object. The system used by this library is more or 21 | * less equivalent to setting rectMode(CENTER) and 22 | * textAlign(CENTER). Although not technically necessary, it might 23 | * be helpful to set those modes anyway as a reminder. 24 | * 25 | * For those of you coming from matter.js, here are some of the analogues 26 | * between the two libraries. {@link matter.init} calls 27 | * Matter.Engine.create and, depending on the passed argument, 28 | * Matter.Engine.run. {@link matter.makeBall} and 29 | * {@link matter.makeBlock} correspond to 30 | * Matter.Body.circle and Matter.Body.rectangle, 31 | * respectively. There is no direct equivalent to 32 | * {@link matter.makeSign} as far as I am aware. 33 | * {@link matter.connnect} creates a new 34 | * Matter.Constraint and adds it to the world. The gravity 35 | * functions, e.g. {@link matter.changeGravity}, are equivalent to 36 | * manipulating Matter.World#gravity. 37 | * {@link matter.forget} removes a Matter.Body or 38 | * Matter.Constraint from the world, and also removes all 39 | * constraints / bodies connected to it. {@link matter.manualTick} 40 | * calls Matter.Engine.update. {@link matter.mouseInteraction} 41 | * creates a new Matter.Mouse with the appropriate canvas and 42 | * pixelRatio, creates a new Matter.MouseConstraint with the newly 43 | * created mouse, and adds it to the world. 44 | * 45 | * @namespace 46 | * @requires p5.js 47 | * @requires matter.js 48 | * @author Palmer Paul 49 | */ 50 | var matter = (function() { 51 | 'use strict'; 52 | 53 | var engine = null; 54 | var mouseEnabled = []; 55 | 56 | /** 57 | * Set everything up. It is recommended that you call this in the 58 | * setup function of your p5.js sketch. It is not a big deal if 59 | * you forget to do this though, as we will call it for you when you use any 60 | * other method. 61 | * 62 | * @param {boolean} [manual=false] - Stop matter.js from automatically 63 | * updating. If you choose to do this, use {@link matter.manualTick} in 64 | * your draw function. In general, this is a bad idea, but it is 65 | * here in case you need more control. 66 | * 67 | * @alias matter.init 68 | */ 69 | var init = function(manual) { 70 | if (engine === null) { 71 | engine = Matter.Engine.create(); 72 | if (!manual) { 73 | Matter.Engine.run(engine); 74 | } 75 | } 76 | }; 77 | 78 | /** 79 | * Add a physical object to the world. Helper for the make*() functions. 80 | * 81 | * @param {PhysicalObject} physicalObject 82 | * 83 | * @private 84 | */ 85 | var addToWorld = function(physicalObject) { 86 | init(); // create the engine if it doesn't already exist 87 | Matter.World.addBody(engine.world, physicalObject.body); 88 | }; 89 | 90 | /** 91 | * Make a ball with the given parameters. 92 | * 93 | * @param {number} x - The initial x-coordinate measured from the center. 94 | * @param {number} y - The initial y-coordinate measured from the center. 95 | * @param {number} diameter - The diameter of the ball. 96 | * @param {Object} [options] - An object with any Matter.Body 97 | * properties. See the second paragraph of {@link matter}. 98 | * @returns {Ball} 99 | * 100 | * @alias matter.makeBall 101 | */ 102 | var makeBall = function(x, y, diameter, options) { 103 | var ball = new Ball(x, y, diameter, options); 104 | addToWorld(ball); 105 | return ball; 106 | }; 107 | 108 | /** 109 | * Make a block with the given parameters. 110 | * 111 | * @param {number} x - The initial x-coordinate measured from the center. 112 | * @param {number} y - The initial y-coordinate measured from the center. 113 | * @param {number} width - The width of the block. 114 | * @param {number} height - The height of the block. 115 | * @param {Object} [options] - An object with any Matter.Body 116 | * properties. See the second paragraph of {@link matter}. 117 | * @returns {Block} 118 | * 119 | * @alias matter.makeBlock 120 | */ 121 | var makeBlock = function(x, y, width, height, options) { 122 | var block = new Block(x, y, width, height, options); 123 | addToWorld(block); 124 | return block; 125 | }; 126 | 127 | /** 128 | * Make a barrier with the given parameters. Barriers are essentially 129 | * frozen / immovable blocks. Good for making floor, walls, bumpers, etc. 130 | * 131 | * @param {number} x - The initial x-coordinate measured from the center. 132 | * @param {number} y - The initial y-coordinate measured from the center. 133 | * @param {number} width - The width of the barrier. 134 | * @param {number} height - The height of the barrier. 135 | * @param {Object} [options] - An object with any Matter.Body 136 | * properties. See the second paragraph of {@link matter}. 137 | * @returns {Barrier} 138 | * 139 | * @alias matter.makeBarrier 140 | */ 141 | var makeBarrier = function(x, y, width, height, options) { 142 | var barrier = new Block(x, y, width, height, options); 143 | barrier.freeze(); 144 | addToWorld(barrier); 145 | return barrier; 146 | }; 147 | 148 | /** 149 | * Make physics-aware text. The trick is putting a bounding rectangle Block 150 | * around the text. The width and the height of the rectangle are determed 151 | * dynamically at creation time by inspecting the textSize. 152 | * 153 | * @param {string} text - The text to display. 154 | * @param {number} x - The initial x-coordinate measured from the center. 155 | * @param {number} y - The initial y-coordinate measured from the center. 156 | * @param {Object} [options] - An object with any Matter.Body 157 | * properties. See the second paragraph of {@link matter}. 158 | * @returns {Sign} 159 | * 160 | * @alias matter.makeSign 161 | */ 162 | var makeSign = function(text, x, y, options) { 163 | var sign = new Sign(text, x, y, options); 164 | addToWorld(sign); 165 | return sign; 166 | }; 167 | 168 | /** 169 | * Connects two objects so that they move together. By giving some 170 | * options, it can be used to make springs and other elastic objects. 171 | * 172 | * @param {PhysicalObject} physicalObjectA - One of the physical objects to 173 | * connect. 174 | * @param {PhysicalObject} physicalObjectB - The other physical object to 175 | * connect. 176 | * @param {Object} [options] - An object with any 177 | * Matter.Constraint properties 178 | * ({@link http://brm.io/matter-js/docs/classes/Constraint.html#property_bodyA}). 179 | * The most interesting properties are length and 180 | * stiffness, which respectively control the "rest length" and 181 | * elasticity of the spring. 182 | * 183 | * @alias matter.connect 184 | */ 185 | var connect = function(physicalObjectA, physicalObjectB, options) { 186 | options = options || {}; 187 | options.bodyA = physicalObjectA.body; 188 | options.bodyB = physicalObjectB.body; 189 | var constraint = Matter.Constraint.create(options); 190 | 191 | var conn = new Connection(constraint, physicalObjectA, physicalObjectB); 192 | physicalObjectA.connections.push(conn); 193 | physicalObjectB.connections.push(conn); 194 | 195 | init(); // create the engine if it doesn't already exist 196 | Matter.World.addConstraint(engine.world, constraint); 197 | 198 | return conn; 199 | }; 200 | 201 | /** 202 | * Change the gravity to be the default. Alias for 203 | * matter.changeGravity(0, 1). 204 | * 205 | * @alias matter.normalGravity 206 | */ 207 | var normalGravity = function() { 208 | changeGravity(0, 1); 209 | }; 210 | 211 | /** 212 | * Change the gravity to be upside-down. Alias for 213 | * matter.changeGravity(0, -1). 214 | * 215 | * @alias matter.invertedGravity 216 | */ 217 | var invertedGravity = function() { 218 | changeGravity(0, -1); 219 | }; 220 | 221 | /** 222 | * Change the gravity to be zero, i.e. disable gravity. Alias for 223 | * matter.changeGravity(0, 0). 224 | * 225 | * @alias matter.zeroGravity 226 | */ 227 | var zeroGravity = function() { 228 | changeGravity(0, 0); 229 | }; 230 | 231 | /** 232 | * Change the strength and direction of gravity. 233 | * 234 | * @param {number} x - The gravitational acceleration along the x-axis. A 235 | * sensible value is somewhere in the range of [-1.. 1]. 236 | * @param {number} y - The gravitational acceleration along the y-axis. A 237 | * sensible value is somewhere in the range of [-1.. 1]. 238 | * 239 | * @alias matter.changeGravity 240 | */ 241 | var changeGravity = function(x, y) { 242 | init(); // create the engine if it doesn't already exist 243 | engine.world.gravity.x = x; 244 | engine.world.gravity.y = y; 245 | }; 246 | 247 | /** 248 | * Stop tracking a particular object or connection. Even if an object goes 249 | * out of view, calculations will continue to be performed for that object 250 | * unless you call this method. It is important to use this method when you 251 | * are done with an object in order for things to run smoothly. 252 | * 253 | * @param {PhysicalObject|Connection} physicalObjectOrConnection 254 | * 255 | * @alias matter.forget 256 | */ 257 | var forget = function(physicalObjectOrConnection) { 258 | init(); // create the engine if it doesn't already exist 259 | 260 | if (physicalObjectOrConnection === null) { 261 | return; 262 | } 263 | 264 | if (physicalObjectOrConnection.body) { 265 | var physicalObject = physicalObjectOrConnection; 266 | 267 | var connections = physicalObject.connections; 268 | for (var i = connections.length - 1; i >= 0; i--) { 269 | forget(connections[i]); 270 | } 271 | 272 | Matter.World.remove(engine.world, physicalObject.body); 273 | } else if (physicalObjectOrConnection.constraint) { 274 | var connection = physicalObjectOrConnection; 275 | 276 | var physObj = connection.physicalObjectA; 277 | var index = physObj.connections.lastIndexOf(connection); 278 | if (index >= 0) { 279 | physObj.connections.splice(index, 1); 280 | } 281 | 282 | physObj = connection.physicalObjectB; 283 | index = physObj.connections.lastIndexOf(connection); 284 | if (index >= 0) { 285 | physObj.connections.splice(index, 1); 286 | } 287 | 288 | Matter.World.remove(engine.world, connection.constraint); 289 | } 290 | 291 | physicalObjectOrConnection.active = false; 292 | }; 293 | 294 | /** 295 | * Manually trigger an update of the physics engine. You only should be 296 | * using this if you initially passed a value of true to 297 | * {@link matter.init}. 298 | * 299 | * @alias matter.manualTick 300 | */ 301 | var manualTick = function() { 302 | init(true); // create the engine if it doesn't already exist 303 | Matter.Engine.update(engine); 304 | }; 305 | 306 | /** 307 | * Enable mouse interaction for the given canvas. This lets you apply forces 308 | * to physical objects by clicking and dragging on them. 309 | * 310 | * @param {Object} [canvas] - The canvas for which to enable mouse 311 | * interaction. You can get the canvas object for your sketch by storing the 312 | * return value of createCanvas. If not supplied, defaults to 313 | * window.canvas. 314 | * 315 | * @alias matter.mouseInteraction 316 | */ 317 | var mouseInteraction = function(canvas) { 318 | var canvasElt; 319 | 320 | if (canvas && canvas.elt) { 321 | canvasElt = canvas.elt; 322 | } else if (window && window.canvas) { 323 | canvasElt = window.canvas; 324 | } else { 325 | canvasElt = null; 326 | } 327 | 328 | if (canvasElt && !mouseEnabled.includes(canvasElt)) { 329 | var mouse = Matter.Mouse.create(canvasElt); 330 | mouse.pixelRatio = pixelDensity(); 331 | 332 | init(); // create the engine if it doesn't already exist 333 | Matter.World.add(engine.world, 334 | Matter.MouseConstraint.create(engine, { 335 | mouse: mouse 336 | })); 337 | 338 | mouseEnabled.push(canvasElt); 339 | } 340 | }; 341 | 342 | /** 343 | * Represents any object that obeys physics. Serves as the parent class for 344 | * Ball, Block, and Barrier. It basically wraps a matter.js body and provides 345 | * some getters and convenience methods. 346 | * 347 | * PhysicalObject is an abstract class, meaning that it is impossible to 348 | * create instances of it. You do not need to worry about this though. 349 | * 350 | * @param {Matter.Body} body 351 | * @param {number} width 352 | * @param {number} height 353 | * 354 | * @public 355 | * @abstract 356 | * @class 357 | * @author Palmer Paul 358 | */ 359 | var PhysicalObject = function(body, width, height) { 360 | if (this.constructor === PhysicalObject) { 361 | throw new Error("PhysicalObject is an abstract class, " + 362 | "so you can't make instances of it!"); 363 | } 364 | 365 | this.body = body; 366 | this.width = width; 367 | this.height = height; 368 | this.connections = []; 369 | this.active = true; 370 | }; 371 | 372 | /** 373 | * Get the current x-coordinate of the object. 374 | * 375 | * @returns {number} 376 | */ 377 | PhysicalObject.prototype.getPositionX = function() { 378 | return this.body.position.x; 379 | }; 380 | 381 | /** 382 | * Get the current y-coordinate of the object. 383 | * 384 | * @returns {number} 385 | */ 386 | PhysicalObject.prototype.getPositionY = function() { 387 | return this.body.position.y; 388 | }; 389 | 390 | /** 391 | * Set the position of the object along both axes. 392 | * 393 | * @param {number} xPos - The new x-coordinate of the object. 394 | * @param {number} yPos - The new y-coordinate of the object. 395 | */ 396 | PhysicalObject.prototype.setPosition = function(xPos, yPos) { 397 | Matter.Body.setPosition(this.body, { 398 | x: xPos, 399 | y: yPos 400 | }); 401 | }; 402 | 403 | /** 404 | * Set the position of the object only along the x-axis. The position along 405 | * the y-axis is unchanged. 406 | * 407 | * @param {number} xPos - The new x-coordinate of the object. 408 | */ 409 | PhysicalObject.prototype.setPositionX = function(xPos) { 410 | this.setPosition(xPos, this.getPositionY()); 411 | }; 412 | 413 | /** 414 | * Set the position of the object only along the y-axis. The position along 415 | * the x-axis is unchanged. 416 | * 417 | * @param {number} yPos - The new y-coordinate of the object. 418 | */ 419 | PhysicalObject.prototype.setPositionY = function(yPos) { 420 | this.setPosition(this.getPositionX(), yPos); 421 | }; 422 | 423 | /** 424 | * Get the velocity of the object along the x-axis. 425 | * 426 | * @returns {number} 427 | */ 428 | PhysicalObject.prototype.getVelocityX = function() { 429 | return this.body.velocity.x; 430 | }; 431 | 432 | /** 433 | * Get the velocity of the object along the y-axis. 434 | * 435 | * @returns {number} 436 | */ 437 | PhysicalObject.prototype.getVelocityY = function() { 438 | return this.body.velocity.y; 439 | }; 440 | 441 | /** 442 | * Set the velocity of the object along both axes. 443 | * 444 | * @param {number} xVel - The new velocity of the object along the x-axis. 445 | * @param {number} yVel - The new velocity of the object along the y-axis. 446 | */ 447 | PhysicalObject.prototype.setVelocity = function(xVel, yVel) { 448 | Matter.Body.setVelocity(this.body, { 449 | x: xVel, 450 | y: yVel 451 | }); 452 | }; 453 | 454 | /** 455 | * Set the velocity of the object only along the x-axis. The velocity along 456 | * the y-axis is unchanged. 457 | * 458 | * @param {number} xVel - The new velocity of the object along the x-axis. 459 | */ 460 | PhysicalObject.prototype.setVelocityX = function(xVel) { 461 | this.setVelocity(xVel, this.getVelocityY()); 462 | }; 463 | 464 | /** 465 | * Set the velocity of the object only along the y-axis. The velocity along 466 | * the x-axis is unchanged. 467 | * 468 | * @param {number} yVel - The new velocity of the object along the y-axis. 469 | */ 470 | PhysicalObject.prototype.setVelocityY = function(yVel) { 471 | this.setVelocity(this.getVelocityX(), yVel); 472 | }; 473 | 474 | /** 475 | * Get the width of the object. 476 | * 477 | * @returns {number} 478 | */ 479 | PhysicalObject.prototype.getWidth = function() { 480 | return this.width; 481 | }; 482 | 483 | /** 484 | * Get the height of the object. 485 | * 486 | * @returns {number} 487 | */ 488 | PhysicalObject.prototype.getHeight = function() { 489 | return this.height; 490 | }; 491 | 492 | /** 493 | * Get the current angle of the object in radians. 494 | * 495 | * @returns {number} 496 | */ 497 | PhysicalObject.prototype.getAngle = function() { 498 | return this.body.angle; 499 | }; 500 | 501 | /** 502 | * Set the angle of the object in radians. 503 | * 504 | * @param {number} angle - The new angle of the object. 505 | */ 506 | PhysicalObject.prototype.setAngle = function(angle) { 507 | Matter.Body.setAngle(this.body, angle); 508 | }; 509 | 510 | /** 511 | * Check if the object is frozen, i.e. static. 512 | * 513 | * @return {boolean} 514 | */ 515 | PhysicalObject.prototype.isFrozen = function() { 516 | return this.body.isStatic; 517 | }; 518 | 519 | /** 520 | * Freeze the object in place, causing it to stop moving. 521 | */ 522 | PhysicalObject.prototype.freeze = function() { 523 | Matter.Body.setStatic(this.body, true); 524 | }; 525 | 526 | /** 527 | * Unfreeze the object, causing it to start moving again. 528 | */ 529 | PhysicalObject.prototype.unfreeze = function() { 530 | Matter.Body.setStatic(this.body, false); 531 | }; 532 | 533 | /** 534 | * Determine if the object is off the canvas. 535 | * 536 | * @param {number} [bufferZone=0] - Extra room to leave around the edges. 537 | * @returns {boolean} 538 | */ 539 | PhysicalObject.prototype.isOffCanvas = function(bufferZone) { 540 | bufferZone = bufferZone || 0; 541 | 542 | var x = this.getPositionX(); 543 | var y = this.getPositionY(); 544 | var wid = this.getWidth(); 545 | var hgt = this.getHeight(); 546 | 547 | var minX = -(wid + bufferZone); 548 | var minY = -(hgt + bufferZone); 549 | var maxX = width + wid + bufferZone; 550 | var maxY = height + hgt + bufferZone; 551 | 552 | return x < minX || x > maxX || y < minY || y > maxY; 553 | }; 554 | 555 | /** 556 | * Determine if the object is being tracked and updated or if it was 557 | * forgotten (see {@link matter.forget}). 558 | * 559 | * @returns {boolean} 560 | */ 561 | PhysicalObject.prototype.isActive = function() { 562 | return this.active; 563 | }; 564 | 565 | /** 566 | * Draw the object to the screen. Respects the current style settings. Using 567 | * this is optional, feel free to draw the objects however you would like. 568 | * 569 | * @abstract 570 | */ 571 | PhysicalObject.prototype.show = function() { 572 | throw new Error("PhysicalObject.show is an abstract method, " + 573 | "so you can't invoke it!"); 574 | }; 575 | 576 | 577 | /** 578 | * @deprecated since 1.1.0. Renamed to getPositionX. 579 | */ 580 | PhysicalObject.prototype.getX = function() { 581 | return this.body.position.x; 582 | }; 583 | 584 | 585 | /** 586 | * @deprecated since 1.1.0. Renamed to getPositionY. 587 | */ 588 | PhysicalObject.prototype.getY = function() { 589 | return this.body.position.y; 590 | }; 591 | 592 | 593 | /** 594 | * Represents a circle that obeys physics. 595 | * 596 | * The constructor for Ball is private. Use 597 | * {@link matter.makeBall} instead. 598 | * 599 | * @param {number} x - The initial x-coordinate measured from the center. 600 | * @param {number} y - The initial y-coordinate measured from the center. 601 | * @param {number} diameter - The diameter of the ball. 602 | * @param {Object} [options] - An object with any Matter.Body 603 | * properties. See the second paragraph of {@link matter}. 604 | * 605 | * @public 606 | * @class 607 | * @augments PhysicalObject 608 | * @author Palmer Paul 609 | */ 610 | var Ball = function(x, y, diameter, options) { 611 | var body = Matter.Bodies.circle(x, y, diameter / 2, options); 612 | PhysicalObject.call(this, body, diameter, diameter); 613 | }; 614 | Ball.prototype = Object.create(PhysicalObject.prototype); 615 | Ball.prototype.constructor = Ball; 616 | 617 | Ball.prototype.show = function() { 618 | push(); 619 | translate(this.getPositionX(), this.getPositionY()); 620 | rotate(this.getAngle()); 621 | ellipseMode(CENTER); 622 | ellipse(0, 0, this.getWidth(), this.getHeight()); 623 | pop(); 624 | }; 625 | 626 | /** 627 | * Get the diameter of the ball. Alias for 628 | * PhysicalObject#getWidth. 629 | * 630 | * @returns {number} 631 | * @function 632 | */ 633 | Ball.prototype.getDiameter = Ball.prototype.getWidth; 634 | 635 | /** 636 | * Get the radius of the ball. 637 | * 638 | * @returns {number} 639 | */ 640 | Ball.prototype.getRadius = function() { 641 | return this.getDiameter() / 2; 642 | }; 643 | 644 | /** 645 | * Represents a rectangle that obeys physics. 646 | * 647 | * The constructor for Block is private. Use {@link matter.makeBlock} 648 | * instead. 649 | * 650 | * @param {number} x - The initial x-coordinate measured from the center. 651 | * @param {number} y - The initial y-coordinate measured from the center. 652 | * @param {number} width - The width of the block. 653 | * @param {number} height - The height of the block. 654 | * @param {Object} [options] - An object with any Matter.Body 655 | * properties. See the second paragraph of {@link matter}. 656 | * 657 | * @class 658 | * @augments PhysicalObject 659 | * @author Palmer Paul 660 | */ 661 | var Block = function(x, y, width, height, options) { 662 | var body = Matter.Bodies.rectangle(x, y, width, height, options); 663 | PhysicalObject.call(this, body, width, height); 664 | }; 665 | Block.prototype = Object.create(PhysicalObject.prototype); 666 | Block.prototype.constructor = Block; 667 | 668 | Block.prototype.show = function() { 669 | push(); 670 | translate(this.getPositionX(), this.getPositionY()); 671 | rotate(this.getAngle()); 672 | rectMode(CENTER); 673 | rect(0, 0, this.getWidth(), this.getHeight()); 674 | pop(); 675 | }; 676 | 677 | /** 678 | * Represents physics-aware text. 679 | * 680 | * The constructor for Sign is private. Use {@link matter.makeSign} instead. 681 | * 682 | * @param {string} text 683 | * @param {number} x - The initial x-coordinate measured from the center. 684 | * @param {number} y - The initial y-coordinate measured from the center. 685 | * @param {Object} [options] - An object with any Matter.Body 686 | * properties. See the second paragraph of {@link matter}. 687 | * 688 | * @class 689 | * @augments Block 690 | * @author Palmer Paul 691 | */ 692 | var Sign = function(text, x, y, options) { 693 | this.text = text; 694 | Block.call(this, x, y, textWidth(text), textSize(), options); 695 | }; 696 | Sign.prototype = Object.create(Block.prototype); 697 | Sign.prototype.constructor = Sign; 698 | 699 | /** 700 | * Get the text of the sign. 701 | * 702 | * @returns {string} 703 | */ 704 | Sign.prototype.getText = function() { 705 | return this.text; 706 | }; 707 | 708 | Sign.prototype.show = function() { 709 | push(); 710 | translate(this.getPositionX(), 711 | this.getPositionY() + this.getHeight() * 0.25); 712 | rotate(this.getAngle()); 713 | textAlign(CENTER); 714 | text(this.getText(), 0, 0); 715 | pop(); 716 | }; 717 | 718 | 719 | /** 720 | * Represents a connection between two physical objects. 721 | * 722 | * The constructor for Connection is private. Use {@link matter.connect} 723 | * instead. 724 | * 725 | * @param {Matter.Constraint} constraint 726 | * @param {PhysicalObject} physicalObjectA - One of the physical objects to 727 | * connect. 728 | * @param {PhysicalObject} physicalObjectB - The other physical object to 729 | * connect. 730 | * 731 | * @class 732 | * @author Palmer Paul 733 | */ 734 | var Connection = function(constraint, physicalObjectA, physicalObjectB) { 735 | this.constraint = constraint; 736 | this.physicalObjectA = physicalObjectA; 737 | this.physicalObjectB = physicalObjectB; 738 | this.active = true; 739 | }; 740 | 741 | /** 742 | * Determine if the connection is being tracked and updated or if it was 743 | * forgotten (see {@link matter.forget}). 744 | * 745 | * @returns {boolean} 746 | */ 747 | Connection.prototype.isActive = function() { 748 | return this.active; 749 | }; 750 | 751 | /** 752 | * Draw a line between the connected objects. 753 | */ 754 | Connection.prototype.show = function() { 755 | var aX = this.physicalObjectA.getPositionX(); 756 | var aY = this.physicalObjectA.getPositionY(); 757 | if (this.constraint.pointA) { 758 | aX += this.constraint.pointA.x; 759 | aY += this.constraint.pointA.y; 760 | } 761 | 762 | var bX = this.physicalObjectB.getPositionX(); 763 | var bY = this.physicalObjectB.getPositionY(); 764 | if (this.constraint.pointB) { 765 | aX += this.constraint.pointB.x; 766 | aY += this.constraint.pointB.y; 767 | } 768 | 769 | line(aX, aY, bX, bY); 770 | }; 771 | 772 | return { 773 | init: init, 774 | makeBall: makeBall, 775 | makeBlock: makeBlock, 776 | makeBarrier: makeBarrier, 777 | makeSign: makeSign, 778 | connect: connect, 779 | normalGravity: normalGravity, 780 | invertedGravity: invertedGravity, 781 | zeroGravity: zeroGravity, 782 | changeGravity: changeGravity, 783 | forget: forget, 784 | manualTick: manualTick, 785 | mouseInteraction: mouseInteraction 786 | }; 787 | 788 | }()); 789 | -------------------------------------------------------------------------------- /template/lib/p5-matter/1.1.0/p5-matter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * The global object for interacting with matter.js. Has a handful of methods 3 | * for creating physics-aware objects and manipulating the environment. Before 4 | * you go any further, here are a couple of general notes about the library. 5 | * 6 | * Throughout the docs, I will refer to Matter.Body properties. 7 | * These properties are used to configure some more advanced settings for your 8 | * object. You should pass all the properties you want to configure as a 9 | * JavaScript object. The most interesting ones are angle, 10 | * friction, frictionAir, and 11 | * restitution. You can find the full list of properties at 12 | * {@link http://brm.io/matter-js/docs/classes/Body.html#property_angle}. (When 13 | * you create the options Object, do not prefix the properties with 14 | * body., e.g. if I want to set the initial angle to 30 degrees, 15 | * my options would look like { angle: radians(30) }.) 16 | * 17 | * All the positioning is done from the center of the object. Note that this 18 | * differs slightly from p5.js's default system, which interprets the first 19 | * two arguments to rect and text as being the 20 | * top-left corner of the object. The system used by this library is more or 21 | * less equivalent to setting rectMode(CENTER) and 22 | * textAlign(CENTER). Although not technically necessary, it might 23 | * be helpful to set those modes anyway as a reminder. 24 | * 25 | * For those of you coming from matter.js, here are some of the analogues 26 | * between the two libraries. {@link matter.init} calls 27 | * Matter.Engine.create and, depending on the passed argument, 28 | * Matter.Engine.run. {@link matter.makeBall} and 29 | * {@link matter.makeBlock} correspond to 30 | * Matter.Body.circle and Matter.Body.rectangle, 31 | * respectively. There is no direct equivalent to 32 | * {@link matter.makeSign} as far as I am aware. 33 | * {@link matter.connnect} creates a new 34 | * Matter.Constraint and adds it to the world. The gravity 35 | * functions, e.g. {@link matter.changeGravity}, are equivalent to 36 | * manipulating Matter.World#gravity. 37 | * {@link matter.forget} removes a Matter.Body or 38 | * Matter.Constraint from the world, and also removes all 39 | * constraints / bodies connected to it. {@link matter.manualTick} 40 | * calls Matter.Engine.update. {@link matter.mouseInteraction} 41 | * creates a new Matter.Mouse with the appropriate canvas and 42 | * pixelRatio, creates a new Matter.MouseConstraint with the newly 43 | * created mouse, and adds it to the world. 44 | * 45 | * @namespace 46 | * @requires p5.js 47 | * @requires matter.js 48 | * @author Palmer Paul 49 | */ 50 | var matter = (function() { 51 | 'use strict'; 52 | 53 | var engine = null; 54 | var mouseEnabled = []; 55 | 56 | /** 57 | * Set everything up. It is recommended that you call this in the 58 | * setup function of your p5.js sketch. It is not a big deal if 59 | * you forget to do this though, as we will call it for you when you use any 60 | * other method. 61 | * 62 | * @param {boolean} [manual=false] - Stop matter.js from automatically 63 | * updating. If you choose to do this, use {@link matter.manualTick} in 64 | * your draw function. In general, this is a bad idea, but it is 65 | * here in case you need more control. 66 | * 67 | * @alias matter.init 68 | */ 69 | var init = function(manual) { 70 | if (engine === null) { 71 | engine = Matter.Engine.create(); 72 | if (!manual) { 73 | Matter.Engine.run(engine); 74 | } 75 | } 76 | }; 77 | 78 | /** 79 | * Add a physical object to the world. Helper for the make*() functions. 80 | * 81 | * @param {PhysicalObject} physicalObject 82 | * 83 | * @private 84 | */ 85 | var addToWorld = function(physicalObject) { 86 | init(); // create the engine if it doesn't already exist 87 | Matter.World.addBody(engine.world, physicalObject.body); 88 | }; 89 | 90 | /** 91 | * Make a ball with the given parameters. 92 | * 93 | * @param {number} x - The initial x-coordinate measured from the center. 94 | * @param {number} y - The initial y-coordinate measured from the center. 95 | * @param {number} diameter - The diameter of the ball. 96 | * @param {Object} [options] - An object with any Matter.Body 97 | * properties. See the second paragraph of {@link matter}. 98 | * @returns {Ball} 99 | * 100 | * @alias matter.makeBall 101 | */ 102 | var makeBall = function(x, y, diameter, options) { 103 | var ball = new Ball(x, y, diameter, options); 104 | addToWorld(ball); 105 | return ball; 106 | }; 107 | 108 | /** 109 | * Make a block with the given parameters. 110 | * 111 | * @param {number} x - The initial x-coordinate measured from the center. 112 | * @param {number} y - The initial y-coordinate measured from the center. 113 | * @param {number} width - The width of the block. 114 | * @param {number} height - The height of the block. 115 | * @param {Object} [options] - An object with any Matter.Body 116 | * properties. See the second paragraph of {@link matter}. 117 | * @returns {Block} 118 | * 119 | * @alias matter.makeBlock 120 | */ 121 | var makeBlock = function(x, y, width, height, options) { 122 | var block = new Block(x, y, width, height, options); 123 | addToWorld(block); 124 | return block; 125 | }; 126 | 127 | /** 128 | * Make a barrier with the given parameters. Barriers are essentially 129 | * frozen / immovable blocks. Good for making floor, walls, bumpers, etc. 130 | * 131 | * @param {number} x - The initial x-coordinate measured from the center. 132 | * @param {number} y - The initial y-coordinate measured from the center. 133 | * @param {number} width - The width of the barrier. 134 | * @param {number} height - The height of the barrier. 135 | * @param {Object} [options] - An object with any Matter.Body 136 | * properties. See the second paragraph of {@link matter}. 137 | * @returns {Barrier} 138 | * 139 | * @alias matter.makeBarrier 140 | */ 141 | var makeBarrier = function(x, y, width, height, options) { 142 | var barrier = new Block(x, y, width, height, options); 143 | barrier.freeze(); 144 | addToWorld(barrier); 145 | return barrier; 146 | }; 147 | 148 | /** 149 | * Make physics-aware text. The trick is putting a bounding rectangle Block 150 | * around the text. The width and the height of the rectangle are determed 151 | * dynamically at creation time by inspecting the textSize. 152 | * 153 | * @param {string} text - The text to display. 154 | * @param {number} x - The initial x-coordinate measured from the center. 155 | * @param {number} y - The initial y-coordinate measured from the center. 156 | * @param {Object} [options] - An object with any Matter.Body 157 | * properties. See the second paragraph of {@link matter}. 158 | * @returns {Sign} 159 | * 160 | * @alias matter.makeSign 161 | */ 162 | var makeSign = function(text, x, y, options) { 163 | var sign = new Sign(text, x, y, options); 164 | addToWorld(sign); 165 | return sign; 166 | }; 167 | 168 | /** 169 | * Connects two objects so that they move together. By giving some 170 | * options, it can be used to make springs and other elastic objects. 171 | * 172 | * @param {PhysicalObject} physicalObjectA - One of the physical objects to 173 | * connect. 174 | * @param {PhysicalObject} physicalObjectB - The other physical object to 175 | * connect. 176 | * @param {Object} [options] - An object with any 177 | * Matter.Constraint properties 178 | * ({@link http://brm.io/matter-js/docs/classes/Constraint.html#property_bodyA}). 179 | * The most interesting properties are length and 180 | * stiffness, which respectively control the "rest length" and 181 | * elasticity of the spring. 182 | * 183 | * @alias matter.connect 184 | */ 185 | var connect = function(physicalObjectA, physicalObjectB, options) { 186 | options = options || {}; 187 | options.bodyA = physicalObjectA.body; 188 | options.bodyB = physicalObjectB.body; 189 | var constraint = Matter.Constraint.create(options); 190 | 191 | var conn = new Connection(constraint, physicalObjectA, physicalObjectB); 192 | physicalObjectA.connections.push(conn); 193 | physicalObjectB.connections.push(conn); 194 | 195 | init(); // create the engine if it doesn't already exist 196 | Matter.World.addConstraint(engine.world, constraint); 197 | 198 | return conn; 199 | }; 200 | 201 | /** 202 | * Change the gravity to be the default. Alias for 203 | * matter.changeGravity(0, 1). 204 | * 205 | * @alias matter.normalGravity 206 | */ 207 | var normalGravity = function() { 208 | changeGravity(0, 1); 209 | }; 210 | 211 | /** 212 | * Change the gravity to be upside-down. Alias for 213 | * matter.changeGravity(0, -1). 214 | * 215 | * @alias matter.invertedGravity 216 | */ 217 | var invertedGravity = function() { 218 | changeGravity(0, -1); 219 | }; 220 | 221 | /** 222 | * Change the gravity to be zero, i.e. disable gravity. Alias for 223 | * matter.changeGravity(0, 0). 224 | * 225 | * @alias matter.zeroGravity 226 | */ 227 | var zeroGravity = function() { 228 | changeGravity(0, 0); 229 | }; 230 | 231 | /** 232 | * Change the strength and direction of gravity. 233 | * 234 | * @param {number} x - The gravitational acceleration along the x-axis. A 235 | * sensible value is somewhere in the range of [-1.. 1]. 236 | * @param {number} y - The gravitational acceleration along the y-axis. A 237 | * sensible value is somewhere in the range of [-1.. 1]. 238 | * 239 | * @alias matter.changeGravity 240 | */ 241 | var changeGravity = function(x, y) { 242 | init(); // create the engine if it doesn't already exist 243 | engine.world.gravity.x = x; 244 | engine.world.gravity.y = y; 245 | }; 246 | 247 | /** 248 | * Stop tracking a particular object or connection. Even if an object goes 249 | * out of view, calculations will continue to be performed for that object 250 | * unless you call this method. It is important to use this method when you 251 | * are done with an object in order for things to run smoothly. 252 | * 253 | * @param {PhysicalObject|Connection} physicalObjectOrConnection 254 | * 255 | * @alias matter.forget 256 | */ 257 | var forget = function(physicalObjectOrConnection) { 258 | init(); // create the engine if it doesn't already exist 259 | 260 | if (physicalObjectOrConnection === null) { 261 | return; 262 | } 263 | 264 | if (physicalObjectOrConnection.body) { 265 | var physicalObject = physicalObjectOrConnection; 266 | 267 | var connections = physicalObject.connections; 268 | for (var i = connections.length - 1; i >= 0; i--) { 269 | forget(connections[i]); 270 | } 271 | 272 | Matter.World.remove(engine.world, physicalObject.body); 273 | } else if (physicalObjectOrConnection.constraint) { 274 | var connection = physicalObjectOrConnection; 275 | 276 | var physObj = connection.physicalObjectA; 277 | var index = physObj.connections.lastIndexOf(connection); 278 | if (index >= 0) { 279 | physObj.connections.splice(index, 1); 280 | } 281 | 282 | physObj = connection.physicalObjectB; 283 | index = physObj.connections.lastIndexOf(connection); 284 | if (index >= 0) { 285 | physObj.connections.splice(index, 1); 286 | } 287 | 288 | Matter.World.remove(engine.world, connection.constraint); 289 | } 290 | 291 | physicalObjectOrConnection.active = false; 292 | }; 293 | 294 | /** 295 | * Manually trigger an update of the physics engine. You only should be 296 | * using this if you initially passed a value of true to 297 | * {@link matter.init}. 298 | * 299 | * @alias matter.manualTick 300 | */ 301 | var manualTick = function() { 302 | init(true); // create the engine if it doesn't already exist 303 | Matter.Engine.update(engine); 304 | }; 305 | 306 | /** 307 | * Enable mouse interaction for the given canvas. This lets you apply forces 308 | * to physical objects by clicking and dragging on them. 309 | * 310 | * @param {Object} [canvas] - The canvas for which to enable mouse 311 | * interaction. You can get the canvas object for your sketch by storing the 312 | * return value of createCanvas. If not supplied, defaults to 313 | * window.canvas. 314 | * 315 | * @alias matter.mouseInteraction 316 | */ 317 | var mouseInteraction = function(canvas) { 318 | var canvasElt; 319 | 320 | if (canvas && canvas.elt) { 321 | canvasElt = canvas.elt; 322 | } else if (window && window.canvas) { 323 | canvasElt = window.canvas; 324 | } else { 325 | canvasElt = null; 326 | } 327 | 328 | if (canvasElt && !mouseEnabled.includes(canvasElt)) { 329 | var mouse = Matter.Mouse.create(canvasElt); 330 | mouse.pixelRatio = pixelDensity(); 331 | 332 | init(); // create the engine if it doesn't already exist 333 | Matter.World.add(engine.world, 334 | Matter.MouseConstraint.create(engine, { 335 | mouse: mouse 336 | })); 337 | 338 | mouseEnabled.push(canvasElt); 339 | } 340 | }; 341 | 342 | /** 343 | * Represents any object that obeys physics. Serves as the parent class for 344 | * Ball, Block, and Barrier. It basically wraps a matter.js body and provides 345 | * some getters and convenience methods. 346 | * 347 | * PhysicalObject is an abstract class, meaning that it is impossible to 348 | * create instances of it. You do not need to worry about this though. 349 | * 350 | * @param {Matter.Body} body 351 | * @param {number} width 352 | * @param {number} height 353 | * 354 | * @public 355 | * @abstract 356 | * @class 357 | * @author Palmer Paul 358 | */ 359 | var PhysicalObject = function(body, width, height) { 360 | if (this.constructor === PhysicalObject) { 361 | throw new Error("PhysicalObject is an abstract class, " + 362 | "so you can't make instances of it!"); 363 | } 364 | 365 | this.body = body; 366 | this.width = width; 367 | this.height = height; 368 | this.connections = []; 369 | this.active = true; 370 | }; 371 | 372 | /** 373 | * Get the current x-coordinate of the object. 374 | * 375 | * @returns {number} 376 | */ 377 | PhysicalObject.prototype.getPositionX = function() { 378 | return this.body.position.x; 379 | }; 380 | 381 | /** 382 | * Get the current y-coordinate of the object. 383 | * 384 | * @returns {number} 385 | */ 386 | PhysicalObject.prototype.getPositionY = function() { 387 | return this.body.position.y; 388 | }; 389 | 390 | /** 391 | * Set the position of the object along both axes. 392 | * 393 | * @param {number} xPos - The new x-coordinate of the object. 394 | * @param {number} yPos - The new y-coordinate of the object. 395 | */ 396 | PhysicalObject.prototype.setPosition = function(xPos, yPos) { 397 | Matter.Body.setPosition(this.body, { 398 | x: xPos, 399 | y: yPos 400 | }); 401 | }; 402 | 403 | /** 404 | * Set the position of the object only along the x-axis. The position along 405 | * the y-axis is unchanged. 406 | * 407 | * @param {number} xPos - The new x-coordinate of the object. 408 | */ 409 | PhysicalObject.prototype.setPositionX = function(xPos) { 410 | this.setPosition(xPos, this.getPositionY()); 411 | }; 412 | 413 | /** 414 | * Set the position of the object only along the y-axis. The position along 415 | * the x-axis is unchanged. 416 | * 417 | * @param {number} yPos - The new y-coordinate of the object. 418 | */ 419 | PhysicalObject.prototype.setPositionY = function(yPos) { 420 | this.setPosition(this.getPositionX(), yPos); 421 | }; 422 | 423 | /** 424 | * Get the velocity of the object along the x-axis. 425 | * 426 | * @returns {number} 427 | */ 428 | PhysicalObject.prototype.getVelocityX = function() { 429 | return this.body.velocity.x; 430 | }; 431 | 432 | /** 433 | * Get the velocity of the object along the y-axis. 434 | * 435 | * @returns {number} 436 | */ 437 | PhysicalObject.prototype.getVelocityY = function() { 438 | return this.body.velocity.y; 439 | }; 440 | 441 | /** 442 | * Set the velocity of the object along both axes. 443 | * 444 | * @param {number} xVel - The new velocity of the object along the x-axis. 445 | * @param {number} yVel - The new velocity of the object along the y-axis. 446 | */ 447 | PhysicalObject.prototype.setVelocity = function(xVel, yVel) { 448 | Matter.Body.setVelocity(this.body, { 449 | x: xVel, 450 | y: yVel 451 | }); 452 | }; 453 | 454 | /** 455 | * Set the velocity of the object only along the x-axis. The velocity along 456 | * the y-axis is unchanged. 457 | * 458 | * @param {number} xVel - The new velocity of the object along the x-axis. 459 | */ 460 | PhysicalObject.prototype.setVelocityX = function(xVel) { 461 | this.setVelocity(xVel, this.getVelocityY()); 462 | }; 463 | 464 | /** 465 | * Set the velocity of the object only along the y-axis. The velocity along 466 | * the x-axis is unchanged. 467 | * 468 | * @param {number} yVel - The new velocity of the object along the y-axis. 469 | */ 470 | PhysicalObject.prototype.setVelocityY = function(yVel) { 471 | this.setVelocity(this.getVelocityX(), yVel); 472 | }; 473 | 474 | /** 475 | * Get the width of the object. 476 | * 477 | * @returns {number} 478 | */ 479 | PhysicalObject.prototype.getWidth = function() { 480 | return this.width; 481 | }; 482 | 483 | /** 484 | * Get the height of the object. 485 | * 486 | * @returns {number} 487 | */ 488 | PhysicalObject.prototype.getHeight = function() { 489 | return this.height; 490 | }; 491 | 492 | /** 493 | * Get the current angle of the object in radians. 494 | * 495 | * @returns {number} 496 | */ 497 | PhysicalObject.prototype.getAngle = function() { 498 | return this.body.angle; 499 | }; 500 | 501 | /** 502 | * Set the angle of the object in radians. 503 | * 504 | * @param {number} angle - The new angle of the object. 505 | */ 506 | PhysicalObject.prototype.setAngle = function(angle) { 507 | Matter.Body.setAngle(this.body, angle); 508 | }; 509 | 510 | /** 511 | * Check if the object is frozen, i.e. static. 512 | * 513 | * @return {boolean} 514 | */ 515 | PhysicalObject.prototype.isFrozen = function() { 516 | return this.body.isStatic; 517 | }; 518 | 519 | /** 520 | * Freeze the object in place, causing it to stop moving. 521 | */ 522 | PhysicalObject.prototype.freeze = function() { 523 | Matter.Body.setStatic(this.body, true); 524 | }; 525 | 526 | /** 527 | * Unfreeze the object, causing it to start moving again. 528 | */ 529 | PhysicalObject.prototype.unfreeze = function() { 530 | Matter.Body.setStatic(this.body, false); 531 | }; 532 | 533 | /** 534 | * Determine if the object is off the canvas. 535 | * 536 | * @param {number} [bufferZone=0] - Extra room to leave around the edges. 537 | * @returns {boolean} 538 | */ 539 | PhysicalObject.prototype.isOffCanvas = function(bufferZone) { 540 | bufferZone = bufferZone || 0; 541 | 542 | var x = this.getPositionX(); 543 | var y = this.getPositionY(); 544 | var wid = this.getWidth(); 545 | var hgt = this.getHeight(); 546 | 547 | var minX = -(wid + bufferZone); 548 | var minY = -(hgt + bufferZone); 549 | var maxX = width + wid + bufferZone; 550 | var maxY = height + hgt + bufferZone; 551 | 552 | return x < minX || x > maxX || y < minY || y > maxY; 553 | }; 554 | 555 | /** 556 | * Determine if the object is being tracked and updated or if it was 557 | * forgotten (see {@link matter.forget}). 558 | * 559 | * @returns {boolean} 560 | */ 561 | PhysicalObject.prototype.isActive = function() { 562 | return this.active; 563 | }; 564 | 565 | /** 566 | * Draw the object to the screen. Respects the current style settings. Using 567 | * this is optional, feel free to draw the objects however you would like. 568 | * 569 | * @abstract 570 | */ 571 | PhysicalObject.prototype.show = function() { 572 | throw new Error("PhysicalObject.show is an abstract method, " + 573 | "so you can't invoke it!"); 574 | }; 575 | 576 | 577 | /** 578 | * @deprecated since 1.1.0. Renamed to getPositionX. 579 | */ 580 | PhysicalObject.prototype.getX = function() { 581 | return this.body.position.x; 582 | }; 583 | 584 | 585 | /** 586 | * @deprecated since 1.1.0. Renamed to getPositionY. 587 | */ 588 | PhysicalObject.prototype.getY = function() { 589 | return this.body.position.y; 590 | }; 591 | 592 | 593 | /** 594 | * Represents a circle that obeys physics. 595 | * 596 | * The constructor for Ball is private. Use 597 | * {@link matter.makeBall} instead. 598 | * 599 | * @param {number} x - The initial x-coordinate measured from the center. 600 | * @param {number} y - The initial y-coordinate measured from the center. 601 | * @param {number} diameter - The diameter of the ball. 602 | * @param {Object} [options] - An object with any Matter.Body 603 | * properties. See the second paragraph of {@link matter}. 604 | * 605 | * @public 606 | * @class 607 | * @augments PhysicalObject 608 | * @author Palmer Paul 609 | */ 610 | var Ball = function(x, y, diameter, options) { 611 | var body = Matter.Bodies.circle(x, y, diameter / 2, options); 612 | PhysicalObject.call(this, body, diameter, diameter); 613 | }; 614 | Ball.prototype = Object.create(PhysicalObject.prototype); 615 | Ball.prototype.constructor = Ball; 616 | 617 | Ball.prototype.show = function() { 618 | push(); 619 | translate(this.getPositionX(), this.getPositionY()); 620 | rotate(this.getAngle()); 621 | ellipseMode(CENTER); 622 | ellipse(0, 0, this.getWidth(), this.getHeight()); 623 | pop(); 624 | }; 625 | 626 | /** 627 | * Get the diameter of the ball. Alias for 628 | * PhysicalObject#getWidth. 629 | * 630 | * @returns {number} 631 | * @function 632 | */ 633 | Ball.prototype.getDiameter = Ball.prototype.getWidth; 634 | 635 | /** 636 | * Get the radius of the ball. 637 | * 638 | * @returns {number} 639 | */ 640 | Ball.prototype.getRadius = function() { 641 | return this.getDiameter() / 2; 642 | }; 643 | 644 | /** 645 | * Represents a rectangle that obeys physics. 646 | * 647 | * The constructor for Block is private. Use {@link matter.makeBlock} 648 | * instead. 649 | * 650 | * @param {number} x - The initial x-coordinate measured from the center. 651 | * @param {number} y - The initial y-coordinate measured from the center. 652 | * @param {number} width - The width of the block. 653 | * @param {number} height - The height of the block. 654 | * @param {Object} [options] - An object with any Matter.Body 655 | * properties. See the second paragraph of {@link matter}. 656 | * 657 | * @class 658 | * @augments PhysicalObject 659 | * @author Palmer Paul 660 | */ 661 | var Block = function(x, y, width, height, options) { 662 | var body = Matter.Bodies.rectangle(x, y, width, height, options); 663 | PhysicalObject.call(this, body, width, height); 664 | }; 665 | Block.prototype = Object.create(PhysicalObject.prototype); 666 | Block.prototype.constructor = Block; 667 | 668 | Block.prototype.show = function() { 669 | push(); 670 | translate(this.getPositionX(), this.getPositionY()); 671 | rotate(this.getAngle()); 672 | rectMode(CENTER); 673 | rect(0, 0, this.getWidth(), this.getHeight()); 674 | pop(); 675 | }; 676 | 677 | /** 678 | * Represents physics-aware text. 679 | * 680 | * The constructor for Sign is private. Use {@link matter.makeSign} instead. 681 | * 682 | * @param {string} text 683 | * @param {number} x - The initial x-coordinate measured from the center. 684 | * @param {number} y - The initial y-coordinate measured from the center. 685 | * @param {Object} [options] - An object with any Matter.Body 686 | * properties. See the second paragraph of {@link matter}. 687 | * 688 | * @class 689 | * @augments Block 690 | * @author Palmer Paul 691 | */ 692 | var Sign = function(text, x, y, options) { 693 | this.text = text; 694 | Block.call(this, x, y, textWidth(text), textSize(), options); 695 | }; 696 | Sign.prototype = Object.create(Block.prototype); 697 | Sign.prototype.constructor = Sign; 698 | 699 | /** 700 | * Get the text of the sign. 701 | * 702 | * @returns {string} 703 | */ 704 | Sign.prototype.getText = function() { 705 | return this.text; 706 | }; 707 | 708 | Sign.prototype.show = function() { 709 | push(); 710 | translate(this.getPositionX(), 711 | this.getPositionY() + this.getHeight() * 0.25); 712 | rotate(this.getAngle()); 713 | textAlign(CENTER); 714 | text(this.getText(), 0, 0); 715 | pop(); 716 | }; 717 | 718 | 719 | /** 720 | * Represents a connection between two physical objects. 721 | * 722 | * The constructor for Connection is private. Use {@link matter.connect} 723 | * instead. 724 | * 725 | * @param {Matter.Constraint} constraint 726 | * @param {PhysicalObject} physicalObjectA - One of the physical objects to 727 | * connect. 728 | * @param {PhysicalObject} physicalObjectB - The other physical object to 729 | * connect. 730 | * 731 | * @class 732 | * @author Palmer Paul 733 | */ 734 | var Connection = function(constraint, physicalObjectA, physicalObjectB) { 735 | this.constraint = constraint; 736 | this.physicalObjectA = physicalObjectA; 737 | this.physicalObjectB = physicalObjectB; 738 | this.active = true; 739 | }; 740 | 741 | /** 742 | * Determine if the connection is being tracked and updated or if it was 743 | * forgotten (see {@link matter.forget}). 744 | * 745 | * @returns {boolean} 746 | */ 747 | Connection.prototype.isActive = function() { 748 | return this.active; 749 | }; 750 | 751 | /** 752 | * Draw a line between the connected objects. 753 | */ 754 | Connection.prototype.show = function() { 755 | var aX = this.physicalObjectA.getPositionX(); 756 | var aY = this.physicalObjectA.getPositionY(); 757 | if (this.constraint.pointA) { 758 | aX += this.constraint.pointA.x; 759 | aY += this.constraint.pointA.y; 760 | } 761 | 762 | var bX = this.physicalObjectB.getPositionX(); 763 | var bY = this.physicalObjectB.getPositionY(); 764 | if (this.constraint.pointB) { 765 | aX += this.constraint.pointB.x; 766 | aY += this.constraint.pointB.y; 767 | } 768 | 769 | line(aX, aY, bX, bY); 770 | }; 771 | 772 | return { 773 | init: init, 774 | makeBall: makeBall, 775 | makeBlock: makeBlock, 776 | makeBarrier: makeBarrier, 777 | makeSign: makeSign, 778 | connect: connect, 779 | normalGravity: normalGravity, 780 | invertedGravity: invertedGravity, 781 | zeroGravity: zeroGravity, 782 | changeGravity: changeGravity, 783 | forget: forget, 784 | manualTick: manualTick, 785 | mouseInteraction: mouseInteraction 786 | }; 787 | 788 | }()); 789 | --------------------------------------------------------------------------------