A p5.js-powered script to pixelate images

pixelate-v2.js

//Paste this code at editor.p5js.org and go ham (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

let img;
function preload() {
  img = loadImage('https://images.unsplash.com/photo-1504109586057-7a2ae83d1338?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8amFwYW58ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60');
}

const base = 8;
const gridSize = base * 8;
let coloredTiles = [];

let w, h;


function setup() {
  createCanvas(base * 128, base * 128);
  pixelDensity(1);
  image(img, 0, 0, width, height);
  loadPixels();
  updatePixels();
  w = width / gridSize
  h = height / gridSize
  compH = h / 3;


  let pixelColors = []


  let tileWidth = width / gridSize;
  let tileHeight = height / gridSize;
  let tileNumPix = tileWidth * tileHeight;

  stroke(255, 255, 255, 50);
  strokeWeight(0.5);
  noStroke();

  for (let x = 0; x < gridSize; x++) {
    let pixXStart = tileWidth * x;
    let pixXEnd = tileWidth * (x + 1);

    for (let y = 0; y < gridSize; y++) {

      let totalR = 0;
      let totalG = 0;
      let totalB = 0;
      let r, g, b = 0;

      let pixYStart = tileHeight * y;
      let pixYEnd = tileHeight * (y + 1);

      for (let pixX = pixXStart; pixX < pixXEnd; pixX++) {
        for (let pixY = pixYStart; pixY < pixYEnd; pixY++) {
          const index = (pixX + pixY * width) * 4;
          r = pixels[index + 0]
          g = pixels[index + 1]
          b = pixels[index + 2]
          a = pixels[index + 3]
          totalR += r;
          totalG += g;
          totalB += b;
        }
      }

      let avgR = totalR / tileNumPix;
      let avgG = totalG / tileNumPix;
      let avgB = totalB / tileNumPix;

      coloredTiles.push([avgR, avgG, avgB, 255])
    }
  }

}
function draw() {
  for (let x = 0; x < gridSize; x++) {
    for (let y = 0; y < gridSize; y++) {
      const index = y + x * gridSize;
      const col = coloredTiles[index];

      
        // color the whole thing at once
        fill(col)
        rect(x * w, y * h, w, h);
      
    }
  }
}

pixelate.js

//Paste this code at editor.p5js.org and go ham (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

function preload() {
  img = loadImage("https://images.unsplash.com/photo-1629492777122-b2b4e04f5be1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1740&q=80");
//replace this link with the link of whatever image you want to pixelate
}

function setup() {
  createCanvas(img.width, img.height);
  
  img.loadPixels();
  for (x = 0; x < img.width; x = x + 4) {
   for (y = 0; y < img.height; y = y + 4) {
      index = (floor(x) + floor(y) * img.width) * 4;
      red = img.pixels[index]
      blue = img.pixels[index + 1]
      green = img.pixels[index + 2]
      alpha = img.pixels[index + 3]
      //pixel_brightness = (red + blue + green) / 3
      //strokeWeight(9 * Math.random())
      strokeWeight(18)
      stroke(red, blue, green, alpha/(5 * Math.random()))
      //line(x + Math.random()*50,y ,x + 50,y + 50 * Math.random())
     square(x+4,y+4,4)
    }
}
}