Skip to content

Instantly share code, notes, and snippets.

Avatar

Will Boyd lonekorean

View GitHub Profile
@lonekorean
lonekorean / file.js
Created Jun 10, 2018
Double canvases
View file.js
<canvas id="bg1"></canvas>
<canvas id="bg2"></canvas>
@lonekorean
lonekorean / file.js
Created Jun 10, 2018
Creating hexagons in Matter.js
View file.js
return Matter.Bodies.polygon(x, y, 6, radius, {
// same code from before...
};
@lonekorean
lonekorean / file.js
Created Jun 10, 2018
Function to add velocity to bodies based on scroll speed
View file.js
onScroll() {
this.scrollTimeout = null;
let delta = (this.lastOffset - window.pageYOffset) * this.options.scrollVelocity;
this.bodies.forEach((body) => {
Matter.Body.setVelocity(body, {
x: body.velocity.x + delta * this.randomize(this.options.xVarianceRange),
y: body.velocity.y + delta * this.randomize(this.options.yVarianceRange)
});
});
@lonekorean
lonekorean / file.js
Created Jun 10, 2018
Function to throttle scroll handling
View file.js
onScrollThrottled() {
if (!this.scrollTimeout) {
this.scrollTimeout = setTimeout(this.onScroll.bind(this), this.scrollDelay);
}
}
@lonekorean
lonekorean / file.js
Created Jun 10, 2018
Adding scroll event listener
View file.js
window.addEventListener('scroll', this.onScrollThrottled.bind(this));
@lonekorean
lonekorean / file.js
Created Jun 10, 2018
Function to create bodies
View file.js
createBody(viewportWidth, viewportHeight) {
let x = this.randomize([0, viewportWidth]);
let y = this.randomize([0, viewportHeight]);
let radius = this.randomize(this.options.radiusRange);
let color = this.options.colors[this.bodies.length % this.options.colors.length];
return Matter.Bodies.circle(x, y, radius, {
render: {
fillStyle: color,
opacity: this.options.opacity
@lonekorean
lonekorean / file.js
Created Jun 10, 2018
Loop to create bodies
View file.js
this.bodies = [];
let totalBodies = Math.round(viewportWidth * viewportHeight / this.options.pixelsPerBody);
for (let i = 0; i <= totalBodies; i++) {
let body = this.createBody(viewportWidth, viewportHeight);
this.bodies.push(body);
}
Matter.World.add(this.engine.world, this.bodies);
@lonekorean
lonekorean / file.js
Created Jun 10, 2018
Floaty bubbles Matter.js setup
View file.js
// engine
this.engine = Matter.Engine.create();
this.engine.world.gravity.y = 0;
// render
this.render = Matter.Render.create({
canvas: document.querySelector(this.options.canvasSelector),
engine: this.engine,
options: {
width: viewportWidth,
@lonekorean
lonekorean / file.js
Created Jun 10, 2018
Starting floaty bubbles
View file.js
// wait for DOM to load
window.addEventListener('DOMContentLoaded', () => {
// start floaty bubbles background
Object.create(floatyBubbles).init({
canvasSelector: '#bg'
});
});
@lonekorean
lonekorean / file.js
Last active Jun 10, 2018
Floaty bubbles prototype object
View file.js
let floatyBubbles = {
// customizable options (passed into init function)
options: {
canvasSelector: '', // to find <canvas> in DOM to draw on
radiusRange: [50, 100], // random range of body radii
xVarianceRange: [-0.5, 0.5], // random range of x velocity scaling on bodies
yVarianceRange: [0.5, 1.5], // random range of y velocity scaling on bodies
airFriction: 0.03, // air friction of bodies
opacity: 1, // opacity of bodies
collisions: true, // do bodies collide or pass through