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

<head>
  <title>Image-Nation</title>
</head>

<body>
  <h1> Image-Nation</h1>
  <canvas id="canvas">
  </canvas>
  <div>
    Upload Your Image File:
    <input type="file" multiple="false" accept="image/*" id="Image_input" onchange="Uploadfile()">
    <input type="button" value="Reset Image" id="reset" onclick="Reset()">
    <input type="button" value="Display Dimensions" id="Dim" onclick="Display_Dim()">
  </div>
  <div id="DimDisplay">
  </div>
  <div>
    <h2>Image Filters:</h2>
    <input type="button" value="RedScale" id="Red" onclick="RedScale()">
    <input type="button" value="GrayScale" id="Gray" onclick="GrayScale()">
    <input type="button" value="RainbowScale" id="Rainbow" onclick="RainbowScale()">
    <input type="button" value="Trigonometry Shark" id="Shark" onclick="Shark()">
    <input type="button" value="Pixel" id="Pixel" onclick="PixelImage(8)">
    <input type="button" value="Blur" id="blur" onclick="Blur()">
  </div>
  <div>Any Colour Scale:<input type="color" value="#000000" id="colorchooser" onchange="Colorscale()">
  </div>
  <div>Pixel Slider:<input type="range" value=8 min=1 max=100 id="pixelsldr" oninput="Change_pixel()">
  </div>
</body>

</html>
body {
  background-color: SkyBlue;
}

h1 {
  text-align: center;
  color: #ffe6b3;
  font-family: Sans-serif;
  background-color: #000033;
  border: outset;
  border-color: #ffcc99;
  border-radius: 20px;
  padding: 5px;
}

#canvas {
  border: outset;
  border-color: #ffcc99;
  border-radius: 20px;
  width: 600px;
  margin-bottom: 20px;
  background-color: WhiteSmoke;
}

div {
  font-size: 110%;
  font-family: Sans-serif;
  margin-left: 30px;
}

input {
  font-size: 75%;
  border: Outset;
  border-radius: 10px;
  padding: 3px;
  font-weight: bold;
  margin-bottom: 30px;
  margin-right: 8px;
  margin-left: 5px;
}

#Red {
  border-color: LightCoral;
  background-color: Red;
  color: White;
}

#Gray {
  border-color: Gray;
  background-color: Black;
  color: White;
}

#Rainbow {
  border-color: Green;
  background-color: Yellow;
  color: Red;
}

#Shark {
  border-color: Blue;
  background-color: SteelBlue;
  color: White;
}

#Dim {
  border-color: DarkRed;
  background-color: MistyRose;
  color: Maroon;
}

#reset {
  border-color: DarkRed;
  background-color: MistyRose;
  color: Maroon;
}

#Pixel {
  border-color: SteelBlue;
  background-color: MistyRose;
  color: Purple;
}

#blur {
  border-color: RoyalBlue;
  background-color: MistyRose;
  color: Red;
}

#pixelsldr {
  width: 600px;
  height: 0px;
  opacity: 100;
}

#Image_input {
  border-color: DarkRed;
  background-color: MistyRose;
  color: Maroon;
}
var MyImage = null;
var canva = document.getElementById("canvas");
var cxt = canva.getContext("2d");
var Dim_display = document.getElementById("DimDisplay");

function CheckImage(MyImage) {
  if (MyImage == null || !MyImage.complete()) {
    return true;
  } else {
    return false;
  }
}

function Uploadfile() {
  var Image_input = document.getElementById("Image_input");
  MyImage = new SimpleImage(Image_input);
  MyImage.drawTo(canva);
}

function Reset() {
  if (CheckImage(MyImage)) {
    alert("Image Has Not Been Loaded!!!");
  } else {
    cxt.clearRect(0, 0, canva.getWidth, canva.getHeight);
    MyImage.drawTo(canva);
  }
}

function Display_Dim() {
  if (CheckImage(MyImage)) {
    alert("Image Has Not Been Loaded!!!");
  } else {
    Dim_display.innerHTML = MyImage.getWidth() + " X " + MyImage.getHeight();
    Dim_display.style =
      "border:Outset;color:DarkGreen;border-color:DarkBlue;background-color:MistyRose;border-radius:10px;padding:3px";
  }
}

