E-Portfolio
Part 1: Create an Image from Scratch
JavaScript Code:
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();
var width = image.getWidth();
var height = image.getHeight();
if (dist(pixel, width / 2 - 1, height) < width / 6) {
pixel.setRed(255);
pixel.setGreen(196);
pixel.setBlue(8);
}
else if (dist(pixel, width / 2 - 1, height) < width / 3) {
pixel.setRed(88);
pixel.setGreen(178);
pixel.setBlue(220);
}
else if (dist(pixel, width / 2 - 1, height) < width / 2) {
pixel.setRed(232);
pixel.setGreen(48);
pixel.setBlue(21);
}
else {
pixel.setRed(y);
pixel.setGreen(x);
pixel.setBlue(200);
}
}
print(image);
Algorithm:
Decide the rainbow circle’s center: one half of the image’s width minus one and height.
Yellow rainbow part: set the pixel which’s distance to the circle center is one sixth of the image’s width into yellow.
Blue rainbow part: set the pixel which’s distance to the circle center is one third of the image’s width into blue.
Red rainbow part: set the pixel which’s distance to the circle center is half of the image’s width into red.
Background color: set others pixels’ red color increase by the image’s height, green color increase by the image’s width, and the blue color’s value to 200.
Distance function: write a function which will calculate the distance from a pixel’s coordinate to a certain point.
Part 2: Modify an image
JavaScript Code:
function makeSure(coordinate, size) {
if (coordinate < 0) {
return 0;
}
if (coordinate >= size ){
return size - 1;
}
return coordinate;
}
function getPixelNearby(image, 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("eastereggs.jpg");
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(image, x, y, 30);
output.setPixel(x, y, change);
}
else {
output.setPixel(x, y, pixel);
}
}
function window(x, y, width, height, horizontal, vertical1, vertical2, vertical3) {
if (x < 5 || x > width - 5 || y < 5 || y > height - 5) {
return true;
}
if (Math.abs(y - horizontal) < 5) {
return true;
}
if (Math.abs(x - vertical1) < 5 || Math.abs(x - vertical2) < 5 || Math.abs(x - vertical3) < 5) {
return true;
}
return false;
}
function highlight(x, y, width, height, horizontal, vertical1, vertical2, vertical3) {
if (vertical1 - x < 8 && x < vertical1) {
return true;
}
if (vertical2 - x < 8 && x < vertical2) {
return true;
}
if (vertical3 - x < 8 && x < vertical3) {
return true;
}
if (horizontal - y < 8 && y < horizontal) {
return true;
}
if (x > width - 8 || y > height - 8){
return true;
}
return false;
}
for (var pixel of output.values()) {
var x = pixel.getX();
var y = pixel.getY();
var width = output.getWidth();
var height = output.getHeight();
var horizontal = height / 2;
var vertical1 = width / 4;
var vertical2 = width / 2;
var vertical3 = width * 3 / 4;
if (window(x, y, width, height, horizontal, vertical1, vertical2, vertical3)) {
pixel.setRed(13);
pixel.setGreen(86);
pixel.setBlue(97);
}
else if (highlight(x, y, width, height, horizontal, vertical1, vertical2, vertical3)) {
pixel.setRed(230);
pixel.setGreen(230);
pixel.setBlue(250);
}
}
print(output)
Algorithm:
Prepare: Set an output image the same size of the image which is modifying, then loop the pixel of the original image’s values.
The blur window glass: Write a function which will choose the random pixel which is nearby the old pixel by one half chance.
Set window: Use math to find the pixel’s x and y values which are within the window pixels’ coordinates.
Part 3: Hide an Image in Another Image - Steganography
Original Image:
Cropped Image:
Hidden Image:
Encrypted Image:
Extract Image:
JavaScript Code
var image = new SimpleImage("astrachan.jpg");
var hide = new SimpleImage("helloworld.png");
var output = new SimpleImage(hide.getWidth(), hide.getHeight());
function crop(image, output) {
for (var pixel of image.values()) {
var x = pixel.getX();
var y = pixel.getY();
if (x < output.getWidth() && y < output.getHeight()) {
var change = image.getPixel(x, y);
output.setPixel(x, y, change);
}
}
return output;
}
if (image.getWidth() !== hide.getWidth() || image.getHeight() !== hide.getHeight()) {
crop(image, output);
}
for (var pixel of output.values()) {
var x = pixel.getX();
var y = pixel.getY();
var hidePixel = hide.getPixel(x, y);
var red = Math.floor(pixel.getRed() / 4) * 4;
var green = Math.floor(pixel.getGreen() / 4) * 4;
var blue = Math.floor(pixel.getBlue() / 4) * 4;
var nred = red + hidePixel.getRed() % 4;
var ngreen = green + hidePixel.getGreen() % 4;
var nblue = blue + hidePixel.getBlue() % 4;
pixel.setRed(nred);
pixel.setGreen(ngreen);
pixel.setBlue(nblue);
}
var decrypt = new SimpleImage(output.getWidth(), output.getHeight());
for (var pixel of output.values()) {
var red = pixel.getRed() % 4 * 64;
var green = pixel.getGreen() % 4 * 64;
var blue = pixel.getBlue() % 4 * 64;
var x = pixel.getX();
var y = pixel.getY();
var decryptPixel = decrypt.getPixel(x, y);
decryptPixel.setRed(red);
decryptPixel.setGreen(green);
decryptPixel.setBlue(blue);
}
print(decrypt, image, output);
Algorithm:
Make sure two images are the same size. If they are not, write a function for cropping image.
Clear the pixels’ last two digits of RGB values in image.
Find out the first digits in the RGB values of the pixels of the hidden image.
Plus the two digits value and the wiped clean image’s RGB value together. Then set it to a new output image’s pixels value.
Extract: find out the last two digits of the hidden image’s pixels value, then put it to the first two digits of a image’s pixels value, and make the other digits’s value into zero.