Color Gradients in Perlin Noise

thedurf18

I'm trying to add color to my Perlin Noise sketch, but having trouble. It's only in gray scale. I know I have to map the colors from 0 to 1, since those are the only values that noise( ) can understand. Here's my code:

float inc = 0.06;
int density = 4;
float znoise = 0.0;

void setup(){
  size(500, 500);
  noStroke();
}

void draw(){
  float xnoise = 0.0;
  float ynoise = 0.0;
  for(int y = 0; y < height; y += density){
    for(int x = 0; x < width; x += density){
      float n = noise(xnoise, ynoise, znoise) * 256;
      fill(n);
      rect(y, x, density, density);
      xnoise += inc;
    }
    xnoise = 0;
    ynoise += inc;
  }
  znoise += inc;
}

Then I found this code in an article that helps you add color gradients to Perlin Noise, but it's in C# language. If anybody can translate it, I'd greatly appreciate it. If not, is there a way you know of that can add color to my Perlin Noise sketch? Thanks for any help.

Color GetColor(Color gradientStart, Color gradientEnd, float t)
{
    float u = 1 - t;

    Color color = Color.FromArgb(
       255,
       (int)(gradientStart.R * u + gradientEnd.R * t),
       (int)(gradientStart.G * u + gradientEnd.G * t),
       (int)(gradientStart.B * u + gradientEnd.B * t));

    return color;
}

Color[][] MapGradient(Color gradientStart, Color gradientEnd, float[][] perlinNoise)
{
   int width = perlinNoise.Length;
   int height = perlinNoise[0].Length;

   Color[][] image = GetEmptyArray(width, height);

   for (int i = 0; i < width; i++)
   {
      for (int j = 0; j < height; j++)
      {
         image[i][j] = GetColor(gradientStart, gradientEnd, perlinNoise[i][j]);
      }
   }

   return image;
}

kfrajer

Combine noise and lerpColor: https://processing.org/reference/lerpColor_.html

Also check: https://processing.org/reference/colorMode_.html

Examples: https://processing.org/examples/radialgradient.html
https://processing.org/examples/lineargradient.html

Kf

jeremydouglass

You want fill(n) to give you a color of the rainbow.

Adding colorMode(HSB) to setup() (or where-ever) will do that for you. In particular, you are multiplying your noise by 256, so colorMode(HSB, 256);

Now display a fully saturated, fully bright color with fill(n, 255, 255);

float inc = 0.06;
int density = 4;
float znoise = 0.0;

void setup() {
  size(500, 500);
  noStroke();
  colorMode(HSB, 256);
  frameRate(4);
}

void draw() {
  background(0);
  float xnoise = 0.0;
  float ynoise = 0.0;
  for (int y = 0; y < height; y += density) {
    for (int x = 0; x < width; x += density) {
      float n = noise(xnoise, ynoise, znoise) * 256;
      fill(n, 255, 255);
      rect(y, x, density, density);
      xnoise += inc;
    }
    xnoise = 0;
    ynoise += inc;
  }
  znoise += inc;
}

thedurf18

Thank you!

thedurf18

lala