function RedScale() {
  if (CheckImage(MyImage)) {
    alert("Image Has Not Been Loaded!!!");
  } else {
    Dim_display.innerHTML = "";
    Dim_display.style = "";
    var Red_image = new SimpleImage(MyImage.width, MyImage.height);

    for (var pixel of MyImage.values()) {
      var x = pixel.getX();
      var y = pixel.getY();
      Red_image.setPixel(x, y, pixel);
      var Red_pixel = Red_image.getPixel(x, y);
      var avg =
        (Red_pixel.getRed() + Red_pixel.getBlue() + Red_pixel.getGreen()) / 3;
      if (avg < 128) {
        Red_pixel.setRed(2 * avg);
        Red_pixel.setBlue(0);
        Red_pixel.setGreen(0);
      } else {
        Red_pixel.setRed(255);
        Red_pixel.setBlue(2 * avg - 255);
        Red_pixel.setGreen(2 * avg - 255);
      }
    }
    cxt.clearRect(0, 0, canva.getWidth, canva.getHeight);
    Red_image.drawTo(canva);
  }
}

function GrayScale() {
  if (CheckImage(MyImage)) {
    alert("Image Has Not Been Loaded!!!");
  } else {
    Dim_display.innerHTML = "";
    Dim_display.style = "";
    var Gray_image = new SimpleImage(MyImage.width, MyImage.height);

    for (var pixel of MyImage.values()) {
      var x = pixel.getX();
      var y = pixel.getY();
      Gray_image.setPixel(x, y, pixel);
      var Gray_pixel = Gray_image.getPixel(x, y);
      var avg =
        (Gray_pixel.getRed() + Gray_pixel.getBlue() + Gray_pixel.getGreen()) /
        3;
      Gray_pixel.setRed(avg);
      Gray_pixel.setBlue(avg);
      Gray_pixel.setGreen(avg);
    }
    cxt.clearRect(0, 0, canva.getWidth, canva.getHeight);
    Gray_image.drawTo(canva);
  }
}

function RainbowScale() {
  if (CheckImage(MyImage)) {
    alert("Image Has Not Been Loaded!!!");
  } else {
    Dim_display.innerHTML = "";
    Dim_display.style = "";
    var Rainbow_image = new SimpleImage(MyImage.width, MyImage.height);

    var h = MyImage.height;

    for (var pixel of MyImage.values()) {
      var x = pixel.getX();
      var y = pixel.getY();
      Rainbow_image.setPixel(x, y, pixel);
      var Rainbow_pixel = Rainbow_image.getPixel(x, y);
      var avg =
        (Rainbow_pixel.getRed() +
          Rainbow_pixel.getBlue() +
          Rainbow_pixel.getGreen()) /
        3;
      if (y < h / 7) {
        if (avg < 128) {
          Rainbow_pixel.setRed(2 * avg);
          Rainbow_pixel.setBlue(0);
          Rainbow_pixel.setGreen(0);
        } else {
          Rainbow_pixel.setRed(255);
          Rainbow_pixel.setBlue(2 * avg - 255);
          Rainbow_pixel.setGreen(2 * avg - 255);
        }
      } else if (y >= h / 7 && y < (2 * h) / 7) {
        if (avg < 128) {
          Rainbow_pixel.setRed(2 * avg);
          Rainbow_pixel.setBlue(0);
          Rainbow_pixel.setGreen(0.8 * avg);
        } else {
          Rainbow_pixel.setRed(255);
          Rainbow_pixel.setBlue(2 * avg - 255);
          Rainbow_pixel.setGreen(1.2 * avg - 51);
        }
      } else if (y >= (2 * h) / 7 && y < (3 * h) / 7) {
        if (avg < 128) {
          Rainbow_pixel.setRed(2 * avg);
          Rainbow_pixel.setBlue(0);
          Rainbow_pixel.setGreen(2 * avg);
        } else {
          Rainbow_pixel.setRed(255);
          Rainbow_pixel.setBlue(2 * avg - 255);
          Rainbow_pixel.setGreen(255);
        }
      } else if (y >= (3 * h) / 7 && y < (4 * h) / 7) {
        if (avg < 128) {
          Rainbow_pixel.setRed(0);
          Rainbow_pixel.setBlue(0);
          Rainbow_pixel.setGreen(2 * avg);
        } else {
          Rainbow_pixel.setRed(2 * avg - 255);
          Rainbow_pixel.setBlue(2 * avg - 255);
          Rainbow_pixel.setGreen(255);
        }
      } else if (y >= (4 * h) / 7 && y < (5 * h) / 7) {
        if (avg < 128) {
          Rainbow_pixel.setRed(0);
          Rainbow_pixel.setBlue(2 * avg);
          Rainbow_pixel.setGreen(0);
        } else {
          Rainbow_pixel.setRed(2 * avg - 255);
          Rainbow_pixel.setBlue(255);
          Rainbow_pixel.setGreen(2 * avg - 255);
        }
      } else if (y >= (5 * h) / 7 && y < (6 * h) / 7) {
        if (avg < 128) {
          Rainbow_pixel.setRed(0.8 * avg);
          Rainbow_pixel.setBlue(2 * avg);
          Rainbow_pixel.setGreen(0);
        } else {
          Rainbow_pixel.setRed(1.2 * avg - 51);
          Rainbow_pixel.setBlue(255);
          Rainbow_pixel.setGreen(2 * avg - 255);
        }
      } else {
        if (avg < 128) {
          Rainbow_pixel.setRed(1.6 * avg);
          Rainbow_pixel.setBlue(1.6 * avg);
          Rainbow_pixel.setGreen(0);
        } else {
          Rainbow_pixel.setRed(0.4 * avg + 153);
          Rainbow_pixel.setBlue(2 * avg - 255);
          Rainbow_pixel.setGreen(0.4 * avg + 153);
        }
      }
    }
    cxt.clearRect(0, 0, canva.getWidth, canva.getHeight);
    Rainbow_image.drawTo(canva);
  }
}

