Image Filter Fun

image-filter-fun.markdown

Image Filter Fun

A Pen by kalsmic on CodePen.

License.

Developed to show off skills acquired in the Programming Foundations with JavaScript, HTML and CSS by Duke University on coursera.

index.html

<script src="https://www.dukelearntoprogram.com//course1/common/js/image/SimpleImage.js"></script>

<h1>Arthur's Image Filter Fun</h1>
<table>
    <tr>
        <th>Original Image</th>
        <th>Preview Image</th>
    </tr>
    <tr>
        <td>
            <canvas id="canvas"></canvas>

        </td>
        <td>
            <canvas id="previewCanvas"></canvas>

        </td>
    </tr>
    <tr>
        <td id="originalResolution"></td>
        <td id="newResolution"></td>
    </tr>
    <tr>
        <th></th>
        <td id="effect"></td>
    </tr>

</table>
<h2>Load Image</h2>
<input type="file" accept="image/*" multiple="false" onchange="uploadImage(this)" />

<h2>Choose Filter</h2>

<input type="button" onclick="makeRed()" value="red" />

<input type="button" onclick="makeGray()" value="grayscale" />

<input type="button" onclick="makeRainbow()" value="rainbow" />
<input type="button" onclick="makeSepia()" value="sepia" />
<input type="button" onclick="makeNegative()" value="negative" />
<input type="button" onclick="makeMirror()" value="mirror" />
<input type="button" onclick="makeBlur(5)" value="blur" />

<p><input type="button" value="Reset Image" onclick="resetImage()" /></p>

<div>
    <h2> Lets connect on:
        <a href="https://www.linkedin.com/in/arthur-kalule/" target="_blank">LinkedIn</a>&nbsp;
        <a href="https://github.com/kalsmic" target="_blank">GitHub</a>
    </h2>

</div>

script.js

var imageCanvas = document.getElementById("canvas");
var previewCanvas = document.getElementById("previewCanvas");
var originalImage = null;
var originalImageSize = document.getElementById("originalResolution");
var newImageSize = document.getElementById("newResolution");

function uploadImage(fileInput) {
  originalImage = new SimpleImage(fileInput);
  originalImage.drawTo(imageCanvas);
  originalImage.drawTo(previewCanvas);
  showEffect("No Filter Effect Applied Yet");
}

function makeGray() {
  /**
  * This function makes each of the red, green and blue values are equal
  * to each other to make obtain color shade of gray.
  */
  
  if (imageIsLoaded(originalImage)) {
    var tempImage = new SimpleImage(originalImage);
    for (var pixel of tempImage.values()) {
      var average = calculateAveragePixel(pixel);
      // set pixels to the average
      pixel.setRed(average);
      pixel.setGreen(average);
      pixel.setBlue(average);
    }
    tempImage.drawTo(previewCanvas);
    showImageSize();
    showEffect("Gray Filter Effect");
  }
}

function makeRed() {
  if (imageIsLoaded(originalImage)) {
    var tempImage = new SimpleImage(originalImage);

    for (var pixel of tempImage.values()) {
      // red 255, 0 , 0
      makeColorFilter(pixel, 255, 0, 0);
    }
    tempImage.drawTo(previewCanvas);
    showImageSize();
    showEffect("Red Filter Effect");
  }
}

function resetImage() {
  if (imageIsLoaded(originalImage)) {
    originalImage.drawTo(imageCanvas);
    originalImage.drawTo(previewCanvas);
    showImageSize();
    showEffect("No Effect Applied yet");
  }
}

function imageIsLoaded(image) {
   if (image == null  || ! image.complete()){
 
    alert("Please load an Image");
     
    return false;
  }
  return true;
}

function showImageSize() {
  originalImageSize.innerHTML = imageCanvas.width + " x " + imageCanvas.height;
  newImageSize.innerHTML = previewCanvas.width + " x " + previewCanvas.height;
}

function makeRainbow() {
  if (imageIsLoaded(originalImage)) {
    var tempImage = new SimpleImage(originalImage);
    var imageHeight = originalImage.getHeight();
    var partSize = imageHeight / 7;

    for (var pixel of tempImage.values()) {
      var y = pixel.getY();
      if (y <= partSize) {
        // red 255, 0 , 0
        makeColorFilter(pixel, 255, 0, 0);
      } else if (y <= partSize * 2) {
        // 255, 127, 0
        makeColorFilter(pixel, 255, 127, 0);
      } else if (y <= partSize * 3) {
        // yellow 255, 255, 0
        makeColorFilter(pixel, 255, 255, 0);
      } else if (y <= partSize * 4) {
        //green 0,255,0
        makeColorFilter(pixel, 0, 255, 0);
      } else if (y <= partSize * 5) {
        // blue  0, 0, 255
        makeColorFilter(pixel, 0, 0, 0);
      } else if (y <= partSize * 6) {
        // indigo  75, 0, 130
        makeColorFilter(pixel, 75, 0, 130);
      } else {
        //violet = 	148, 0, 211
        makeColorFilter(pixel, 148, 0, 211);
      }
    }

    tempImage.drawTo(previewCanvas);

    showImageSize();
    showEffect("Rainbow Filter Effect");
  }
}

