CM2030 Graphics Programming

Average Face

Play Average Face

Continue to supporting documentation

The Brief

The Average Face project was about exploring image editing at the scale of individual image pixels. A set of images was processed with linear interpolation to arrive at the final overall average image. This project was one of four mini projects, which the capstone submission to "CM2030 Graphics Programming" was comprised of.

The experience

The user of this application gets to explore the process of combining images through liner interpolation. This is done by selecting the range, or amount of interpolation done to the final image.

Building Blocks

This application uses 30 images of faces from the set of images generated by AI , to create an average image.

To arrive at the average image, the images are processed through two for loops, which traverse the pixels of the images. A third for loop sums the value of the red, green, and blue color channels of each images related pixel. The resulting values are then divided by the total number of images, giving the new final pixel value for the average image.

									
//traverses the image pixels from top to bottom, left to right
for (var y = 0; y < firstImg.height; y += 1) 
{
	for (var x = 0; x < firstImg.width; x += 1) 
	{
		//calculates the index value of the first color channel for each pixel
		var index = ((firstImg.width*y) + x) * 4;
		//storage variables
		var sumR = 0;
		var sumG = 0;
		var sumB = 0;
		var sumA = 0;
		//sums the color channel values
		for(var i = 0; i < numOfImages;i++)
		{
			sumR += imgs[i].pixels[index];
			sumG += imgs[i].pixels[index + 1];
			sumB += imgs[i].pixels[index + 2];
			sumA += imgs[i].pixels[index + 3];
		}
		//calculates the final pixel value
		sumR = sumR/numOfImages;
		sumG = sumG/numOfImages;
		sumB = sumB/numOfImages;
		sumA = sumA/numOfImages;
	}
}
									
								

For users to be able to select how much averaging is applied to the final image, the pixel value arrived at is passed to a linear interpolation function. This function receives a percentage value between 1 and 0, the original pixel value, and the calculated final pixel value. It then outputs a new value between the two; based off the percentage given.

									
	//interpolates the pixal value between the origional image and the averaged image
	avgImg.pixels[index +0] = lerp(firstImg.pixels[index],sumR,percentage);
	avgImg.pixels[index +1] = lerp(firstImg.pixels[index + 1],sumG,percentage);
	avgImg.pixels[index +2] = lerp(firstImg.pixels[index + 2],sumB,percentage);
	avgImg.pixels[index +3] = lerp(firstImg.pixels[index + 3],sumA,percentage);
									
								

By doing this, users can visualise in real-time the changes occurring that create the final image. As seen in the following images.

0% interpolation

50% interpolation

100% interpolation

The functions required to average the images are computationally costly. Due to this, the draw cycle of the application is restricted to only run when the mouse moves within the blue rectangle. This allows the user to average the image without seriously impacting the function of their machine.

Tech Stack

JavaScript

Core programming language used in desiging this application.

p5.js

JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else.

HTML 5

HTML 5 is the standard markup language for documents designed to be displayed in a web browser.

CSS 3

Style sheet language for describing the presentation of documents written in HTML.

User Interaction

The user of this application can interact with it in two ways, firstly, by pressing the spacebar, they can select a new random image from the set of images as the initial image. Secondly, they can select the interpolation amount applied to the original image, by placing the mouse cursor within the blue rectangle at the bottom of the application. The left side of the rectangle relates to 0% interpolation and the right side is 100%.

Conclusion

This application was a good example of the processes required for image editing, and introduced the idea of using code to create new images procedurally. This project was the second of four worked on as the capstone submission for the mandatory course Graphics Programming.