function PixelImage(p) {
  if (CheckImage(MyImage)) {
    alert("Image Has Not Been Loaded!!!");
  } else {
    Dim_display.innerHTML = "";
    Dim_display.style = "";
    var Pixel_image = new SimpleImage(MyImage.width, MyImage.height);

    for (var pixel of MyImage.values()) {
      var x = pixel.getX();
      var y = pixel.getY();
      Pixel_image.setPixel(x, y, pixel);
    }
    var x, y;
    for (x = p; x < MyImage.width; x = x + 2 * p + 1) {
      for (y = 0; y < MyImage.height; y++) {
        for (var k = 1; k <= p; k++) {
          var Pixel_pixel = Pixel_image.getPixel(x, y);
          if (x - k < MyImage.width) {
            Pixel_image.setPixel(x - k, y, Pixel_pixel);
          }
          if (x + k < MyImage.width) {
            Pixel_image.setPixel(x + k, y, Pixel_pixel);
          }
        }
      }
    }
    for (y = p; x < MyImage.height; y = y + 2 * p + 1) {
      for (x = 0; x < MyImage.width; x++) {
        for (var k = 1; k <= p; k++) {
          var Pixel_pixel = Pixel_image.getPixel(x, y);
          if (y - k < MyImage.height) {
            Pixel_image.setPixel(x, y - k, Pixel_pixel);
          }
          if (y + k < MyImage.height) {
            Pixel_image.setPixel(x, y + k, Pixel_pixel);
          }
        }
      }
    }
    cxt.clearRect(0, 0, canva.getWidth, canva.getHeight);
    Pixel_image.drawTo(canva);
  }
}

function Change_pixel() {
  if (CheckImage(MyImage)) {
    alert("Image Has Not Been Loaded!!!");
  } else {
    Dim_display.innerHTML = "";
    Dim_display.style = "";
    var sldr_input = document.getElementById("pixelsldr");
    PixelImage(parseInt(sldr_input.value));
  }
}

