# Color 2D texture with noise
**URL:** https://discourse.processing.org/t/color-2d-texture-with-noise/37049
**Category:** Coding Questions
**Created:** [May 23, 2022, 10:43pm UTC](https://discourse.processing.org/t/color-2d-texture-with-noise/37049 "2022-05-23T22:43:46Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@humano](https://discourse.processing.org/u/humano)
#### Post date: [May 23, 2022, 10:43pm UTC](https://discourse.processing.org/t/color-2d-texture-with-noise/37049/1 "2022-05-23T22:43:46Z")
Howdy! I am doing a background with noise adapting a code from [here](https://gorillasun.de/blog/introduction-to-perlin-noise-in-p5js-and-processing) and I would like to control color to do something as you can see on my pictures, but I don’t understand it as good as I need for that. I can get some crazy results changing values of the three rgb channels, but I can’t do a soft pink background, for example, or a light yellow and pink background, or another things that I want to do. Could you please help me with that? Thanks!
```auto
float t = 0;
float rez = 0.005;
size(1000,1000);
background(220);
noStroke();
for(float i = 0; i < height; i+=3){
for(float j = 0; j < width; j+=3){
float n = noise(i*rez,j*rez, t);
float n1 = noise(j*rez, t, i*rez);
float n2 = noise(t,j*rez,i*rez);
fill(n*0, n1*255, n2*255);
rect(i,j,3,3);
}
t += 0.0003;
}
```
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [May 23, 2022, 11:17pm UTC](https://discourse.processing.org/t/color-2d-texture-with-noise/37049/2 "2022-05-23T23:17:29Z")
Hello,
Consider using the HSB _colorMode()_ and vary the hue, saturation and brightness.
References:
- [Color / Processing.org](https://processing.org/tutorials/color)
- [Reference / Processing.org](https://processing.org/reference/#color)
Example using the hue:
```auto
float t = 0;
float rez = 0.005;
size(1000, 1000);
colorMode(HSB, 360, 100, 100);
background(220);
noStroke();
for(float i = 0; i < height; i+=3){
for(float j = 0; j < width; j+=3){
float n = noise(i*rez,j*rez, t);
//float n1 = noise(j*rez, t, i*rez);
//float n2 = noise(t,j*rez,i*rez);
//fill(n*0, n1*255, n2*255);
fill(n*360, 100, 100);
rect(i, j, 3, 3);
}
t += 0.0003;
}
```
`:)`
---
### Author:  [@humano](https://discourse.processing.org/u/humano)
#### Post date: [May 23, 2022, 11:52pm UTC](https://discourse.processing.org/t/color-2d-texture-with-noise/37049/3 "2022-05-23T23:52:59Z")
Thanks! Is not a bad idea because It makes so easy get light colors changing brighness. But changing hue does not work so good because It gives you two or three colors that are not always the colors that you want to use on your canvas. You always have to use three nearby colors in color wheel, that is a limitation too hard. How could I win more control choosing the palette?
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [May 24, 2022, 2:00am UTC](https://discourse.processing.org/t/color-2d-texture-with-noise/37049/4 "2022-05-24T02:00:19Z")
Hello,
Make use of the `map()` function.
```auto
float hue = map(n1, 0, 1, 0, 60);
stroke(hue, 50, 100);
point(i, j);
```
```auto
float hue = map(n1, 0, 1, 60, 120);
stroke(hue, 50, 100);
point(i, j);
```
`:)`
---
### Author:  [@humano](https://discourse.processing.org/u/humano)
#### Post date: [May 24, 2022, 4:03pm UTC](https://discourse.processing.org/t/color-2d-texture-with-noise/37049/5 "2022-05-24T16:03:36Z")
Thanks! Supposing that I can drive that, how can I get transparency for new elements with HSB ?
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [May 24, 2022, 4:12pm UTC](https://discourse.processing.org/t/color-2d-texture-with-noise/37049/6 "2022-05-24T16:12:11Z")
> [@humano](#):
>
> how can I get transparency for new elements with HSB ?
Hello,
Take a look here:
> **[color / Reference](https://processing.org/reference/color_datatype.html)**
>
> Datatype for storing color values. Colors may be assigned with get() and color() or they may be specified directly using hexadecimal notation such as #FFCC00 or 0xFFFFCC00.…
There is a link in there to _bit shifting_ in the reference which helps to manipulate the values.
And here:
> **[alpha() / Reference](https://processing.org/reference/alpha_.html)**
>
> Extracts the alpha value from a color.
`:)`