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");
    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) => parseInt(a[0]) - parseInt(b[0]));
    img.pixels = [];
    for (pixel of pixelArray) {
      img.pixels.push(...pixel);
    }
    console.log(img.pixels);

    img.updatePixels();
  };
};
//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);