andre/UoL
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add completed basic blur filter

Browse Source
This commit is contained in:
Lev
2021-08-02 19:10:39 -05:00
parent d96256c5c0
commit d9f483a1ae
6 changed files with 16028 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
CM2030 Graphics Programming/Week 15/4. Blur filter/assets/seaNettles.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

17
CM2030 Graphics Programming/Week 15/4. Blur filter/index.html Normal file
View File

@ -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>

3031
CM2030 Graphics Programming/Week 15/4. Blur filter/libraries/p5.dom.js Normal file
View File

File diff suppressed because it is too large Load Diff

36
CM2030 Graphics Programming/Week 15/4. Blur filter/libraries/p5.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

12873
CM2030 Graphics Programming/Week 15/4. Blur filter/libraries/p5.sound.js Normal file
View File

File diff suppressed because it is too large Load Diff

71
CM2030 Graphics Programming/Week 15/4. Blur filter/sketch.js Normal file
View File

@ -0,0 +1,71 @@
let imgIn;
let matrix =[
[1/9, 1/9, 1/9],
[1/9, 1/9, 1/9],
[1/9, 1/9, 1/9]
];
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(blurFilter(imgIn), imgIn.width + 20, 0);
noLoop();
}
function blurFilter(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];
}