sun rays

by Nick Hulea

HTML

<canvas id="canvas"></canvas>

CSS

html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            border: 0;
            overflow: hidden;
            /*  Disable scrollbars */
            display: block;
            /* No floating content on sides */
        }
        video {
            position: relative;
            width: 689px;
            height: 405px;
        }
        canvas {
            z-index: -1;
            position: absolute;
            top: 0;
            left: 0;
        }
        #out {
            z-index: 1;
            height: 50%;
            width: 50%;
            max-width: 689px;
            min-width: 689px;
            min-height: 405px;
            max-height: 405px;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
        @font-face {
            font-family:'helveticaCndBld';
            src: url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/hcb/helveticaneueltcom-bdcn.eot?#iefix') format('embedded-opentype'), url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/hcb/helveticaneueltcom-bdcn.woff') format('woff'), url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/hcb/helveticaneueltcom-bdcn.ttf') format('truetype'), url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/hcb/helveticaneueltcom-bdcn.svg#svgFontName') format('svg');
        }
        @font-face {
            font-family:'TrajanPro3Bold';
            src: url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/as_font_bold/trajanpro3-bold.eot');
            src: url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/as_font_bold/trajanpro3-bold.eot') format('embedded-opentype'),...

JavaScript

var W = window.innerWidth;
var H = window.innerHeight;

var offset = 0;

var canvas = document.getElementById('canvas');
canvas.width = W;
canvas.height = H;
var context = canvas.getContext('2d');
context.fillStyle = 'rgba(232, 222, 113, 0.5)';


var getXY = function (x, y, d, a) {
    return {
        x: x + d * Math.cos(a),
        y: y + d * Math.sin(a)
    };
};

var drawRays = function () {
    c = canvas;
    context.clearRect(0, 0, c.width, c.height);
    length = Math.max(c.width, c.height);
    midx = c.width / 2, midy = c.height / 2;
    
    var d = 16;
    for (i = 0; i < d; i++) {
        context.beginPath();
        angle = (Math.PI * 2 / d) * i + offset;
        context.moveTo(midx, midy);
        c1 = getXY(midx, midy, length, angle + d / 100);
        context.lineTo(c1.x, c1.y);
        c2 = getXY(midx, midy, length, angle - d / 100);
        context.lineTo(c2.x, c2.y);
        context.lineTo(midx, midy);
        context.fill();
    }
    
    context.beginPath();
    context.arc(midx, midy, c.width * c.height / 2E5,
    0, Math.PI * 2, true);
    context.closePath();
    context.fill();
};

var update = function () {
    requestAnimationFrame(update);
    offset += 0.005;
    drawRays();
};

drawRays();

//rays.init('canvas', '#e8de71', '#f4ea77');
requestAnimationFrame(update);