Solve It
In this example we are going to take the idea of making a frame for an image a step further. Instead of just drawing a frame around the outside of the image, we will add a window pane effect by drawing a horizontal line through the middle of the image and three vertical lines that divide the image into 8 equally sized panes. The outside frame will be thicker (15 pixels thick) and the inner frames will be a bit thinner (9 pixels).
To do this, think about dividing the image into regions. One region of interest is the top 15 rows of pixels, which should be colored the frame color. We know a pixel is in that region if it has an x value of less than 15. We can similarly define conditions that tell us if a pixel is in the bottom horizontal strip, leftmost vertical strip, and rightmost vertical strip. If the pixel is in any of these four regions it should get red, green, and blue values of our frame color.
For the middle frame line, we need to calculate 1/2 the height for the middle horizontal line, and 1/4, 1/2, and 3/4 of the width for the vertical lines. We can use if statements similar to the ones we wrote for the outer frame to check if a pixel has an x value within 5 pixels of the vertical pane lines or a y value within 5 pixels of the horizontal pane line. If so, we change the red, green, and blue values to the frame color. If the pixel does not fall on a frame region we copy its original values.
Code It
See It
Available Images
islandSmall.jpg
[320x239]
Drop your images onto the area above to make it available within your code editor on this page. Note: your images will not be uploaded anywhere, they will stay on your computer.
