Moving Background

by Luca De Nardi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="container">

</div>

CSS

.colored{
  width: 1.75vw;
  height: 1.75vw;
  float:left;
  transition: 2s all ease-in-out;
}

JavaScript

var array = [];
for(var i = 0; i < 50; i++){
	array.push([]);
	for(var j = 0; j < 50; j++){
  array[i].push('y' + i + 'x' + j);
  	var newEl = $('<div>');
    newEl.attr('id', 'y' + i + 'x' + j);
  	if(j % 50 == 0){
    	newEl.css('clear', 'both');
    }
    newEl.addClass('colored');
    $('#container').append(newEl);
  }
}


var Ylength = array.length;
var Xlength = array[0].length;
var maxLength = Math.max(Xlength, Ylength);
var temp;
var diagonals = [];
for (var k = 0; k <= 2 * (maxLength - 1); ++k) {
    temp = [];
    for (var y = Ylength - 1; y >= 0; --y) {
        var x = k - y;
        if (x >= 0 && x < Xlength) {
            temp.push(array[y][x]);
        }
    }
    if(temp.length > 0) {
			diagonals.push(temp);
    }
}

var palette = ["#F44336", "#E91E63", "#9C27B0", "#673AB7", "#3F51B5", "#2196F3", "#03A9F4", "#00BCD4", "#009688", "#4CAF50", "#8BC34A", "#CDDC39", "#FFEB3B", "#FFC107", "#FF9800", "#FF5722", "#795548", "#9E9E9E", "#607D8B"];
function randomColor(usePalette){
debugger;
	if(usePalette){
  	return palette[Math.floor(Math.random() * palette.length)];
	}else{
  	return '#'+Math.floor(Math.random()*16777215).toString(16);
  }
}

function changeColor(i, color){

	for(var j = 0; j < diagonals[i].length; j++){
  	$('#' + diagonals[i][j]).css('background', color);
  }
  if(i < diagonals.length - 1){
  	setTimeout(function(){ changeColor(i + 1, color) }, 10);
  }else{
  	setTimeout(function(){ changeColor(0, randomColor(false)) }, 5000);
  }
}
changeColor(0, randomColor(false));