AKIURU

var canvas = document.createElement("canvas");
canvas.setAttribute("id", "background-canvas");
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");

function set_canvas() {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	var ax = 0;
	var ay = 0;
	var bx = canvas.width/2;
	var by = canvas.height/2;
	canvas.corner_distance = Math.sqrt((ax - bx) * (ax - bx) + (ay - by) * (ay - by));
}
window.addEventListener("resize", set_canvas, false);
set_canvas();

document.addEventListener("contextmenu", function(e) {});


var stars = [];

for (var i = 0; i < 333; i++) {
	stars.push({index: i+1, value_a: 3000*(i+1)});
}


setInterval(function () {
    ctx.beginPath();
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.closePath();

	if (canvas.width != window.innerWidth || canvas.height != window.innerHeight) {
		set_canvas();
	}
    
    for (var i = 0; i < stars.length; i++) {
    
    	var x = canvas.width/2;
    	var y = canvas.height/2;
        
        var time_now = Date.now() - (stars[i].index*100);
        
        var angle = Math.floor(time_now / stars[i].value_a);
        var passed_time = (angle - (time_now / stars[i].value_a)) * -1;
        var distance = passed_time * canvas.corner_distance;
        
    	x += Math.cos(angle) * distance;
    	y += Math.sin(angle) * distance;
        
        // Angle kohtia käytetään tässä myös väreinä tähdille.
        var angle2 = Math.floor(time_now / stars[(i<stars.length-1)?i+1:0].value_a);
        var angle3 = Math.floor(time_now / stars[(i+1<stars.length-1)?i+2:1].value_a);
        
        angle = Math.sin(angle) * 255;
        angle2 = Math.sin(angle2) * 255;
        angle3 = Math.sin(angle3) * 255;
        
        var r = Math.round(angle);
        var g = Math.round(angle2);
        var b = Math.round(angle3);
        
        if (r < 0) r *= -1;
        if (g < 0) g *= -1;
        if (b < 0) b *= -1;
        
        if (r < 100) r = 100;
        if (g < 100) g = 100;
        if (b < 100) b = 100;
        
        var star_size = passed_time * 0.5;
        
        ctx.beginPath();
        ctx.fillStyle = `rgba(${r}, 0, 0, 0.5)`;
        ctx.fillRect(x-1, y-1, 10*star_size, 10*star_size);
        ctx.closePath();
        
        ctx.beginPath();
        ctx.fillStyle = `rgba(0, ${g}, 0, 0.5)`;
        ctx.fillRect(x, y, 10*star_size, 10*star_size);
        ctx.closePath();
        
        ctx.beginPath();
        ctx.fillStyle = `rgba(0, 0, ${b}, 0.5)`;
        ctx.fillRect(x+1, y+1, 10*star_size, 10*star_size);
        ctx.closePath();
    }
    
}, 1000 / 60);

var canvas = document.getElementsByClassName("canvas")[0];
var ctx = canvas.getContext("2d");

function set_canvas() {
	canvas.width = canvas.getBoundingClientRect().width;
	canvas.height = canvas.getBoundingClientRect().height;
}
window.addEventListener("resize", set_canvas, false);
set_canvas();



function get_rand_number(min, max) {
	return Math.round(Math.random() * (max - min) + min);
}



var audio_ctx = null;
var counter = 0;
var blue_list = [];
var cursor_position = 0;
var play_index = true;

var test_run = true;
var hits = 0;
var all_done = false;



function play_sound(audio_array) {
    var buf = new Float32Array(audio_array.length);
    for (var i = 0; i < audio_array.length; i++) buf[i] = audio_array[i];

    var buffer = audio_ctx.createBuffer(1, buf.length, audio_ctx.sampleRate);
    buffer.copyToChannel(buf, 0);

    var source = audio_ctx.createBufferSource();
    source.buffer = buffer;
    source.connect(audio_ctx.destination);
    source.start(0);
}



window.AudioContext = window.AudioContext || window.webkitAudioContext;
audio_ctx = new AudioContext();
start_button_clicked = true;

var list_length = 20;
for (var i = 0; i < list_length; i++) {
	var sinewave = [];
	var target_volume = 0.02;
	var volume = 0;
	var seconds = 1.0/30;
	var tone = 120+(50*i);
	
	for (var u = 0; u < audio_ctx.sampleRate * seconds; u++) {
		var sample_freq = audio_ctx.sampleRate / tone;
		
		// Poistaa siniaallon napsahdukset. fade-in alkuun ja fade-out loppuun.
		if (u >= (audio_ctx.sampleRate * seconds)-list_length) {
			volume -= target_volume/list_length;
		} else if (u <= list_length) {
			volume += target_volume/list_length;
		}
		sinewave[u] = Math.sin(u/(sample_freq/(Math.PI*2))) * volume;
	}
	
	blue_list.push({index:i,audio:sinewave});
}

for (var i = 0; i < blue_list.length; i++) {
	do {
		var rand_number = get_rand_number(0, blue_list.length-1);
	} while (rand_number == i);
	
	var t = blue_list[i];
	var y = blue_list[rand_number];
	
	blue_list[i] = y;
	blue_list[rand_number] = t;
}



function funny123() {
	if (cursor_position+1 == blue_list.length) {
    	return;
    }

	var this1 = blue_list[cursor_position];
	var next1 = blue_list[cursor_position+1];

	if (this1.index > next1.index) {
		if (test_run) {
			cursor_position++;
			hits++;
			return;
		}
	
		blue_list[cursor_position] = next1;
		blue_list[cursor_position+1] = this1;
		cursor_position--;
		if (cursor_position < 0) {
			cursor_position = 0;
		}
		return;
	}

	cursor_position++;
}



setInterval(function () {
    ctx.beginPath();
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.closePath();
    
    // Piirretään sininen lista.
    for (var i = 0; i < blue_list.length; i++) {
        ctx.beginPath();
    	ctx.fillStyle = "blue";
    	ctx.fillRect(
			Math.floor((canvas.width/list_length)*i),
			Math.floor(canvas.height-((canvas.height/list_length)*blue_list[i].index)),
			Math.floor((canvas.width/list_length)-2),
			Math.floor((canvas.height/list_length)*blue_list[i].index)
		);
    	ctx.closePath();
    }
    
    // Piirretään kursori kohta.
    ctx.beginPath();
    ctx.fillStyle = (test_run)?"rgba(255,0,0,.5)":"rgba(255,255,255,.5)";
    ctx.fillRect(
		Math.floor((canvas.width/list_length)*cursor_position),
		0,
		Math.floor(canvas.width/list_length),
		canvas.height
	);
    ctx.closePath();
    if (play_index) {
    	play_sound(blue_list[cursor_position].audio);
        play_index = false;
    }

	// Tehdään juttuja.
	if (cursor_position != blue_list.length-1) {
    	if (counter >= 0) {
        	funny123();
            counter = 0;
            play_index = true;
    	}
        counter++;
    } else {
    	if (test_run) {
        	if (hits > 0) {
        		test_run = false;
            	cursor_position = 0;
        	} else {
            	test_run = false;
                all_done = true;
            }
        } else if (!all_done) {
        	test_run = true;
            hits = 0;
            cursor_position = 0;
        }
    }
}, 1000 / 30);