# How to get this texture?

**URL:** <https://discourse.processing.org/t/how-to-get-this-texture/32157>\
**Category:** Project Guidance\
**Created:** [September 8, 2021, 8:27pm UTC](https://discourse.processing.org/t/how-to-get-this-texture/32157 "2021-09-08T20:27:43Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![goldorak](https://avatars.discourse-cdn.com/v4/letter/g/dec6dc/32.png) [@goldorak](https://discourse.processing.org/u/goldorak)\
**Post date:** [September 8, 2021, 8:27pm UTC](https://discourse.processing.org/t/how-to-get-this-texture/32157/1 "2021-09-08T20:27:43Z")

</div>

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.

 ![Screenshot 2021-09-08 at 22.24.49](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/969f48a917e039e2250e2d14fad3f0e16f0fa724.jpeg)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 9, 2021, 12:14am UTC](https://discourse.processing.org/t/how-to-get-this-texture/32157/2 "2021-09-09T00:14:43Z")

</div>

Hello,

Start here:  
[reference | p5.js](https://p5js.org/reference/#/p5.Image/pixels)[https://p5js.org/reference/#/p5.Image/pixels](https://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/color)  
[https://p5js.org/reference/#/p5/random](https://p5js.org/reference/#/p5/random)

Try this directly in the references:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/28c029abf98924ba9530db6912e884d6cda25bca.png)

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](https://p5js.org/reference/#/p5/texture)

And voila!

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/24b56b057e01b9a6f2f16d8ffc9aa294c57aa73f.png)

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

`:)`

---

<div class="post-metadata">

**Author:** ![goldorak](https://avatars.discourse-cdn.com/v4/letter/g/dec6dc/32.png) [@goldorak](https://discourse.processing.org/u/goldorak)\
**Post date:** [September 10, 2021, 3:05pm UTC](https://discourse.processing.org/t/how-to-get-this-texture/32157/3 "2021-09-10T15:05:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 10, 2021, 5:56pm UTC](https://discourse.processing.org/t/how-to-get-this-texture/32157/4 "2021-09-10T17:56:21Z")

</div>

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

```auto
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  
 ![sd_0.33 - mean_0.5](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/73ebd2bd6086fa515c0fdc791c01e19d82c86500.jpeg)

mean:0.5, sd:0.02  
 ![sd_0.02 - mean_0.5](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/59fa8aba5b2cac3c898d5462fc12ead96b3c8821.png)

mean:0.8, sd:0.02  
 ![sd_0.02 - mean_0.8](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/73f49a8b8451c2454a282544f73329983fe9c15b.png)

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

```auto
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();
}

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [September 11, 2021, 4:32pm UTC](https://discourse.processing.org/t/how-to-get-this-texture/32157/5 "2021-09-11T16:32:59Z")

</div>

[Fun Programming - Change pixels using the pixels array](https://funprogramming.org/88-Change-pixels-using-the-pixels-array.html)

 ![Screenshot_2021-09-11-20-38-08-148](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5869046b0e68ca08c2a74b83c6f435a968c495be.jpeg)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 12, 2021, 10:00am UTC](https://discourse.processing.org/t/how-to-get-this-texture/32157/6 "2021-09-12T10:00:28Z")

</div>

Hello,

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

[![](https://img.youtube.com/vi/nMUMZ5YRxHI/hqdefault.jpg "11.3: The Pixel Array - p5.js Tutorial") ](https://www.youtube.com/watch?v=nMUMZ5YRxHI)

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.

`:)`