Programming and the Web for Beginners

JavaScript Basics

Write a JavaScript program to set a colorful picture to black and white.

var image = new SimpleImage("duke_blue_devil.png");
for (var pixel of image.values()) {
    var avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue()) / 3
    pixel.setRed(avg);
    pixel.setGreen(avg);
    pixel.setBlue(avg);
}

Conditional Execution

Write a JavaScript program to modify an image to put three vertical stripes on an image—red on the left one third, green in the middle, and blue on the right one third. For example, if your program ran on Drew’s picture shown on the left, the resulting image would have a red, green and blue vertical stripe as shown in the image on the right.

var image = new SimpleImage("duke_blue_devil.png");
for (var pixel of image.values()) {
    var width = image.getWidth();
    var x = pixel.getX();
    if (x < width / 3) {
        pixel.setRed(255);
    }
    else if (x < width * 2 / 3) {
        pixel.setGreen(255);
    }
    else {
        pixel.setBlue(255);
    }
}

Thinking Critically about Your Program

Write a program to draw a red square that is 200 pixels by 200 pixels with this black edge that is 20 pixels wide in the middle and has two diagonal corners (imagine that if the diagonal lines kept going, they would meet in the center of the diagram).

var image = new SimpleImage(200, 200);
for (var pixel of image.values()) {
    var x = pixel.getX();
    var y = pixel.getY();
    if (x < 20 && x < y && x + y < 200) {
        pixel.setBlue(0);
        pixel.setGreen(0);
        pixel.setRed(0);
    }
    else {
        pixel.setRed(255);
    }
}

Learning to Program in JavaScript

Write a program to draw a square 200 pixels by 200 pixels that looks like this square with colors red (red value 255), green (green value 255), blue (blue value 255) and magenta (red value 255 and blue value 255). All other RGB values are set to 0.

var image = new SimpleImage(200, 200);
for (var pixel of image.values()) {
    var width = image.getWidth();
    var height = image.getHeight(); 
    var x = pixel.getX();
    var y = pixel.getY();
    if (x < width / 2 && y < height / 2) {
        pixel.setRed(255);
    }
    else if (y < height / 2) {
        pixel.setGreen(255); 
    }
    else if (x < width / 2) {
        pixel.setRed(255);
        pixel.setBlue(255);
    }
    else {
        pixel.setBlue(255);
    }
}

Write a program to draw a square 200 pixels by 200 pixels that looks like the square below with colors red (red value 255), green (green value 255), and blue (blue value 255). All other RGB values are set to 0.

var image = new SimpleImage(200, 200);
for (var pixel of image.values()) {
    var height = image.getHeight();
    var width = image.getWidth();
    var x = pixel.getX();
    var y = pixel.getY();
    if (y > height * 2 / 3) {
        pixel.setBlue(255);
    }
    else if (x > width / 3 && y > height / 3) {
        pixel.setGreen(255);
    }
    else {
        pixel.setRed(255);
    }
}

Solving the Green Screen Problem

Write a program to put the image on green screen to another background image.

var fgImage = new SimpleImage("frontimage.png");
var bgImage = new SimpleImage("backimage.png");
var output = new SimpleImage(fgImage.getWidth(), fgImage.getHeight());
for (var pixel of fgImage.values()) {
    var x = fgImage.getX();
    var y = fgImage.getY();
    var bgPixel = bgPixel.getPixel(x, y); 
    if (fgImage.getGreen() > fgImage.getRed() + fgImage.getBlue()) {
        output.setPixel(x, y, bgPixel);
    }
    else {
        output.setPixel(x, y, pixel);
    }
}

Functions

Write a JavaScript program that has a function named swapRedGreenwith one parameter, a pixel. This function should swap the red and green values of the pixel. Pick an image, print the image, then apply the swapRedGreento 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.

function swapRedGreen(pixel) {
    var tmp = pixel.getRed();
    pixel.setRed(pixel.getGreen());
    pixel.setGreen(tmp);
}

var image = new SimpleImage("hippieflower.jpg");
print(image);
for (pixel of image.values()) {
    swapRedGreen(pixel);
}
print(image);

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.

function moreRed(pixel, increaseRed = 50) {
    var redValue = pixel.getRed() + increaseRed;
    if (redValue > 255) {
        pixel.setRed(255);
    }
    else {
        pixel.setRed(redValue);
    }
}

var image = new SimpleImage("skyline.jpg");
for (var pixel of image.values()) {
    moreRed(pixel);
}
print(image)

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 pixelthat 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 pixelis a single pixel, imageis the complete image, and borderWidthis an integer specifying the thickness of the borders. This function returns true if the pixel’s location is within borderWidthof any of the four borders, and thus on the border. Otherwise it returns false.

function setBlack(pixel) {
    pixel.setRed(0);
    pixel.setGreen(0);
    pixel.setBlue(0);
    return pixel;
}

