Logo Header
Life+ for WebPanOpticAverFaceLiPaSonaria


♦ JavaScript snippet which animates the averaging of dynamic random subset of human face photos ♦
♦ JavaScript-сниппет, анимирующий усреднение случайного подмножества фотографий человеческих лиц ♦
♦ JavaScript-сніппет, який анімує усереднення випадкової підмножини фотографій людських обличь ♦


Get the archive with snippet and collection of faces from Download page. Rename the single .js file to «version-independent» form (say, "averface.js"), and open it in editor.

There are 2 slightly different ways of getting face data into the snippet, and you set the desired one with Averface.byXHRequest variable:

• When it is false, the data is extracted from separate image files, one per face (say, face_1.png, face_2.png, etc.). If this is the case, put the dir with faces somewhere on your site, and change the initial value of Averface.dirPath variable. Adjust filename prefix/extension also, if you like.

• When it is true, data source is a single «raw» file, made with concatenating raw 8-bit face images (each byte represents pixel brightness, pixels are enumerated from top left corner, left-to-right then downward). If you prefer this method, convert face images to raw 8-bit format, concatenate into a single file and specify Averface.rawFilePath.

If everything's on the same filesystem, the path must be relative to the .html file representing the web page where you want the snippet to work. Or, the path may begin with "http://" ("https://") and point to a different domain; make sure that domain is CORS-enabled, though. Hint for DropBox users: replace "www.dropbox.com" with "dl.dropboxusercontent.com" in share-link of the file.

Then insert the script into .html with the following line of code:

<script src="path-to-dir-with-snippet/averface.js" type="text/javascript"></script>

(Please do not get the script from this page, this instance has been «tuned» specifically for this page)


Edit the parameters in the beginning of the .js file to set image dimensions, zoom factor, subset and delta sizes, framerate etc. Again, from now the code is yours to play with.


This snippet uses LFW-a (Labeled Faces in the Wild-a) collection, available at



Copyright © 2014–2018 Sunkware
Style:  NightWinterSea
This site gathers statistics with StatCounter