2x Rez, Math.floor keeps squares form fringing
{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"javascript"}
var holder = document.getElementById("holder");
var sizeSquares = 100;
var numberSquares = 8;
for (var i = 0; i < numberSquares; i++){
for (var j = 0; j < numberSquares; j++){
var div = document.createElement("div");
div.setAttribute("id","x"+i+"y"+j);
div.style.backgroundColor = "#ccc";
div.style.width = sizeSquares+"px";
div.style.height = sizeSquares+"px";
holder.appendChild(div);
div.style.position = "absolute";
div.style.left = (i*sizeSquares)+"px";
div.style.top = (j*sizeSquares)+"px";
}
}
//document.onmousemove = function (e) {
holder.onmousemove = function (e) {
normX = e.clientX/holder.width;
normY = e.clientY/holder.height;
red = Math.floor(normX * 255);
green = Math.floor(normY * 255);
for (var i = 0; i < numberSquares; i++){
for (var j = 0; j < numberSquares; j++){
var div = document.getElementById("x"+i+"y"+j);
blue = Math.floor(i*128/numberSquares + j*128/numberSquares);
// div.style.backgrounColor = "rgb("+ red +", "+green+","+ blue +")";
div.style.backgroundColor = "rgb("128,0,0)";
}
}
}
<div style="width:100%; height:100%;">
<div id="wrapper" style="position:relative; left:50%; top:50%; width:800px; height:800px;">
<div id="holder" style="position: relative; background-color:#000; left:-400px; top:-400px; width:800px; height:800px; "></div>
</div>
</div>
/**
* 2x Rez, Math.floor keeps squares form fringing
*/
background: #333;
margin:0;
padding:0;
overflow:hidden;