function pixelOnEdge(pixel, image, borderWidth = 10) {
    var x = pixel.getX();
    var y = pixel.getY();
    var width = image.getWidth();
    var height = image.getHeight();
    if (x < borderWidth || x > width - borderWidth || y < borderWidth || y > height - borderWidth) {
    return true;
    }
    return false;
}

var image = new SimpleImage("skyline.png");
for (pixel of image.values()) {
    if (pixelOnEdge(pixel, image)) {
        setBlack(pixel);
    }
}

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 pixelis a single pixel, imageis the complete image, and borderWidthis an integer specifying the thickness of the vertical borders. This function returns true if the pixel’s location is within borderWidthof 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 pixelis a single pixel, imageis the complete image, and borderWidthis an integer specifying the thickness of the horizontal borders. This function returns true if the pixel’s location is within Programming and the Web for Beginners borderWidthof any of the two horizontal borders, and thus on the border. Otherwise it returns false.

function setBlack(pixel) {
    pixel.setRed(0);
    pixel.setGreen(0);
    pixel.setBlue(0);
    return pixel;
}

function pixelOnVerticalEdge(pixel, image, borderWidth = 10) {
    var x = pixel.getX();
    var width = image.getWidth();
    if (x < borderWidth || x > width - borderWidth) {
        return true;
    }
    else {
        return false;
    }
}

function pixelOnHorizontalEdge(pixel, image, borderEdge = 50) {
    var y = pixel.getY();
    var height = image.getHeight();
    if (y < borderWidth || y > height - borderWidth) {
        return true;
    }
    else {
        return false;
    }
}

var image = new SimpleImage("skyline.jpg");
for (var pixel of image.values()) {
    if (pixelOnVerticalEdge(pixel, image) || pixelOnHorizontalEdge(pixel, image)) {
        setBlack(pixel);
    }
}
print(image);

Now modify the program one more time to replace the two functions pixelOnVerticalEdgeand pixelOnHorizontalEdgewith 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.

function setBlack(pixel) {
    pixel.setRed(0);
    pixel.setGreen(0);
    pixel.setBlue(0);
    return pixel;
}

function pixelOnEdgeDifferentThicknesses(pixel, image, verticalBorderWidth = 10, horizontalBorderWidth = 50) {
    var x = pixel.getX();
    var y = pixel.getY();
    var width = image.getWidth();
    var height = image.getHeight();
    if (x < verticalBorderWidth || x > width - verticalBorderWidth || y < horizontalBorderWidth || y > height - horizontalBorderWidth) {
        return true;
    }
    else {
        return false;
    }
}

var image = new SimpleImage("skyline.jpg");
for (var pixel of image.values()) {
    if (pixelOnEdgeDifferentThicknesses(pixel, image)) {
        setBlack(pixel);
    }
}
print(image);

Steganography

For each pixel in the start image, replace each of its red, green, and blue values with the cleared pixel value (keep the 4 leftmost digits the same, replace the 4 rightmost with 0s). This is what the line start = chop2hide(start) does. The code for the chop2hide() function is shown earlier in the video.

For each pixel in the hide image, replace each of its red, green, and blue values by moving the 4 leftmost digits to the right and replacing the 4 leftmost digits with 0s. This is what the line hide = shift(hide) does. The code for the shift() function is shown earlier in the video.

Calculate the pixel RGB values in the final image by adding the values of the pixels in the modified start and modified hide images. This is what the line var stego = combine(start,hide) does. The combine() function has not been shown in the video because you will write that for an assignment.

function clearPixel(pixel) {

    pixel.setRed(Math.floor(pixel.getRed() / 16) * 16);
    pixel.setGreen(Math.floor(pixel.getGreen() / 16) * 16);
    pixel.setBlue(Math.floor(pixel.getBlue() / 16) * 16);

    return pixel;
}

function chopStart(image) {

    for (var pixel of image.values()) {
        clearPixel(pixel);
    }

    return image;
}

function chopHide(image) {

    for (var pixel of image.values()) {
        pixel.setRed(pixel.getRed() % 16);
        pixel.setGreen(pixel.getGreen() % 16);
        pixel.setBlue(pixel.getBlue() % 16);
    }

    return image;
}

function combine(start, hide) {

    var output = new SimpleImage(start.getWidth(), start.getHeight());
    for (var pixel of output.values) {
        var x = pixel.getX();
        var y = pixel.getY();
        var startPixel = start.getPixel(x, y);
        var hidePixel = hide.getPixel(x, y);
        pixel.setRed(startPixel.getRed() + hidePixel.getRed());
        pixel.setGreen(startPixel.getGreen() + hidePixel.getGreen());
        pixel.setBlue(startPixel.getBlue() + hidePixel.getBlue());
    }

    return output;
}

var start = new SimpleImage("usain.png");
var hide = new SimpleImage("skyline.jpg");
start = chopStart(start);
hide = chopHide(hide);
var output = combine(start, hide);
print(output);

Now decrypt it.

function findValue(image) {
    for (var pixel of image.values()) {
        red = pixel.getRed() % 16;
        green = pixel.getGreen() % 16;
        blue = pixel.getBlue() % 16;
        pixel.setRed(red * 16);
        pixel.setGreen(green * 16);
        pixel.setBlue(blue * 16);
    }

    return image;
}

