diff --git a/3/sketch.js b/3/sketch.js index 762f8ae..68ece52 100644 --- a/3/sketch.js +++ b/3/sketch.js @@ -20,48 +20,45 @@ const filterSketch = function (p) { }; }; -// 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 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; @@ -118,39 +115,7 @@ const evenOddPixelSketch = function (p) { }; }; -//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); +p5Filter = new p5(sortSketch); p5Filter = new p5(resizeSketch); p5Filter = new p5(evenOddPixelSketch);