How to get this texture?

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.

1 Like


Start here:
reference | p5.js

You will have to create a random color in the inner loop:

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:

And voila!


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



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

1 Like

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);
  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);

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
sd_0.33 - mean_0.5

mean:0.5, sd:0.02
sd_0.02 - mean_0.5

mean:0.8, sd:0.02
sd_0.02 - mean_0.8

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);
  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;

Fun Programming - Change pixels using the pixels array

1 Like


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

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.


1 Like