// lol i fixed it to also do color and now its actually slower but cool experiment ig

​

let d, xpx, ypx, img;

const blurSize = 16;

​

let frameCounter = 0;

let bg;

let scroll = 0;

let pmil = 0;

​

function preload(){

  bg = loadImage("https://raw.githubusercontent.com/davidtiemstra/vcd2023/main/selected%20images/18.jpg")

}

function setup() {

  createCanvas(510, 255);

  d = pixelDensity();

  xpx = 4 * width * d;

  ypx = height * d

  img = xpx * ypx;  

}

​

function draw() {

  // draw graphics

  background(220);

  image(bg,0,0,width)

  circle(mouseX,mouseY,100);

  // apply box blur

  if(scroll%3==1){ 

    boxBlur();

  }

  if(scroll%3==2){ 

    filter(BLUR,blurSize/2);

  }

  frameCounter+= millis() - pmil;

  if(frameCounter>1000){

    print(frameRate());

    frameCounter = 0;

  }

  pmil = millis();

}

​

function boxBlur(){

  loadPixels();

  let newPixels = [];

  for (let i = 0; i < img; i+=4) {

    for (let l=0; l<3;l++){

      let avg = 0

      for(let j=-blurSize/2;j<blurSize/2;j++){

        for(let k=-blurSize/2;k<blurSize/2;k++)

          avg += pixels[i + l + j*4 + k*xpx];

      }

      avg = avg/(blurSize**2);

      newPixels.push(avg)

    }

    newPixels.push(255)

  }

  for(let i = 0; i < img; i++){

    pixels[i] = newPixels[i];

  }

  updatePixels();

}

​

function mouseClicked(){

  scroll++;

}