quentinkinard/index.html

## index.html
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, intial-scale=1.0">
  <title>Mini Project 1</title>
  <script src="http://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"></script>
</head>
<h1>
  Mini Project 1
</h1>
<h2>
  Fun with filters
</h2>
<canvas id="can1" width="500" height="500"></canvas>
<p>
  <input type="file" multiple="false" accept="image/*" id="imgfile" onclick="loadImage()" />
</p>
<p>
  <input id="btn" type="button" value="Grayscale" onclick="makeGray()" />
  <input id="btn" type="button" value="Red" onclick="makeRed()" />
  <input id="btn" type="button" value="Blur" onclick="makeBlur()" />
  <input id="btn" type="button" value="Window" onclick="makeWindowPane()" />
  <input id="btn" type="button" value="Checkerboard" onclick="makeCheckerboard()" />
  <input id="btn" type="button" value="Reset Image" onclick="resetImage()" />
</p>

## mini-project1.markdown

      
    Raw
  

              mini-project1.markdown
            
          
    Mini Project1

A Pen by Quentin Kinard on CodePen.
License.

  
## script.js
var originalImage = null;
var modifiedImage = null;

function loadImage() {
  var fileInput = document.getElementById("imgfile");
  var canvas = document.getElementById("can1");
  var context = canvas.getContext("2d");

  if (fileInput.files.length > 0) {
    var file = fileInput.files[0];
    var reader = new FileReader();

    reader.onload = function (event) {
      var img = new Image();
      img.onload = function () {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(img, 0, 0, canvas.width, canvas.height);
        originalImage = new SimpleImage(img);
        console.log("Image loaded:", originalImage);

        canvas.width = img.width;
        canvas.height = img.height;

        originalImage = new SimpleImage(fileInput);
        modifiedImage = new SimpleImage(fileInput);

        context.drawImage(img, 0, 0);
      };
      img.src = event.target.result;
    };
    reader.readAsDataURL(fileInput.files[0]);
  }
}

function makeGray() {
  if (originalImage) {
    var grayScaleImage = new SimpleImage(originalImage);
    for (var pixel of grayScaleImage.values()) {
      var avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue()) / 3;
      pixel.setRed(avg);
      pixel.setGreen(avg);
      pixel.setBlue(avg);
    }

    var imgcanvas = document.getElementById("can1");
    if (imgcanvas && imgcanvas.getContext) {
      grayScaleImage.drawTo(imgcanvas);
      alert("grayscale filter applied");
    } else {
      alert("Canvas element not found");
    }
  } else {
    alert("Original image is undefined");
  }
}

function makeBlur() {
  var canvas = document.getElementById("can1");
  var context = canvas.getContext("2d");

  var img = new Image();
  var canvas = document.getElementById("can1");
  if (canvas) {
    var context = canvas.getContext("2d");
    if (context) {
      context.filter = "blur(7px)";
    } else {
      console.error("Failed to get 2D context.");
    }
  } else {
    console.error("Canvas element not found.");
  }
  img.src = canvas.toDataURL();

  img.onload = function () {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(img, 0, 0);
  };
}

function makeRed() {
  var canvas = document.getElementById("can1");
  if (modifiedImage) {
    for (var pixel of modifiedImage.values()) {
      var red = pixel.getRed();
      var green = pixel.getGreen();
      var blue = pixel.getBlue();

      pixel.setRed(Math.min(255, red + 100));
      pixel.setGreen(Math.max(0, green - 50));
      pixel.setBlue(Math.max(0, blue - 50));
    }
    modifiedImage.drawTo(canvas);
    alert("Image now has a red tint");
  } else {
    alert("No image loaded. Please load an image first.");
  }
}

function makeWindowPane() {
  var canvas = document.getElementById("can1");
  var context = canvas.getContext("2d");
  for (var x = 0; x < originalImage.width; x++) {
    for (var y = 0; y < originalImage.height; y++) {
      var pixel = originalImage.getPixel(x, y);
      console.log(`Processing pixel at (${x}, ${y})`);
      if ((x % 2 === 0 && y % 2 === 0) || (x % 2 !== 0 && y % 2 !== 0)) {
        originalImage.setPixel(x, y, pixel);
      } else {
        originalImage.setPixel(x, y, { r: 128, g: 128, b: 128 });
      }
    }
  }
  context.putImageData(originalImage, 0, 0);
  console.log("window pane filter applied");
}

function makeCheckerboard() {
  for (var x = 0; x < originalImage.width; x++) {
    for (var y = 0; y < originalImage.height; y++) {
      var pixel = originalImage.getPixel(x, y);
      if ((Math.floor(x / 10) + Math.floor(y / 10)) % 2 === 0) {
        originalImage.setPixel(x, y, pixel); // Keep original color
      } else {
        originalImage.setPixel(x, y, { r: 255, g: 255, b: 255 }); // Set to white
      }
    }
  }
}

function resetImage() {
  var canvas = document.getElementById("can1");
  if (originalImage) {
    originalImage.drawTo(canvas);
    alert("Image reset to original");
  } else {
    alert("No image loaded. Please load an image");
  }
}

document.getElementById("imgfile").addEventListener("change", loadImage);

## style.css
body {
  background-color: #FFD275;
}

h1 {
  text-decoration: underline;
  background-color: #E8AE68;
  border-radius: 5px;
  margin: 15px;
}

h2 {
  margin: 15px;
}

#can1 {
  margin: 2.5px;
  float: left;
  border: solid 1px gray;
  width: 600px;
  height: 600px;
}

