How to add noise to the image being drawn

edited November 2015 in How To...


I have a number of visualisations being drawn by my sketch and want a way to grab the pixels that are being drawn and add noise / assign a random value for the alpha channel but maintain the same colour. I have tried using getPixels() but I can't keep the original color no matter what I try.

Any suggestions would be great!

loadPixels(); for ( int i=0; i<pixels.length; i+=1) { if (pixels[i] > color( 1 )) { pixels[i] = color(random(360)); } } updatePixels();

Screen Shot 2015-11-30 at 18.43.32


  • it might be easier to add the noise before you draw, not as an after thought

    when you stick with the after thought ; maybe noSmooth() helps you since it kills the anti-alias which might bug your pixels colorwise

  • Look at this line:

    pixels[i] = color(random(360));

    You're assigning a random gray value between 0 and 360 (which doesn't even make sense, since it should only go to 255).

    Instead, you need to use the color() function with 2 arguments: a gray and an alpha. Something like this:

    pixels[i] = color(pixels[i], random(255));

    Although, I'm not exactly sure what you hope to achieve by changing the alpha value of a grayscale pixel.

    More info available in the reference:

  • _vk_vk
    edited November 2015

    You can also use colorMode() to alter the range of the colors.

    Perhaps you need lerpColor().

    color from = pixels[i]'
    color noise = color(random(255), random(255), random(255));
    float amt = random(1);
    pixels[i] = lerpColor(from, noise, amt);
  • Didn't explain myself quite right, the image i have looks like the first and continually changes, I want to break up the pattern to look noisy, so it also needs to change, but maintaining the original colour.

    There are a number of HSB colours selected from an array so it has to read the colour values from the pixels. I was expecting pixels[i] = color(pixels[i], random(255)); to work but it just produces a white image...

    Screen Shot 2015-11-30 at 21.42.22 after

  • _vk_vk
    edited December 2015

    +- this:

    //tested in 2.2.1
    PImage img;
    //max mix value. 
    //Smaller numbers =  pixels closer to original color
    final float MAX_MIX = 0.17;
    //probability of changed pixels
    //0.5 = 50% chance of a pixel to be changed
    //0.0 no pixel changed
    //1.0 all pixels changed
    final float TRESH = 0.35;
    void setup() {
      size(640, 360);
      img = loadImage("http:"+"//");
    void draw() {
      image(img, 0, 0);
      for (int i = 0; i < pixels.length; i++) {
        // a random shade of grey to mix with
        color n = color(random(255));
        // original pixel color  
        color c = pixels[i];
        // mixed color
        // a random amount limited by constant MAX_MIX
        color result = lerpColor(c, n, random(MAX_MIX));
        //to change or not to change?
        pixels[i] = random(1) <= TRESH? result:c;
      // magnifier
      PImage zoom = get(mouseX-6, mouseY-15, 12, 12);
      image(zoom, 0, height-96, 96, 96);
      stroke(0, 255, 255, 100);
      rect(mouseX-6, mouseY-16, 12, 12);
Sign In or Register to comment.