lonekorean

// wait for DOM to load
window.addEventListener('DOMContentLoaded', () => {
    // start first goo blobs background
    Object.create(gooBlobs).init({
        canvasSelector: '#bg1'
    });

    // start second goo blobs background
    Object.create(gooBlobs).init({
        canvasSelector: '#bg2',

lonekorean

#bg1 {
    z-index: -1;
    filter: url('#goo');
}

#bg2 {
    z-index: -2;
    filter: url('#goo') blur(4px);
}

lonekorean

options: {
    canvasSelector: '',             // to find <canvas> in DOM to draw on
    radiusRange: [75, 150],         // random range of body radii
    xVarianceRange: [-1, 1],        // random range of x velocity scaling on bodies
    yVarianceRange: [0.5, 1.5],     // random range of y velocity scaling on bodies
    airFriction: 0.04,              // air friction of bodies
    opacity: 1,                     // opacity of bodies
    collisions: false,              // do bodies collide or pass through
    scrollVelocity: 0.015,          // scaling of scroll delta to velocity applied to bodies
    pixelsPerBody: 50000,           // viewport pixels required for each body added

lonekorean

options: {
    canvasSelector: '',             // to find <canvas> in DOM to draw on
    radiusRange: [30, 60],          // random range of body radii
    xVarianceRange: [0.1, 0.3],     // 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: 0.5,                   // opacity of bodies
    collisions: false,              // do bodies collide or pass through
    scrollVelocity: 0.025,          // scaling of scroll delta to velocity applied to bodies
    pixelsPerBody: 40000,           // viewport pixels required for each body added

lonekorean

// wait for DOM to load
window.addEventListener('DOMContentLoaded', () => {
    // start first hex bokeh background
    Object.create(hexBokeh).init({
        canvasSelector: '#bg1'
    });

    // start second hex bokeh background
    Object.create(hexBokeh).init({
        canvasSelector: '#bg2',

lonekorean

#bg1 {
    z-index: -1;
    filter: blur(1px);
}

#bg2 {
    z-index: -2;
    filter: blur(10px);
}

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);
    }
}