function calculateAveragePixel(pixel) {
  return (pixel.getRed() + pixel.getGreen() + pixel.getBlue()) / 3;
}

function makeColorFilter(pixel, redColor, greenColor, blueColor) {
  var avg = calculateAveragePixel(pixel);
  if (avg < 128) {
    pixel.setRed((redColor / 127.5) * avg);
    pixel.setGreen((greenColor / 127.5) * avg);
    pixel.setBlue((blueColor / 127.5) * avg);
  } else {
    pixel.setRed((2 - redColor / 127.5) * avg + 2 * redColor - 255);
    pixel.setGreen((2 - greenColor / 127.5) * avg + 2 * greenColor - 255);
    pixel.setBlue((2 - blueColor / 127.5) * avg + 2 * blueColor - 255);
  }
}

function makeSepia() {
  if (imageIsLoaded(originalImage)) {
    var tempImage = new SimpleImage(originalImage);

    for (var pixel of tempImage.values()) {
      var red = pixel.getRed();
      var green = pixel.getGreen();
      var blue = pixel.getBlue();

      var transparentRed = 0.393 * red + 0.769 * green + 0.189 * blue;
      var transparentGreen = 0.349 * red + 0.686 * green + 0.168 * blue;
      var transparentBlue = 0.272 * red + 0.534 * green + 0.131 * blue;
      if (transparentRed > 255) {
        pixel.setRed(255);
      } else {
        pixel.setRed(transparentRed);
      }
      if (transparentGreen > 255) {
        pixel.setGreen(255);
      } else {
        pixel.setGreen(transparentGreen);
      }
      if (transparentBlue > 255) {
        pixel.setBlue(255);
      } else {
        pixel.setBlue(transparentBlue);
      }
    }
    tempImage.drawTo(previewCanvas);
    showImageSize();
    showEffect("Sepia Filter Effect");
  }
}

function makeNegative() {
  if (imageIsLoaded(originalImage)) {
    var tempImage = new SimpleImage(originalImage);

    for (var pixel of tempImage.values()) {
      pixel.setRed(255 - pixel.getRed());
      pixel.setGreen(255 - pixel.getGreen());
      pixel.setBlue(255 - pixel.getBlue());
    }
    tempImage.drawTo(previewCanvas);
    showImageSize();
    showEffect("Negative Filter Effect");
  }
}

function makeMirror() {
  if (imageIsLoaded(originalImage)) {
    var tempImage = new SimpleImage(originalImage);
    var width = tempImage.width;
    var height = tempImage.height;
    var mirrorImage = new SimpleImage(width * 2, height);

    for (var pixel of tempImage.values()) {
      var x = pixel.getX();
      var y = pixel.getY();

      mirrorImage.setPixel(x, y, pixel);
      mirrorImage.setPixel(mirrorImage.width - 1 - x, y, pixel);
    }
    mirrorImage.drawTo(previewCanvas);
    showImageSize();
    showEffect("Mirror Effect");
  }
}

function coordinateOutOfBounds(image, x, y) {
  if (x < 0 || x >= image.getWidth()) {
    return true;
  }
  if (y < 0 || y >= image.getHeight()) {
    return true;
  }
  return false;
}

function findNearByPixel(image, pixel, distance) {
  // Find a newby pixel that is between 0 and distance pixels away
  for (var x = pixel.getX() - distance; x <= pixel.getX() + distance; x++) {
    for (var y = pixel.getY() - distance; y <= pixel.getY() + distance; y++) {
      if (!coordinateOutOfBounds(image, x, y)) {
        return image.getPixel(x, y);
      }
    }
  }
}

function makeBlur(distance) {
  if (imageIsLoaded(originalImage)) {
    var width = originalImage.getWidth();
    var height = originalImage.getHeight();
    var tempImage = new SimpleImage(originalImage);
    var newImage = new SimpleImage(width, height);

    for (var pixel of tempImage.values()) {
      var x = pixel.getX();
      var y = pixel.getY();
      var choice = Math.random();
      if (choice < 0.5) {
        // copy current pixel to new image 
        newImage.setPixel(x, y, pixel);
      } else {
        // find nearby pixel to copy to new image
        var randomPixel = findNearByPixel(tempImage, pixel, distance);
        newImage.setPixel(x, y, randomPixel);
      }
    }
    newImage.drawTo(previewCanvas);
    showImageSize();
    showEffect("Blur Effect");
  }
}

style.css

canvas {
  border: 1px solid lightgray;
  height: 200px;
}

h1,h2 {
  color:#527a7a;
}
th, td {
  color:#527a7a
}