cool svg animation

puddle.svg

<svg style="position:fixed;top:0;left:0;width:100%;height:100%;" version="1.1" id="backgroundSVG" xmlns="http://www.w3.org/2000/svg">
	<script type="text/javascript">
		<![CDATA[
			function setColor(domElement) {
				domElement.setAttribute("fill", "rgb(" + Math.floor(Math.random()*brightness) + "," + Math.floor(Math.random()*brightness) + "," + Math.floor(Math.random()*brightness) + ")");
			}
			// ^ starts something similar to an XML comment
			var brightness = 255;
			var resolution = 30;
			var resolutionSize = Math.floor((100/resolution)*10)/10;
			//generate stuff
			var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
			rect.setAttribute("width", resolutionSize + 0.1 + "%");
			rect.setAttribute("height", resolutionSize + 0.1 + "%");
			rect.setAttribute("x", "0");
			rect.setAttribute("y", "0");
			rect.setAttribute("fill", "rgb(0,0,0)");
			rect.setAttribute("id", "pixel0-0");
			rect.setAttribute("onmousemove", 'setColor(this)');
			document.getElementById("backgroundSVG").appendChild(rect);
			for (var y = 0; y < resolution; y++) {
				for (var x = 0; x < resolution; x++) {
					if (y == 0 && x == 0) {
						continue;
					}
					var newRect = rect.cloneNode();
					newRect.setAttribute("x", (x * resolutionSize) + "%");
					newRect.setAttribute("y", (y * resolutionSize) + "%");
					newRect.setAttribute("fill", "rgb(0,0,0)");
					rect.setAttribute("id", "pixel" + x + "-" + y);
					document.getElementById("backgroundSVG").appendChild(newRect);
				}
			}

			function getColorsFromRGBString(str) {
				return str.substr(4, str.length - 5).split(/,\s*/).map(Number);
			}

			function lerp(v0, v1, t) {
				return v0 + t*(v1-v0);
			}

			function getPixelFromCoord(x, y) {
				return document.getElementById("pixel" + x + "-" + y);
			}

			setInterval(function() {
				//add the droplets
				for (var y = 0; y < resolution; y++) {
						for (var x = 0; x < resolution; x++) {
						if (Math.random() > 0.99) { //10% chance to change colors
							setColor(getPixelFromCoord(x, y));
						}
					}
				}
				//initilize pixelArray to [[]*resolution], always square
				var pixelArray = [];
				for (var n = 0; n < resolution; n++) {
					pixelArray[n] = [];
				}
				//copy screen to pixelArray
				for (var y = 0; y < resolution; y++) {
					for (var x = 0; x < resolution; x++) {
						pixelArray[y][x] = getPixelFromCoord(x, y).getAttribute("fill");
					}
				}
				//modify pixelArray in place, using data from screen
				for (var pixelY = 0; pixelY < resolution; pixelY++) {
					for (var pixelX = 0; pixelX < resolution; pixelX++) {
						var colorsToAverage = []
						//var currentPixelRGB = getColorsFromRGBString(rects[n].getAttribute("fill"));
						//average the neighboring colors
						//collect the neighboring colors, replacing out of bounds with 0
						colorsToAverage.push((pixelX + 1 >= resolution) ? [0,0,0] : getColorsFromRGBString(getPixelFromCoord(pixelX + 1, pixelY).getAttribute("fill")));
						colorsToAverage.push((pixelX - 1 < 0) ? [0,0,0] : getColorsFromRGBString(getPixelFromCoord(pixelX - 1, pixelY).getAttribute("fill")));
						colorsToAverage.push((pixelY + 1 >= resolution) ? [0,0,0] : getColorsFromRGBString(getPixelFromCoord(pixelX, pixelY + 1).getAttribute("fill")));
						colorsToAverage.push((pixelY - 1 < 0) ? [0,0,0] : getColorsFromRGBString(getPixelFromCoord(pixelX, pixelY - 1).getAttribute("fill")));
						//add the neighboring colors
						var averageColorSum = [0,0,0];
						for (var colorN = 0; colorN < colorsToAverage.length; colorN++) {
							averageColorSum[0] += colorsToAverage[colorN][0];
							averageColorSum[1] += colorsToAverage[colorN][1];
							averageColorSum[2] += colorsToAverage[colorN][2];
						}
						//finally, average the neighboring color into 1 rgb value
						var averageColor = [Math.floor(averageColorSum[0] / 4), Math.floor(averageColorSum[1] / 4), Math.floor(averageColorSum[2] / 4)];
						//rects[n].setAttribute("fill", neighboringColor);
						//lerp the average color with the pixel color
						//var finalPixelColor = [Math.floor(lerp(currentPixelRGB[0], averageColor[0], 0.01)), Math.floor(lerp(currentPixelRGB[1], averageColor[1], 0.01)), Math.floor(lerp(currentPixelRGB[2], averageColor[2], 0.01))];
						//copy current pixel color to screen
						document.getElementById("pixel" + pixelX + "-" + pixelY).setAttribute("fill", "rgb(" + averageColor[0] + ", " + averageColor[1] + ", " + averageColor[2] + ")");
					}
				}
			}, 100);
		]]>
	</script>
</svg>