Bokeh Background

by Lachlan Arthur

HTML

<canvas id="bokeh"></canvas>
<div id="page">
    <h1>Heading</h1>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text text text text</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</div>

CSS

body {
    color: #fff;
}

#bokeh {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#page {
    position: relative;
    width: 500px;
    background: rgba(255,255,255,.05);
    border-radius: 25px;
    padding: 25px;
    margin: 100px auto;
    box-shadow: inset 0 0 2px rgba(255, 255, 255, .1);
}

JavaScript

var canvas = $("#bokeh")[0];
var ctx = canvas.getContext("2d");

var circles = [];

var max = 100;
var min = 25;

var mouseX = 0;
var mouseY = 0;

for (var i = 0; i < 100; i++) {
    var radius = Math.round((Math.random() * (max-min)) + min);
    var left = Math.random();
    var top = Math.random();
    var colour = "rgba("+
        Math.round(Math.random()*256)+","+
        Math.round(Math.random()*256)+","+
        Math.round(Math.random()*256)+",.1)";
    var time = Math.random() * 360;
    var clockwise = (Math.round(Math.random()) * 2) - 1;
    circles.push({
        x: left,
        y: top,
        r: radius,
        c: colour,
        t: time,
        d: clockwise
    });
}

var rgba = "rgba("+
    Math.round((Math.random()*256)*.3)+","+
    Math.round((Math.random()*256)*.3)+","+
    Math.round((Math.random()*256)*.3)+",1)";
var gradient = "radial-gradient(center top, circle farthest-corner, "+rgba+", black)";
canvas.style.cssText =
    "background: -moz-" + gradient + ";" +
    "background: -webkit-" + gradient + ";" +
    "background: -ms-" + gradient + ";" +
    "background: -o-" + gradient + ";";

function drawBokeh() {
    var x = mouseX;
    var y = mouseY;
    canvas.width = $(window).width();
    canvas.height = $(window).height();
    for (var i = 0; i < circles.length; i++) {
        var circle = circles[i];
        var offsetX = x * (max - circle.r);
        var offsetY = y * (max - circle.r);
        var multiplier = (Math.sqrt(canvas.width*canvas.height)/1000);
        var animX = Math.sin((circle.t/360)*(Math.PI*2)) * circle.r * circle.d;
        var animY = Math.cos((circle.t/360)*(Math.PI*2)) * circle.r;
        circle.t += .1 * multiplier;
        ctx.fillStyle = circle.c;
        ctx.beginPath();
        ctx.arc(circle.x * canvas.width + offsetX + animX, circle.y * canvas.height + offsetY + animY, circle.r * multiplier, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.fill();
    }
    $("#page").css({
        left: ((x *...