Planet Lighting

by djwelsh

HTML

<div id="bg"></div>
<canvas id="c" width="480" height="480"></canvas>

CSS

html, body {
    margin: 0;
    padding: 0;
    background-color: #000;
}
#c {
    position: absolute;
    outline: 1px solid #333;
}
#bg {
    width: 480px;
    height: 480px;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-image:...

JavaScript

/*
Orthographic Lefebvre2 from with seed 1111111
http://topps.diku.dk/torbenm/maps.msp
*/
var ctx = document.getElementById('c').getContext('2d');
var lightsource = {
    x : 0, 
    y : 0,
    dist : 200
};
var planet = {
    x : 240, 
    y : 240,
    rad : 100
};

var angle = Math.PI * 2 * Math.random();

function newframe() {
    
    document.getElementById('bg').style.transform = 'rotate('+(angle*-0.1)+'rad)';
    
    ctx.clearRect(0,0,500,500);
    
    angle += 0.01;
    
    lightsource.x = planet.x + lightsource.dist * Math.cos(angle);
    lightsource.y = planet.y + lightsource.dist * Math.sin(angle);
    
    var radialGradient1 = ctx.createRadialGradient(
        lightsource.x, 
        lightsource.y, 
        200, 
        lightsource.x, 
        lightsource.y, 
        lightsource.dist + planet.rad * 1.0
    );
    radialGradient1.addColorStop(0, 'rgba(0, 0, 0, 0.0)');
    radialGradient1.addColorStop(0.1, 'rgba(0, 0, 0, 0.1)');
    radialGradient1.addColorStop(0.2, 'rgba(0, 0, 0, 0.2)');
    radialGradient1.addColorStop(0.3, 'rgba(0, 0, 0, 0.3)');
    radialGradient1.addColorStop(0.4, 'rgba(0, 0, 0, 0.4)');
    radialGradient1.addColorStop(0.5, 'rgba(0, 0, 0, 0.5)');
    radialGradient1.addColorStop(0.6, 'rgba(0, 0, 0, 0.6)');
    radialGradient1.addColorStop(0.7, 'rgba(0, 0, 0, 0.7)');
    radialGradient1.addColorStop(0.8, 'rgba(0, 0, 0, 0.8)');
    radialGradient1.addColorStop(0.9, 'rgba(0, 0, 0, 0.9)');
    radialGradient1.addColorStop(1.0, 'rgba(0, 0, 0, 1.0)');
    
    ctx.fillStyle = radialGradient1;
    
    ctx.beginPath();
    ctx.arc(planet.x, planet.y, planet.rad, 0, Math.PI * 2, false);
    ctx.closePath();
    
    ctx.strokeStyle = 'rgba(100, 100, 200, '+(0.05)+')';
    
    for (var i = 1; i <= 10; i++) {
        ctx.lineWidth = i;
        ctx.stroke();
    }
    
    ctx.fill();
    
    
    
    ctx.beginPath();
    ctx.arc(lightsource.x, lightsource.y, 10, 0, Math.PI * 2, false);
    ctx.closePath();
    
    ctx.strokeStyle =...