Functions

  1. Write a JavaScript program that has a function named swapRedGreen with one parameter pixel. This function should swap the red and green values of the pixel. Pick an image, print the image, then apply swapRedGreen to every pixel in the image, and print the new image. The choice of your image is important. For some images you may not notice any change. Think about what type of image you should use for testing your function.

  2. Write a JavaScript program to make an image have more red in it, by adding a given value to the red, making sure it doesn't go over 255. Your program should have a function called moreRed with two parameters, a pixel and a value to increase the red by. Run your program on an image to see it get redder.

  3. Write the complete JavaScript program to put the border around a picture, and include the following functions that are included from the lesson. You should be able to write these functions without looking at the code from the lesson. Be sure to print the image so you can see it and run the program with different border values. a) function setBlack(pixel) - This function has a parameter pixel that represents a single pixel, and returns a pixel that has been changed to be the color black. b) function pixelOnEdge(pixel, image, borderWidth) - This function has three parameters where pixel is a single pixel, image is the complete image, and borderWidth is an integer specifying the thickness of the borders. This function returns true if the pixel's location is within borderWidth of any of the four borders, and thus on the border. Otherwise it returns false.

  4. Now modify the border program to specify two thicknesses, one for the vertical borders and one for the horizontal borders. You should write the two boolean functions shown below. Be sure to print the image and run your program with different border values for the horizontal and vertical edges. a) function pixelOnVerticalEdge(pixel, image, borderWidth) - This function has three parameters where pixel is a single pixel, image is the complete image, and borderWidth is an integer specifying the thickness of the vertical borders. This function returns true if the pixel's location is within borderWidth of any of the two vertical borders, and thus on the border. Otherwise it returns false. b) function pixelOnHorizontalEdge(pixel, image, borderWidth) - This function has three parameters where pixel is a single pixel, image is the complete image, and borderWidth is an integer specifying the thickness of the horizontal borders. This function returns true if the pixel's location is within borderWidth of any of the two horizontal borders, and thus on the border. Otherwise it returns false.

  5. Now modify the program one more time to replace the two functions pixelOnVerticalEdge and pixelOnHorizontalEdge with one function to do the same thing called pixelOnEdgeDifferentThicknesses( ). The parameters are not shown. You should decide on the parameters. Write the function and test it to make sure it works the same as the two functions it replaces, so you can generate pictures with borders that have different thicknesses for the vertical borders vs. the horizontal borders.

Code It

/** program 1 */ print("Program 1"); // The function swaps the red and green values of the pixel function swapRedGreen (pixel){ pix.setRed(pix.getGreen()); pix.setGreen(pix.getRed()); } print("The original image"); var image = new SimpleImage("palm-and-beach.png"); print(image); for(var pix of image.values()){ swapRedGreen(pix); } print("The resulting image"); print(image); /** program 2 */ print("Program 2"); // The function makes an image have more red in it function moreRed (pixel, value){ var currentRed = pix.getRed(); var totalRed = currentRed + value; if(totalRed <= 255){ pix.setRed(totalRed); return true; } else return false; } print("The original image"); var image = new SimpleImage("duke_blue_devil.png"); print(image); for(var pix of image.values()){ var a = moreRed(pix,100); } print("The resulting image"); print(image); /** Program 3 */ print("Program 3"); // The function returns a pixel that has been changed to be the color black function setBlack(pixel){ pixel.setRed(0); pixel.setGreen(0); pixel.setBlue(0); return pixel; } // The function returns true if the pixel's location is within borderWidth of any of the four borders, and thus on the border. Otherwise it returns false. function pixelOnEdge(pixel, image, borderWidth) { var x = pixel.getX(); var y = pixel.getY(); if(x <= borderWidth) {return true;} else if(y <= borderWidth) {return true;} else if(x >= image.getWidth()-borderWidth) {return true;} else if(y >= image.getHeight()-borderWidth) {return true;} else return false; } print("The original image"); var image = new SimpleImage("duke_blue_devil.png"); print(image); for(var pix of image.values()){ if(pixelOnEdge(pix, image, 10)){ setBlack(pix); } } print("The resulting image"); print(image); /** Program 4 */ print("Program 4"); // This function returns true if the pixel's location is within borderWidth of any of the two vertical borders, and thus on the border. Otherwise it returns false. function pixelOnVerticalEdge(pixel, image, borderWidth) { var x = pixel.getX(); if(x <= borderWidth) {return true;} else if(x >= image.getWidth()-borderWidth) {return true;} else return false; } // This function returns true if the pixel’s location is within borderWidth of any of the two horizontal borders, and thus on the border. Otherwise it returns false. function pixelOnHorizontalEdge(pixel, image, borderWidth) { var y = pixel.getY(); if(y <= borderWidth) {return true;} else if(y >= image.getHeight()-borderWidth) {return true;} else return false; } print("The original image"); var image = new SimpleImage("duke_blue_devil.png"); print(image); for(var pix of image.values()){ if(pixelOnVerticalEdge(pix, image, 10)){ setBlack(pix); } else if (pixelOnHorizontalEdge(pix, image, 20)){ setBlack(pix); } else continue; } print("The resulting image"); print(image); /** Program 5 */ print("Program 5"); function pixelOnEdgeDifferentThicknesses(pixel,image,borderWidth1,borderWidth2){ var x=pixel.getX(); var y=pixel.getY(); if (x=image.getWidth()-borderWidth1) return true; if (y=image.getHeight()-borderWidth2) return true; return false; } print("The original image"); var image=new SimpleImage("duke_blue_devil.png"); print(image); for (var pixel of image.values()){ if(pixelOnEdgeDifferentThicknesses(pixel,image,10,20)){ pixel=setBlack(pixel); } } print("The resulting image"); print(image);

See It

 
 

Available Images


chapel.png
[231x308]

dinos.png
[1920x1080]

drewRobert.png
[1920x1080]

drewRobertDinos.png
[1922x1090]

drewRobertOrig.png
[1928x1090]

drewgreen.png
[510x1006]

duke_blue_devil.png
[397x337]

palm-and-beach.png
[960x640]

rodger.png
[315x424]

smallhands.png
[320x226]

smallpanda.png
[270x201]

astrachan.jpg
[240x360]

duvall.jpg
[200x300]

eastereggs.jpg
[615x410]

hilton.jpg
[140x210]

hippieflower.jpg
[5616x3744]

lion.jpg
[1280x960]

nyc-skyline.jpg
[1280x853]

pixabayhands.jpg
[1280x905]

skyline.jpg
[300x300]

smalllion.jpg
[250x188]

smalluniverse.jpg
[256x200]

universe.jpg
[1280x1000]

usain.jpg
[300x300]

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.