The tips to make the Perlin noise creative coding works more interesting.

If you are bored to make creative coding work with the Perlin noise, why don't you try the tips in this article.
I promise you can make something interesting.

In an ordinary way to make something with 2D noise.

👉 この記事は日本語でも読めます。

Or like this 'map of leg hair' in an ordinary way.

I'll show you the tips to make something like this.

You can make 'map of leg hair' more artistic!

This article is for the people who made something with 'noise()' in the 'Processing' or the 'p5.js' before.
If you don't know much about 'noise()', please refer to this series.

📘 Come on! Feel the noise! Part 1
📘 Come on! Feel the noise! Part 2

Ordinary creative coding work with the Perlin noise.

Let me show you the ordinary creative coding painting using the Perlin noise.

I recommend you to use HSB color mode.
You can easily control the hue value, saturation, brightness in HSB color mode.

colorMode(HSB, 360, 100, 100, 100);
let pHue = initHue + noise(n02) * hueStep;
let pSat = noise(10, n01, n02) * 100;
let pBri = noise(20, n01, n02) * 100;
fill(pHue % 360, pSat, pBri, 100);

Let's try to change the hue, saturation, brightness values with the Perlin noise.

const w = 570;
const h = 360;
const wDiv = 285;
const hDiv = 180;
const nStep = 0.005;

function setup() {
  createCanvas(w, h);
  colorMode(HSB, 360, 100, 100, 100);
  noLoop();
}

function draw() {

  let cellW = w / wDiv;
  let cellH = h / hDiv;
  let baseHue = random(360);

  background(0, 0, 0, 100);
  noStroke();

  for (let x = 0; x < w; x += cellW) {
    let nX = x * nStep;
    for (let y = 0; y < h; y += cellH) {
      let nY = y * nStep;

      let nValH = noise(10, nX, nY);
      let nValS = noise(20, nX, nY);
      let nValB = noise(30, nX, nY);
      let nHue = (baseHue + nValH * 240) % 360;
      let nSat = 30 + 60 * nValS;
      let nBri = 20 + 80 * nValB;

      fill(nHue, nSat, nBri, 100);
      rect(x, y, cellW, cellH);
    }
  }

}

function mouseClicked() {
  let dt = new Date();
  noiseSeed(dt.getTime());
  redraw();
}

You can control the smoothness with the rate of the change of parameter value of the Perlin noise.

const nStep = 0.002;

const nStep = 0.008;

I'll show you the tips with this code as the base.

A little ingenuity into parameters.

I used 2D noise like this.

let nValH = noise(10, nX, nY);
let nValS = noise(20, nX, nY);
let nValB = noise(30, nX, nY);

※I used '10','20','30' to get a different noise value set. It looks like a 3D noise at a glance, but it's a 2D noise substantially.

I put one more parameter 'nP' and calculate 'nP' with 'noise()'. It's a nested noise.

let nP = noise(nX, nY);
let nValH = noise(10 + nP, nX, nY);
let nValS = noise(30 + nP, nX, nY);
let nValB = noise(40 + nP, nX, nY);

And multiply to get more stronger change.

let nP = noise(nX, nY) * 5;

It becomes a little bit interesting, isn't it?

Devise the parameter calculation.

You can make an interesting painting by changing the parameter calculation of the Perlin noise.

let nP = noise(nX + nY) * 5;

let nP = noise(nX * nY) * 5;

let nP = noise(nX * nX + nY * nY) * 5;

Rave on with trigonometric function.

It's fun to use trigonometric function as the parameter.

let nP = (cos(nX * 2) + sin(nY)) * 5;

let nP = cos(nX * sin(nY * 2.0)) * 3;

Form some shape with the distance function.

let nP = sin(dist(x, y, w * 0.5, h * 0.5) / w * HALF_PI) * 5;

Concentric cirlce.

let d = dist(x, y, w * 0.5, h * 0.5);
let dx = cos(PI * d / w) * w;
let dy = sin(PI * d / h) * h;
let nP = dist(x, y, dx, dy) * nStep * 5;

Swirl.

let dx = x;
let dy = (sin(x / w * PI * 3) * 0.2 * x / w + 0.5) * h;
let nP = dist(x, y, dx, dy) * nStep * 3;

Wave

let dx = constrain(x, 0, w * 0.7);
let dy = (sin(x / w * PI * 5) * 0.2 * (1 - x / w) + 0.5) * h;
let nP = dist(x, y, dx, dy) * nStep * 3;

Stopping wave in the half way.

You could devise the Perlin noise parameter more.

I've shown you the various picture with the devised parameters of the Perlin noise.

With these tips, you can make some more interesting creative coding works than I made.

Please show me your fine works. Thank you.