<script>

var c=document.getElementById("screen").getContext("2d");
var w=window.innerWidth-20;
var h=window.innerHeight-20;
document.getElementById("screen").width=w;
document.getElementById("screen").height=h;

function draw_pixel(x, y, colour) {
    c.fillStyle = colour;
    c.fillRect(x, y, 1, 1);
}

function cirkel(posX, posY, r, colour, speed) {
    s = Math.PI / 10;
    for ($i = 0; $i <= 32; $i++) {
        $x = speed * r * Math.cos(s * $i);
        $y = speed * r * Math.sin(s * $i);
        draw_pixel($x + posX, $y + posY, colour);
    }
}

arr = [];

place=0;
setInterval(function() {
    set_colours();
    arr.push({
        r: 1,
        x: w/2,
	y: place,
        c: 'rgb(' + colour[0] + ',' + colour[1] + ',' + colour[2] + ')',
	s: 1
    });
    arr.push({
        r: 1,
        x: w/2,
        y: h-place,
        c: 'rgb(' + colour[0] + ',' + colour[1] + ',' + colour[2] + ')',
	s: 1
    });
    arr.push({
        r: 1,
        x: w-place,
        y: h/2,
        c: 'rgb(' + colour[0] + ',' + colour[1] + ',' + colour[2] + ')',
	s: 1
    });
    arr.push({
        r: 1,
        x: place,
        y: place,
        c: 'rgb(' + colour[0] + ',' + colour[1] + ',' + colour[2] + ')',
	s: 1
    });
    arr.push({
        r: 1,
        x: w-place,
	y: place,
        c: 'rgb(' + colour[0] + ',' + colour[1] + ',' + colour[2] + ')',
	s: 1
    });
    arr.push({
        r: 1,
        x: place,
        y: h-place,
        c: 'rgb(' + colour[0] + ',' + colour[1] + ',' + colour[2] + ')',
	s: 1
    });
    arr.push({
        r: 1,
        x: w-place,
        y: h-place,
        c: 'rgb(' + colour[0] + ',' + colour[1] + ',' + colour[2] + ')',
	s: 1
    });
    arr.push({
        r: 1,
        x: place,
        y: h/2,
        c: 'rgb(' + colour[0] + ',' + colour[1] + ',' + colour[2] + ')',
	s: 1
    });
    place+=5;
    place=place%w;
}, 100);
    

setInterval(function() {
    c.fillStyle = '#000';
    c.fillRect(0, 0, w, h);
    for (i = 0; i < arr.length; i++) {
        cirkel(arr[i].x, arr[i].y, arr[i].r, arr[i].c, arr[i].s)
        arr[i].r++;
        if (arr[i].r > 25) {
            arr.splice(i, 1);
        }
    }
}, 50);

colour = [0, 80, 160];
function set_colours() {
    for (i = 0; i < 3; i++) {
	colour[i]+=12;
	colour[i]=colour[i]%255;
    }
}


function add(event) {
    set_colours();
    arr.push({
        r: 1,
        x: event.clientX,
        y: event.clientY,
        c: 'rgb(' + colour[0] + ',' + colour[1] + ',' + colour[2] + ')',
	s: 1
    });
}
//window.addEventListener('mousemove', add);
</script>