creative-coding/2/sketch.js

const filterSketch = function (p) {
  let img;
  p.setup = function () {
    const sketch = p.createCanvas(400, 400);
    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, 400, 400);
    for (let px = 0; px < img.pixels.length; px += 4) {
      img.pixels[px] += 50;
    }
    img.updatePixels();
    p.noLoop();
  };
};

const sortSketch = function (p) {
  let img;
  p.setup = function () {
    const sortSketch = p.createCanvas(400, 400);
    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, 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] * 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;
    }
    img.updatePixels();
    img.filter(p.BLUR, 100);
    p.image(img, 0, 0, 400, 400);
    p.noLoop();
  };
};

const resizeSketch = function (p) {
  let img;
  p.setup = function () {
    const sketch = p.createCanvas(400, 400);
    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);
    // Keep looping since resizing depends on mouse movement
  };
};

const evenOddPixelSketch = function (p) {
  let img;
  let img2;
  let finImg;
  p.setup = function () {
    const sketch = p.createCanvas(400, 400);
    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, 400, 400);
    p.noLoop();
  };
};

const imageGlitchSketch = function (p) {
  let img;

  p.setup = function () {
    const sketch = p.createCanvas(400, 400);
    sketch.parent("imageGlitchSketch");
  };

  p.preload = function () {
    img = p.loadImage("assets/image3.jpg");
    p.pixelDensity(1);
  };

  p.draw = function () {
    img.loadPixels();
    const glitchAmount = Math.floor(p.random(5, 20));

    for (let y = 0; y < img.height; y++) {
      if (p.random() < 0.2) {
        const offset = Math.floor(p.random(-glitchAmount, glitchAmount));
        for (let x = 0; x < img.width; x++) {
          const index = (y * img.width + x) * 4;
          const shiftedIndex = (y * img.width + ((x + offset + img.width) % img.width)) * 4;

          img.pixels[shiftedIndex] = img.pixels[index];
          img.pixels[shiftedIndex + 1] = img.pixels[index + 1];
          img.pixels[shiftedIndex + 2] = img.pixels[index + 2];
          img.pixels[shiftedIndex + 3] = img.pixels[index + 3];
        }
      }
    }

    img.updatePixels();
    p.image(img, 0, 0, 400, 400);
    p.noLoop();
  };
};

p5Filter = new p5(filterSketch);
p5Sort = new p5(sortSketch);
p5Resize = new p5(resizeSketch);
p5EvenOdd = new p5(evenOddPixelSketch);
p5Glitch = new p5(imageGlitchSketch);