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

The creative coding work with the Perlin noise.

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.

The ordinary picture with the 2D noise.

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

The ordinary picture of the line with the 2D noise.

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

The brindled noise field.
The wavy noise field.
The noise field like a ripple.

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

The noise field of concentric circle.

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


Changing the hue, saturation, brightness values with the Perlin noise.

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


const nStep = 0.002;

Changing the hue, saturation, brightness values with the Perlin noise.


const nStep = 0.008;

Changing the hue, saturation, brightness values with the Perlin noise.

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

The picture with the nested noise.

And multiply to get more stronger change.


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

The picture with the nested noise.

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;

The noise field with the diagonal line.


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

The noise field with the curved line.


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

The noise field with the concentric circle.

Rave on with trigonometric function.

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


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

The noise field with the swirl.


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

The noise field with the ripple.

Form some shape with the distance function.


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



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;



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;



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;


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.