Flying memes

I spent part of the last weekend on this experiment that startet with a question: it is possible to convert a video to a stream of CSS properties ? Surprisingly the answer is yes. We can dump each video frame to a canvas and then create a special (and very long) multiple background property (one background for each video row) where each pixel is created using a 1px size gradient.

Here’s the core function of the proof-of-concept I created, this function (render) gets called continuously using the requestAnimFrame function:

self.render = function(){
	self.context.drawImage(self.video.get(0),0,0);
	var fotogramma = self.context.getImageData(0,0,self.width,self.height),
			fotogramma_data = fotogramma.data,
			css_strings = [];

	for(var y=0; y < self.height; y++){
		css_string = exp_prefix + "linear-gradient(left";

		for(var x=0; x < self.width; x++){
			var 	index = (x + y * self.width) * 4,
				red = fotogramma_data[index],
				green = fotogramma_data[index + 1],
				blue = fotogramma_data[index + 2];

			css_string += ",rgb("+red+","+green+","+blue+") "+x+"px"
		}

		css_string += ")";
		css_strings.push(css_string);
	}
	self.container.css("background-image", css_strings.join(","));

	return "{ background-image:" + css_strings.join(",") + "};";
};

I've prepared a working demo you can test and, as usual, the source code is available on github.

Tags: convert, CSS, video