121 lines
3.3 KiB
JavaScript
121 lines
3.3 KiB
JavaScript
const filterSketch = function (p) {
|
|
let img;
|
|
p.setup = function () {
|
|
const sketch = p.createCanvas(p.windowWidth / 4, p.windowHeight / 4);
|
|
sketch.parent("filterSketch");
|
|
};
|
|
|
|
p.preload = function () {
|
|
img = p.loadImage("assets/image.png");
|
|
p.pixelDensity(1);
|
|
};
|
|
|
|
p.draw = function () {
|
|
img.loadPixels();
|
|
p.image(img, 0, 0, p.windowHeight / 4, p.windowHeight / 4);
|
|
for (let px = 0; px < img.pixels.length; px += 4) {
|
|
img.pixels[px] += 50;
|
|
}
|
|
img.updatePixels();
|
|
};
|
|
};
|
|
|
|
const sortSketch = function (p) {
|
|
let img;
|
|
p.setup = function () {
|
|
const sortSketch = p.createCanvas(p.windowWidth / 4, p.windowHeight / 4);
|
|
sortSketch.parent("sortSketch");
|
|
};
|
|
p.preload = function () {
|
|
img = p.loadImage("assets/image2.jpg");
|
|
p.pixelDensity(1);
|
|
};
|
|
p.draw = function () {
|
|
img.loadPixels();
|
|
p.image(img, 0, 0, 1920, 1080);
|
|
let pixelArray = [];
|
|
for (let px = 0; px < img.pixels.length; px += 4) {
|
|
pixelArray.push([
|
|
img.pixels[px],
|
|
img.pixels[px + 1],
|
|
img.pixels[px + 2],
|
|
img.pixels[px + 3],
|
|
]);
|
|
}
|
|
pixelArray.sort((a, b) => a[0] - b[0]);
|
|
for (let px = 0; px < img.pixels.length; px += 4) {
|
|
img.pixels[px] = (pixelArray[px / 4][0] * 9 + img.pixels[px]) / 10;
|
|
img.pixels[px + 1] =
|
|
(pixelArray[px / 4][1] * 9 + img.pixels[px + 1]) / 10;
|
|
img.pixels[px + 2] =
|
|
(pixelArray[px / 4][2] * 9 + img.pixels[px + 2]) / 10;
|
|
img.pixels[px + 3] =
|
|
(pixelArray[px / 4][3] * 9 + img.pixels[px + 3]) / 10;
|
|
}
|
|
console.log(img.pixels);
|
|
img.updatePixels();
|
|
img.filter(p.BLUR, 100);
|
|
p.image(img, 0, 0, 1920, 1080);
|
|
p.noLoop();
|
|
};
|
|
};
|
|
|
|
const resizeSketch = function (p) {
|
|
let img;
|
|
p.setup = function () {
|
|
const sketch = p.createCanvas(p.windowWidth / 4, p.windowHeight / 4);
|
|
sketch.parent("resizeSketch");
|
|
};
|
|
|
|
p.preload = function () {
|
|
img = p.loadImage("assets/image.png");
|
|
p.pixelDensity(1);
|
|
};
|
|
|
|
p.draw = function () {
|
|
p.background(255);
|
|
p.image(img, 0, 0, p.mouseX / 8, p.mouseX / 8);
|
|
};
|
|
};
|
|
|
|
const evenOddPixelSketch = function (p) {
|
|
let img;
|
|
let img2;
|
|
let finImg;
|
|
p.setup = function () {
|
|
const sketch = p.createCanvas(p.windowWidth / 2, p.windowHeight / 2);
|
|
sketch.parent("evenOddPixelSketch");
|
|
};
|
|
p.preload = function () {
|
|
img = p.loadImage("assets/image3.jpg");
|
|
img2 = p.loadImage("assets/image4.jpg");
|
|
finImg = p.createImage(3840, 2160);
|
|
p.pixelDensity(1);
|
|
};
|
|
p.draw = function () {
|
|
img.loadPixels();
|
|
img2.loadPixels();
|
|
finImg.loadPixels();
|
|
for (let i = 0; i < img.pixels.length; i += 4) {
|
|
if (i % 8 == 0) {
|
|
finImg.pixels[i] = img.pixels[i];
|
|
finImg.pixels[i + 1] = img.pixels[i + 1];
|
|
finImg.pixels[i + 2] = img.pixels[i + 2];
|
|
finImg.pixels[i + 3] = img.pixels[i + 3];
|
|
} else {
|
|
finImg.pixels[i] = img2.pixels[i];
|
|
finImg.pixels[i + 1] = img2.pixels[i + 1];
|
|
finImg.pixels[i + 2] = img2.pixels[i + 2];
|
|
finImg.pixels[i + 3] = img2.pixels[i + 3];
|
|
}
|
|
}
|
|
finImg.updatePixels();
|
|
p.image(finImg, 0, 0, p.windowWidth / 2, p.windowHeight / 2);
|
|
noLoop();
|
|
};
|
|
};
|
|
|
|
p5Filter = new p5(filterSketch);
|
|
p5Filter = new p5(sortSketch);
|
|
p5Filter = new p5(resizeSketch);
|
|
p5Filter = new p5(evenOddPixelSketch);
|