101 lines
2.5 KiB
JavaScript
101 lines
2.5 KiB
JavaScript
const filterSketch = function (p) {
|
|
let img;
|
|
p.setup = function () {
|
|
const filterSketch = p.createCanvas(p.windowWidth, p.windowHeight);
|
|
filterSketch.parent("filterSketch");
|
|
};
|
|
|
|
p.preload = function () {
|
|
img = p.loadImage("assets/image.png");
|
|
p.pixelDensity(1);
|
|
};
|
|
|
|
p.draw = function () {
|
|
img.loadPixels();
|
|
p.image(img, 0, 0, 400, 400);
|
|
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, p.windowHeight);
|
|
sortSketch.parent("sortSketch");
|
|
};
|
|
|
|
p.preload = function () {
|
|
// img = p.loadImage("assets/image.png");
|
|
img = p.createImage(66, 66)
|
|
p.pixelDensity(1);
|
|
};
|
|
|
|
p.draw = function () {
|
|
img.loadPixels();
|
|
p.image(img, 0, 0, 400, 400);
|
|
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];
|
|
img.pixels[px + 1] = pixelArray[px / 4][1];
|
|
img.pixels[px + 2] = pixelArray[px / 4][2];
|
|
img.pixels[px + 3] = pixelArray[px / 4][3];
|
|
}
|
|
console.log(img.pixels);
|
|
for (let x = 0; x < img.width; x += 1) {
|
|
for (let y = 0; y < img.height; y += 1) {
|
|
img.set(x, y, 0);
|
|
}
|
|
}
|
|
console.log(img.pixels)
|
|
p.updatePixels();
|
|
p.image(img, 0, 0, 400, 400);
|
|
p.noLoop();
|
|
};
|
|
};
|
|
//let test = function (p) {
|
|
// let img
|
|
//
|
|
// p.setup = function(){
|
|
// const canvas = p.createCanvas(100, 100)
|
|
// }
|
|
//
|
|
// p.preload = function () {
|
|
// img = loadImage("assets/image.png")
|
|
// p.pixelDensity(1)
|
|
// }
|
|
//
|
|
//
|
|
// p.draw = function () {
|
|
// p.background(0)
|
|
// p.image(img, 100, 100)
|
|
// p.img.loadPixels()
|
|
// for (let y = 1 y < img.pixels.height y += 4) {
|
|
// imageArray[Math.round(img.width / y)][y - 1 % img.width / 4]
|
|
// tempArray = imageArray[Math.round(img.width / y)][y - 1 % img.width / 4]
|
|
// tempArray.red
|
|
// let red = img.pixels[i + 0]
|
|
// let green = img.pixels[i + 1]
|
|
// let blue = img.pixels[i + 2]
|
|
// let alpha = img.pixels[i + 3]
|
|
// }
|
|
// console.log(imageArray)
|
|
// p.img.updatePixels()
|
|
// }
|
|
//
|
|
//}
|
|
|
|
p5Filter = new p5(filterSketch);
|
|
p5Filter = new p5(sortSketch);
|