function Shark() {
  if (CheckImage(MyImage)) {
    alert("Image Has Not Been Loaded!!!");
  } else {
    Dim_display.innerHTML = "";
    Dim_display.style = "";
    var Shark_image = new SimpleImage(MyImage.width, MyImage.height);

    for (var pixel of MyImage.values()) {
      var x = pixel.getX();
      var y = pixel.getY();
      Shark_image.setPixel(x, y, pixel);
    }
    var x, y;
    for (x = 0; x < MyImage.width; x++) {
      for (y = 0; y < MyImage.height; y++) {
        var Shark_pixel = Shark_image.getPixel(x, y);
        if (y < MyImage.height / 5 + 100 * Math.sin(x / 100)) {
          Shark_pixel.setRed(0);
          Shark_pixel.setBlue(255);
          Shark_pixel.setGreen(106);
        } else if (y > (4 * MyImage.height) / 5 + 100 * Math.sin(x / 100)) {
          Shark_pixel.setRed(0);
          Shark_pixel.setBlue(255);
          Shark_pixel.setGreen(106);
        }
      }
    }
    cxt.clearRect(0, 0, canva.getWidth, canva.getHeight);
    Shark_image.drawTo(canva);
  }
}

function Colorscale() {
  if (CheckImage(MyImage)) {
    alert("Image Has Not Been Loaded!!!");
  } else {
    Dim_display.innerHTML = "";
    Dim_display.style = "";
    var Color_picker = document.getElementById("colorchooser");
    var Input_color = Color_picker.value;
    var Color_image = new SimpleImage(MyImage.width, MyImage.height);

    for (var pixel of MyImage.values()) {
      var x = pixel.getX();
      var y = pixel.getY();
      Color_image.setPixel(x, y, pixel);
      var Color_pixel = Color_image.getPixel(x, y);
      var avg =
        (Color_pixel.getRed() +
          Color_pixel.getBlue() +
          Color_pixel.getGreen()) /
        3;
      var Rc = parseInt(Input_color.substr(1, 2), 16);
      var Bc = parseInt(Input_color.substr(5, 2), 16);
      var Gc = parseInt(Input_color.substr(3, 2), 16);
      if (avg < 128) {
        Color_pixel.setRed((Rc / 127.5) * avg);
        Color_pixel.setBlue((Bc / 127.5) * avg);
        Color_pixel.setGreen((Gc / 127.5) * avg);
      } else {
        Color_pixel.setRed((2 - Rc / 127.5) * avg + 2 * Rc - 255);
        Color_pixel.setBlue((2 - Bc / 127.5) * avg + 2 * Bc - 255);
        Color_pixel.setGreen((2 - Gc / 127.5) * avg + 2 * Gc - 255);
      }
    }
    cxt.clearRect(0, 0, canva.getWidth, canva.getHeight);
    Color_image.drawTo(canva);
  }
}

function Blur() {
  if (CheckImage(MyImage)) {
    alert("Image Has Not Been Loaded!!!");
  } else {
    Dim_display.innerHTML = "";
    Dim_display.style = "";
    var Blur_image = new SimpleImage(MyImage.width, MyImage.height);
    for (var pixel of MyImage.values()) {
      var rand_num = Math.random() * 10;
      var x = pixel.getX();
      var y = pixel.getY();
      if (rand_num < 5) {
        Blur_image.setPixel(x, y, pixel);
      } else {
        var x1, y1;
        var rand1 = Math.random() * 1;
        var w = parseInt(MyImage.width);
        var h = parseInt(MyImage.height);
        if (rand1 < 0.5) {
          x1 = x + Math.round(Math.random() * 50);
        } else {
          x1 = x - Math.round(Math.random() * 50);
        }
        if (rand1 > 0.5) {
          y1 = y + Math.round(Math.random() * 50);
        } else {
          y1 = y - Math.round(Math.random() * 50);
        }
        if (x1 < 0) {
          x1 = 0;
        }
        if (x1 >= w) {
          x1 = w - 1;
        }
        if (y1 < 0) {
          y1 = 0;
        }
        if (y1 >= h) {
          y1 = h - 1;
        }
        var pixel1 = MyImage.getPixel(x1, y1);
        Blur_image.setPixel(x, y, pixel1);
      }
    }
    cxt.clearRect(0, 0, canva.getWidth, canva.getHeight);
    Blur_image.drawTo(canva);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.