SimplePixel

For these examples, assume

• pix1 is a pixel at coordinate (100, 200) representing the color Duke blue, with RGBA values of (0, 26, 87, 255)
• pix2 is a pixel at coordinate (300, 400) representing the color white, with RGBA values of (255, 255, 255, 255)

Function name	Description	Example
getX()	returns pixel's x-coordinate within image	pix1.getX() is 100
getY()	returns pixel's y-coordinate within image	pix1.getY() is 200
getRed()	returns pixel's red component (always in range 0-255)	pix1.getRed() is 0
getGreen()	returns pixel's green component (always in range 0-255)	pix1.getGreen() is 26
getBlue()	returns pixel's blue component (always in range 0-255)	pix1.getBlue() is 87
getAlpha()	returns pixel's alpha, or transparency, component (always in range 0-255)	pix1.getAlpha() is 255
setRed(newR)	changes pixel's red component to newR (if newR is not in range of 0-255 it is clamped to be in that range)	pix1.setRed(255) changes color to (255, 26, 87, 255)
setGreen(newG)	changes pixel's green component to newG (if newG is not in range of 0-255 it is clamped to be in that range)	pix1.setGreen(255) changes color to (0, 255, 87, 255)
setBlue(newB)	changes pixel's blue component to newB (if newB is not in range of 0-255 it is clamped to be in that range)	pix1.setBlue(255) changes color to (0, 26, 255, 255)
setAlpha(newA)	changes pixel's alpha, or transparency, component to newA (if newA is not in range of 0-255 it is clamped to be in that range)	pix1.setAlpha(100) changes color to (0, 26, 87, 100)
setAllFrom(otherPixel)	changes the value of all pixel components (its red, green, blue, and alpha) to match otherPixel's values	pix2.setAllFrom(pix1) changes color of pix2 to (0, 26, 87, 255)

SimpleImage

For these examples, assume the variable logo has the value of the image "devil.png" below. It is 100 pixels wide and 85 pixels tall.

Function name	Description	Example
new SimpleImage(filename)	creates SimpleImage to represent image given in filename	new SimpleImage("devil.png") is
new SimpleImage(width, height)	creates SimpleImage whose dimensions are width by height. All pixels in this image are black (0, 0, 0, 255)	new SimpleImage(100, 100) is
new SimpleImage(fileInputElement)	creates SimpleImage to represent image user selected using the fileInputElement in the web page	let input = document.getElementById("fileLoader"); let img = new SimpleImage(input); is assuming user selected that image from their computer
getWidth()	returns image's width	logo.getWidth() is 100
getHeight()	returns image's height	logo.getHeight() is 85
getPixel(x,y)	returns pixel in this image at coordinate (x, y)	logo.getPixel(0, 0) is the pixel (255, 255, 255, 255)
setPixel(x,y,pixel)	copies RGBA values from given pixel into pixel at given (x,y) coordinate	logo.setPixel(50, 42, pix2) changes color to white
setSize(width, height)	resizes image to be width by height. Image is scaled to fit into the new dimensions.	logo.setSize(300, 85) is
forEachPixel(callback)	applies given callback function to each pixel in turn, starting in the upper-left corner and moving down to the lower-right corner	logo.forEachPixel((pixel) => { // modify pixel });
pixels()	returns all pixels in this image, starting in the upper-left corner and moving down to the lower-right corner, providing a way to access each pixel in turn	for (let pixel of logo.pixels()) { // modify pixel }
drawTo(canvas)	draws image to canvas, for drawing images on web pages	let canvas = document.getElementById("canvas"); logo.drawTo(canvas);

What is a Pixel?

Digital images are made of pixels. A pixel is a small point of colored light. When you look at a computer monitor, the image you see is actually made of a grid of these tiny dots of light. They are so small and so close together that it looks like one continuous picture. To get an idea of how small a pixel is, the monitor that I happen to be using as I write this has a resolution of 1440 x 900 (read as "1440 by 900"). That means that there are 1,440 pixels across the top and 900 pixels down one side, for a total of almost 1.3 million pixels.

This is what pixels might look like if they were magnified. This is an example of a 5x4 image because it is 5 pixels wide and 4 pixels tall.

Each pixel has a color value. We need a way to represent colors so that we can tell the computer which color to make each pixel. There are many color representations, but JavaScript uses a scheme called the RGBA color model. Basically, it means that a color is represented by four numbers:

• R (the amount of red light)
• G (the amount of green light)
• B (the amount of blue light) and
• A (called "alpha", this number tells how transparent the color should be)

So each color is represented by these four numbers ("Everything's a number", remember?). Moreover, each of these number slots must have a value between 0 and 255. You may be wondering whether or not only 256 possibilities for each slot is enough to make all the many colors that we might want. If you have 256 possibilities for each of the R, G, and B values, (ignoring the transparency number for now) then the total number of colors available is over 16 million! It is estimated that the human eye can only detect 10 million different colors, so there's no worry that you won't be able to make any color you want.

Since the computer uses light to make a picture, the RGBA model is an additive color model. This means that the more the medium is added, the closer the color gets to white. Contrast this with using paint as a medium. That is a subtractive color model because the more paint you add, the further you get from white. So it should come as no surprise then that a color with R, G, and B values all 0 is black (no light) and a color with R, G, B values all 255 is white (pure light). Think of these numbers as knobs that you can turn up or down. If you turn on the red and blue lights and leave off the green light, you have shades of purple (R = 150, G = 0, B = 150, for example). The more you turn up the light, the higher the number goes and the brighter the color gets. How will you know what values to use for R, G, and B to make the color you want? If you search for "RGB color chart" on the Internet you will find lots of sites with palettes of colors and their corresponding values.

Transparency: Alpha Channel

The last value, called alpha, is also a number whose value must be between 0 and 255. This time the value of the number does not change the color's hue, but rather the transparency of the color. If a pixel has an alpha value of 0, it is completely transparent, or invisible. If it has a value of 255, it is completely opaque. Using this transparency value allows you to have layers of color on the screen, or shapes that can be partially seen through other shapes.

Image Coordinate System

Finally, it is important to be able to distinguish one pixel from another. We do this by referring to each pixel's location on the screen or image. Each pixel gets an X and Y value, where (0,0) is the top left corner of the screen. (This can take some getting used to as it's not the way a Cartesian Plane is drawn in math class!)

The X value refers to how far right the pixel is, and the Y value refers to how far down the pixel is. For my computer monitor, which is 1440 x 900, the top left corner is (0,0), the top right is (1439,0), the bottom left is (0,899), the bottom right is (1439,899), and the middle is (720, 450).

All of the discussion so far has been generic knowledge of a computer representation of images and colors. In other words, the same information would probably apply if you were programming in a language other than JavaScript. The rest of this page gives you details that are specific to JavaScript and the problems you are asked to solve.