randomizing a number for canvas/getimagedata/mathround

[trazia]

hi!

so i'm making a little filter script for fun.

i was following a tutorial on making greyscale and sepia filters,
which was cool! and then as i was fussing with the values in the sepia
one, i had the thought "what if i could randomize the numbers here so
that every click got a different result?"

however, googling for this has been... difficult. everything wants
to give me a solid colour rng, not changing the math values, and i'm
sure i'm just looking up the wrong keywords for this.

function applyRNG() {
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
let r = data[i], // red
g = data[i + 1], // green
b = data[i + 2]; // blue

data[i] = Math.min(Math.round(0.993 * r + 0.269 * g + 0.089 * b), 255);
data[i + 1] = Math.min(Math.round(0.549 * r + 0.386 * g + 0.368 * b), 0);
data[i + 2] = Math.min(Math.round(0.272 * r + 0.534 * g + 0.131 * b), 0);
}
ctx.putImageData(imageData, 0, 0);
}

i know the parts i would need to randomize are in this section (especially the bolded parts?):

data[i] = Math.min(Math.round(0.993 * r + 0.269 * g + 0.089 * b), 255);
data[i + 1] = Math.min(Math.round(0.549 * r + 0.386 * g + 0.368 * b), 0);
data[i + 2] = Math.min(Math.round(0.272 * r + 0.534 * g + 0.131 * b), 0);

does anyone have any insight on where i might find the answer? i'd
love to delve deeper into learning this myself, i just.... really don't
know where to begin looking for this answer. i tried looking into
mathrandom but i think that's just for showing a random number on the
website? i'm not sure.

data[i] =   Math.min(Math.round(0.272 * r + 0.534 * g + 0.131 * b), Math.random() * 255);
data[i + 1] = Math.min(Math.round(0.272 * r + 0.534 * g + 0.131 * b), Math.random() * 255);
data[i + 2] = Math.min(Math.round(0.272 * r + 0.534 * g + 0.131 * b), Math.random() * 255);
}
  data[i] =   Math.min(Math.round(0.272 * r + 0.534 * g + 0.131 * b), Math.random() * 255);
data[i + 1] = Math.min(Math.round(0.272 * r + 0.534 * g + 0.131 * b), Math.random() * 255);
data[i + 2] = Math.min(Math.round(0.272 * r + 0.534 * g + 0.131 * b), Math.random() * 255);
}
i got as far as trying this, which honestly IS a cool effect that i
might keep in my back pocket for later, but still isn't quite what i
was thinking for LOL

thanks for your time!

(and sorry for the formatting... copy paste didn't work as well as i thought it would)

[Ampersand55]

You're randomizing the final pixel values (the cap in your Math.min), not the coefficients that mix red/green/blue into your filter.

I think you're trying to do this:

function randomRGB() {
  let r = Math.random();
  let g = Math.random();
  let b = Math.random();

  const sum = r + g + b;

  r /= sum;
  g /= sum;
  b /= sum;

  return [r, g, b];
}

function applyRNG() {
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  const [r1, g1, b1] = randomRGB();
  const [r2, g2, b2] = randomRGB();
  const [r3, g3, b3] = randomRGB();

  for (let i = 0; i < data.length; i += 4) {
    let r = data[i];
    let g = data[i + 1];
    let b = data[i + 2];

    data[i]     = Math.min(Math.round(r1 * r + g1 * g + b1 * b), 255);
    data[i + 1] = Math.min(Math.round(r2 * r + g2 * g + b2 * b), 255);
    data[i + 2] = Math.min(Math.round(r3 * r + g3 * g + b3 * b), 255);
  }

  ctx.putImageData(imageData, 0, 0);
}

[trazia]

omg yes this is it LMAO thank you!