Enlarging an Image

Solve It

In this problem we want to create an image that is a copy of the original image, but is twice as wide and twice as high. We begin by creating the new blank image with the new dimensions. Then we need to set the red, green, and blue values of each of the new pixels so that the overall image of the new picture is the same as the original picture.

Consider, for example, enlarging a picture with dimensions 100 by 100 pixels. The new picture will be 200 by 200 pixels. What about the pixel at point (0,100) in the new picture? That pixel is on the leftmost edge, halfway down. Its corresponding pixel in the old picture is also on the leftmost edge, halfway down. In the original 100 by 100 picture that point would be (0, 50). Further examples confirm this pattern, that to find the corresponding pixel in the original image we divide both the x and y values by 2.

Code It

//I started with the image I wanted (inImage) var inImage = new SimpleImage("chapel.png"); //I made a blank image (outImage), twice as wide+tall var outImage = new SimpleImage(inImage.getWidth() *2, inImage.getHeight() *2); //for each pixel in outImage for (var pixel of outImage.values()) { // computed x = floor(pixel's x /2) var x = Math.floor(pixel.getX() / 2); // computed y = floor(pixel's x /2) var y = Math.floor(pixel.getY() / 2); //set to the same color as the pixel at (x,y) inImage var inPixel = inImage.getPixel(x,y); pixel.setRed(inPixel.getRed()); pixel.setGreen(inPixel.getGreen()); pixel.setBlue(inPixel.getBlue()); } print(outImage);

See It

 
 

Available Images


chapel.png
[231x308]

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.