Add completed sharpen filter
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>randomDot</title>
|
||||||
|
<script src="libraries/p5.min.js" type="text/javascript"></script>
|
||||||
|
|
||||||
|
<script src="libraries/p5.dom.js" type="text/javascript"></script>
|
||||||
|
<script src="libraries/p5.sound.js" type="text/javascript"></script>
|
||||||
|
|
||||||
|
<script src="sketch.js" type="text/javascript"></script>
|
||||||
|
|
||||||
|
<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
36
CM2030 Graphics Programming/Week 15/6. Sharpen filter/libraries/p5.min.js
vendored
Normal file
36
CM2030 Graphics Programming/Week 15/6. Sharpen filter/libraries/p5.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,73 @@
|
|||||||
|
let imgIn;
|
||||||
|
// vertical edges
|
||||||
|
let matrix =[
|
||||||
|
[-1, -1, -1],
|
||||||
|
[-1, 9, -1],
|
||||||
|
[-1, -1, -1]
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
function preload() {
|
||||||
|
imgIn = loadImage("assets/seaNettles.jpg");
|
||||||
|
}
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
createCanvas(imgIn.width * 2 + 20, imgIn.height);
|
||||||
|
pixelDensity(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
background(255);
|
||||||
|
image(imgIn, 0, 0);
|
||||||
|
image(sharpFilter(imgIn), imgIn.width + 20, 0);
|
||||||
|
noLoop();
|
||||||
|
}
|
||||||
|
|
||||||
|
function sharpFilter(img) {
|
||||||
|
let imgOut = createImage(img.width, img.height);
|
||||||
|
imgOut.loadPixels();
|
||||||
|
img.loadPixels();
|
||||||
|
|
||||||
|
let matrixSize = matrix.length;
|
||||||
|
|
||||||
|
for (let y = 0; y < img.height; y++) {
|
||||||
|
for (let x = 0; x < img.width; x++) {
|
||||||
|
|
||||||
|
let index = (img.width * y + x) * 4;
|
||||||
|
|
||||||
|
let c = convolution(x, y, matrix, matrixSize, imgIn)
|
||||||
|
|
||||||
|
imgOut.pixels[index + 0] = c[0];
|
||||||
|
imgOut.pixels[index + 1] = c[1];
|
||||||
|
imgOut.pixels[index + 2] = c[2];
|
||||||
|
imgOut.pixels[index + 3] = 255;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
imgOut.updatePixels();
|
||||||
|
return imgOut;
|
||||||
|
}
|
||||||
|
|
||||||
|
function convolution(x, y, matrix, matrixSize, img)
|
||||||
|
{
|
||||||
|
let totalRed = 0;
|
||||||
|
let totalGrn = 0;
|
||||||
|
let totalBlu = 0;
|
||||||
|
|
||||||
|
let offset = floor(matrixSize/2);
|
||||||
|
|
||||||
|
for (let i=0; i<matrixSize; i++)
|
||||||
|
{
|
||||||
|
for(let j=0; j<matrixSize; j++)
|
||||||
|
{
|
||||||
|
let xloc = x + i - offset;
|
||||||
|
let yloc = y + j - offset;
|
||||||
|
|
||||||
|
let index = (img.width * yloc + xloc) * 4;
|
||||||
|
index = constrain(index, 0, img.pixels.length - 1);
|
||||||
|
totalRed += img.pixels[index + 0] * matrix[i][j];
|
||||||
|
totalGrn += img.pixels[index + 1] * matrix[i][j];
|
||||||
|
totalBlu += img.pixels[index + 2] * matrix[i][j];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return [totalRed, totalGrn, totalBlu];
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user