How to get this texture?

[goldorak]

Hello,
I’m trying to work on adding more textures to my work.
I’d like to understand how this type of texture can be achieved.
Thanks for your help.

[glv]

Hello,

Start here:
reference | p5.jshttps://p5js.org/reference/#/p5.Image/pixels

You will have to create a random color in the inner loop:
https://p5js.org/reference/#/p5/color
https://p5js.org/reference/#/p5/random

Try this directly in the references:

You can edit and run the code in the references!
You may need to put some code in setup() to run in the p5.js editor.

Integrate it with this:
https://p5js.org/reference/#/p5/texture

And voila!

You will have to explore color and random() to achieve what you want.

:)

[goldorak]

Thank you very much for your detailed feedback.
this is exactly the result I was trying to achieve!

[jb4x]

To build on top of @glv’s answer, you can use a gaussian distribution to control the outcome:

float sd = 0.3;
float mean = 0.5;

void setup() {
  size(500, 500);
  
  loadPixels();
  for(int i = 0; i < pixels.length; i++) {  
    float grey = (randomGaussian() * sd) + mean; // value between 0 and 1 (they can be higher or lower but are expected to be between 0 and 1)
    pixels[i] = color(255 * grey);
  }
  updatePixels();
}

If you increase the standard deviation (sd) you increase the contrast and vice versa.
The mean value control the general darkness/brightness of the outcome.

Some exemples:

mean:0.5, sd:0.33

mean:0.5, sd:0.02

mean:0.8, sd:0.02

EDIT: I did not see you were working on p5.js. Here’s the code sample from above for p5.js:

let sd = 0.3;
let mean = 0.5;

function setup() {
  createCanvas(500, 500);
  
  loadPixels();
  print(pixels.length);
  for(let i = 0; i < pixels.length; i++) {  
    let grey = (randomGaussian() * sd) + mean;
    pixels[i] = 255 * grey;
    pixels[i+1] = 255 * grey;
    pixels[i+2] = 255 * grey;
    pixels[i+3] = 255;
    i+=3;
  }
  updatePixels();
}

[jafal]

Fun Programming - Change pixels using the pixels array

[glv]

Hello,

There is a The Pixel Array tutorial here for p5.js:

11.3: The Pixel Array - p5.js Tutorial

There are differences between Processing JAVA and p5.js using the pixel array.

More details in the p5.js references.

set() made it simple but is also much slower.

:)