lonekorean

<canvas id="bg1"></canvas>
<canvas id="bg2"></canvas>

lonekorean

return Matter.Bodies.polygon(x, y, 6, radius, {
    // same code from before...
};

lonekorean

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

onScrollThrottled() {
    if (!this.scrollTimeout) {
        this.scrollTimeout = setTimeout(this.onScroll.bind(this), this.scrollDelay);
    }
}

lonekorean

window.addEventListener('scroll', this.onScrollThrottled.bind(this));

lonekorean

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

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

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

// wait for DOM to load
window.addEventListener('DOMContentLoaded', () => {
    // start floaty bubbles background
    Object.create(floatyBubbles).init({
        canvasSelector: '#bg'
    });
});

lonekorean

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