var image = new SimpleImage("encrypt.png");
findValue(image);
print(image);

Image Enlargement

Write a JavaScript program to set the size of an image twice bigger than itself.

var image = new SimpleImage("skyline.jpg");
var output = new SimpleImage(image.getWidth() * 2, image.getHeight() * 2);

for (var pixel of output.values()) {
    var x = pixel.getX();
    var y = pixel.getY();
    var imagePixel = image.getPixel(x / 2, y / 2);
    pixel.setRed(imagePixel.getRed());
    pixel.setGreen(imagePixel.getGreen());
    pixel.setBlue(imagePixel.getBlue());
}

print(output);

Write the function duplicate, which has one parameter imageand returns a new image that is double the size of the original image and has four copies of the image.

var image = new SimpleImage("skyline.jpg");
var output = new SimpleImage(image.getWidth() * 2, image.getHeight() * 2);

for (var pixel of output.values()) {
    var x = pixel.getX();
    var y = pixel.getY();
    if (x >= image.getWidth()) {
        x = x - image.getWidth();
    }
    if (y >= image.getHeight()) {
        y = y - image.getHeight();
    }
    var imagePixel = image.getPixel(x, y);
    output.setRed(imagePixel.getRed());
    output.setGreen(imagePixel.getGreen());
    output.setBlue(imagePixel.getBlue());
}

print(output);

E-Portforlio

Write a JavaScript program to set an image looks like covered by a blure glass.

function makeSure(coordinate, size) {
    if (coordinate < 0) {
        return 0;
    }
    if (coordinate >= size) {
        return size - 1;
    }
    return coordinate;
}

function getPixelNearby(x, y, diameter) {
    var dx = Math.random() * diameter - diameter / 2;
    var dy = Math.random() * diameter - diameter / 2;
    var nx = makeSure(x + dx, image.getWidth());
    var ny = makeSure(y + dy, image.getHeight());
    return image.getPixel(nx, ny);
}

var image = new SimpleImage("skyline.png");
var output = new SimpleImage(image.getWidth(), image.getHeight());

for (var pixel of image.values()) {
    var x = pixel.getX();
    var y = pixel.getY();
    if (Math.random() < 0.5) {
        var change = getPixelNearby(x, y, 10);
        output.setPixel(x, y, change);
    }
    else {
        output.setPixel(x, y, pixel);
    }
}

print(output);

Arithmetic Image Generation

Write a JavaScript program to set a black and whit image fade from left to right. The size of image is 256 * 256.

var image = new SimpleImage(256, 156);

for (var pixel of image.values()) {
    pixel.setRed(x);
    pixel.setGreen(x);
    pixel.setBlue(x);
}

print(image);

In this example, again we set the RGB value of each component to the same value, so all pixels areashadeofgrey.T hefirsttwolineswithinthelooptransform theoriginal(x ,y) valuesfrom their range of 0..255 to ­1..1 as stored in the local variables x and y. Then, the third line d i v i d e s x b y y w h i c h p r o d u c e s i n t e r e s t i n g r e s u l t s b e c a u s e i t “ r e v e r s e s t h e s i g n ” p u t t i n g h i g h values (bright) next to low values (dark) because ­1/­1 is a positive value and ­ 1/1 is a negative value. The end of the expression 09assigned to value changes the resulting division back from the range ­1..1 to Java’s color range of 0 ..255.

var image = new SimpleImage(256, 256);

for (var pixel of image.values()) {
    var x = pixel.getX() / 128 - 1;
    var y = pixel.getY() / 128 - 1;
    var value = (x / y + 1) * 128;
    pixel.setRed(value);
    pixel.setGreen(value);
    pixel.setBlue(value);
}

print(image);

In this example, we set the RGB components to different values, so each pixel gets a different color.

The bottom left corner is green because that is where the smallest x value is, 0, and the largest y value is, 255. Thus at the bottom left corner, the green value is set to 255, the brightest green, and the red and blue values are set to 0, their smallest values, meaning no red and blue shown. As you move across the pixels diagonally from the bottom left corner towards the top right corner, less green occurs and more red and blue occur.

var image = new SimpleImage(256, 256);

for (var pixel of image.values()) {
    var x = pixel.getX();
    var y = pixel.getY();
    pixel.setRed(x);
    pixel.setGreen(y);
    pixel.setBlue(y);
}

print(image);

Example 4

function dist(pixel, x, y) {
    var dx = pixel.getX() - x;
    var dy = pixel.getY() - y;
    return Math.sqrt(dx * dx + dy * dy);
}

var image = new SimpleImage(256, 256);
for (var pixel of image.values()) {
    var x = pixel.getX();
    var y = pixel.getY();
    pixel.setRed(dist(pixel, 100, 200));
    pixel.setGreen(dist(pixel, 50, 50));
    pixel.setBlue(255 - dist(pixel, 100, 100));
}

print(image);