let filteredImg;

​

function setup() {

  createCanvas(400, 400);

  let fileInput = createFileInput(handleFile);

  fileInput.position(20, 20);

}

​

function draw() {

  background(255);

  if (filteredImg) {

    image(filteredImg, 0, 0, width, height);

  }

}

​

function handleFile(file) {

  if (file.type === 'image') {

    img = createImg(file.data, 'uploaded image', '', loadImageCallback);

    console.log(file.data);

    img.hide();

  } else {

    alert('Please upload an image file (e.g., JPG or PNG).');

  }

}

​

function loadImageCallback() {

  filteredImg = createImage(img.width, img.height);

  img.loadPixels();

  filteredImg.loadPixels();

​

  // Apply edge detection (you can adjust the parameter)

  let edgeThreshold = 40;

  for (let x = 1; x < img.width - 1; x++) {

    for (let y = 1; y < img.height - 1; y++) {

      let c = convolution(x, y, [[-1, -1, -1], [-1, 8, -1], [-1, -1, -1]]);

      let index = (x + y * img.width) * 4;

      filteredImg.pixels[index] = c;

      filteredImg.pixels[index + 1] = c;

      filteredImg.pixels[index + 2] = c;

      filteredImg.pixels[index + 3] = 255;

    }

  }

  filteredImg.updatePixels();

​

  // Apply color quantization (you can adjust the number of colors)

  filteredImg.filter(POSTERIZE, 4);

}

​

function convolution(x, y, matrix) {

  let sum = 0;

  for (let i = -1; i <= 1; i++) {

    for (let j = -1; j <= 1; j++) {

      let index = (x + i + (y + j) * img.width) * 4;

      let factor = matrix[i + 1][j + 1];

      sum += img.pixels[index] * factor;

    }

  }

  return constrain(sum, 0, 255);

}

​