 # How to get this texture?

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.

1 Like

Hello,

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.

`:)`

2 Likes

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

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();
}
``````
2 Likes
1 Like

Hello,

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