#btn {
  background-color: #3ea587;
  padding: 3.5px;
  border-radius: 5px;
}
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<title>Mini Project 1</title>
	<script src="http://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"></script>
	</head>
	<h1>
	Mini Project 1
	</h1>
	<h2>
	Fun with filters
	</h2>
	<canvas id="can1" width="500" height="500"></canvas>
	<p>
	<input type="file" multiple="false" accept="image/*" id="imgfile" onclick="loadImage()" />
	</p>
	<p>
	<input id="btn" type="button" value="Grayscale" onclick="makeGray()" />
	<input id="btn" type="button" value="Red" onclick="makeRed()" />
	<input id="btn" type="button" value="Blur" onclick="makeBlur()" />
	<input id="btn" type="button" value="Window" onclick="makeWindowPane()" />
	<input id="btn" type="button" value="Checkerboard" onclick="makeCheckerboard()" />
	<input id="btn" type="button" value="Reset Image" onclick="resetImage()" />
	</p>
	var originalImage = null;
	var modifiedImage = null;

	function loadImage() {
	var fileInput = document.getElementById("imgfile");
	var canvas = document.getElementById("can1");
	var context = canvas.getContext("2d");

	if (fileInput.files.length > 0) {
	var file = fileInput.files[0];
	var reader = new FileReader();

	reader.onload = function (event) {
	var img = new Image();
	img.onload = function () {
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.drawImage(img, 0, 0, canvas.width, canvas.height);
	originalImage = new SimpleImage(img);
	console.log("Image loaded:", originalImage);

	canvas.width = img.width;
	canvas.height = img.height;

	originalImage = new SimpleImage(fileInput);
	modifiedImage = new SimpleImage(fileInput);

	context.drawImage(img, 0, 0);
	};
	img.src = event.target.result;
	};
	reader.readAsDataURL(fileInput.files[0]);
	}
	}

	function makeGray() {
	if (originalImage) {
	var grayScaleImage = new SimpleImage(originalImage);
	for (var pixel of grayScaleImage.values()) {
	var avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue()) / 3;
	pixel.setRed(avg);
	pixel.setGreen(avg);
	pixel.setBlue(avg);
	}

	var imgcanvas = document.getElementById("can1");
	if (imgcanvas && imgcanvas.getContext) {
	grayScaleImage.drawTo(imgcanvas);
	alert("grayscale filter applied");
	} else {
	alert("Canvas element not found");
	}
	} else {
	alert("Original image is undefined");
	}
	}

	function makeBlur() {
	var canvas = document.getElementById("can1");
	var context = canvas.getContext("2d");

	var img = new Image();
	var canvas = document.getElementById("can1");
	if (canvas) {
	var context = canvas.getContext("2d");
	if (context) {
	context.filter = "blur(7px)";
	} else {
	console.error("Failed to get 2D context.");
	}
	} else {
	console.error("Canvas element not found.");
	}
	img.src = canvas.toDataURL();

	img.onload = function () {
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.drawImage(img, 0, 0);
	};
	}

	function makeRed() {
	var canvas = document.getElementById("can1");
	if (modifiedImage) {
	for (var pixel of modifiedImage.values()) {
	var red = pixel.getRed();
	var green = pixel.getGreen();
	var blue = pixel.getBlue();

	pixel.setRed(Math.min(255, red + 100));
	pixel.setGreen(Math.max(0, green - 50));
	pixel.setBlue(Math.max(0, blue - 50));
	}
	modifiedImage.drawTo(canvas);
	alert("Image now has a red tint");
	} else {
	alert("No image loaded. Please load an image first.");
	}
	}

	function makeWindowPane() {
	var canvas = document.getElementById("can1");
	var context = canvas.getContext("2d");
	for (var x = 0; x < originalImage.width; x++) {
	for (var y = 0; y < originalImage.height; y++) {
	var pixel = originalImage.getPixel(x, y);
	console.log(`Processing pixel at (${x}, ${y})`);
	if ((x % 2 === 0 && y % 2 === 0) \|\| (x % 2 !== 0 && y % 2 !== 0)) {
	originalImage.setPixel(x, y, pixel);
	} else {
	originalImage.setPixel(x, y, { r: 128, g: 128, b: 128 });
	}
	}
	}
	context.putImageData(originalImage, 0, 0);
	console.log("window pane filter applied");
	}

	function makeCheckerboard() {
	for (var x = 0; x < originalImage.width; x++) {
	for (var y = 0; y < originalImage.height; y++) {
	var pixel = originalImage.getPixel(x, y);
	if ((Math.floor(x / 10) + Math.floor(y / 10)) % 2 === 0) {
	originalImage.setPixel(x, y, pixel); // Keep original color
	} else {
	originalImage.setPixel(x, y, { r: 255, g: 255, b: 255 }); // Set to white
	}
	}
	}
	}

	function resetImage() {
	var canvas = document.getElementById("can1");
	if (originalImage) {
	originalImage.drawTo(canvas);
	alert("Image reset to original");
	} else {
	alert("No image loaded. Please load an image");
	}
	}

	document.getElementById("imgfile").addEventListener("change", loadImage);
	body {
	background-color: #FFD275;
	}

	h1 {
	text-decoration: underline;
	background-color: #E8AE68;
	border-radius: 5px;
	margin: 15px;
	}

	h2 {
	margin: 15px;
	}

	#can1 {
	margin: 2.5px;
	float: left;
	border: solid 1px gray;
	width: 600px;
	height: 600px;
	}

	#btn {
	background-color: #3ea587;
	padding: 3.5px;
	border-radius: 5px;
	}