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();
  };
};

//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(resizeSketch);
p5Filter = new p5(evenOddPixelSketch);