Connect the Perlin noise neatly using polar coordinates : Creative Coding Cooking in 3 Minutes


Here's a quick 3-minute read on creative coding. We'll be looking at how to draw diagrams with a smooth color changes along an arc.

Using an idea in this article, you can draw color changes that connect smoothly like this.

rainbow arc

 

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


Variable Perlin Noise with Angle

Use “Perlin Noise” if you want to change colors naturally.

The “smooth color change along the arc” could be achieved by varying the Perlin noise with the angle.


noise(angle);


ref.
Perlin noise : Wikipedia
noise() : p5js
noise() : Processing

ref. Come on! Feel the noise! Part 1

But I got a border...

However, if I use noise(angle) as usual, I get a border at angles 0 and 2PI (=360 degrees).

color gap

The arc comes full circle, and at the point of contact, noise(0) and noise(2PI), which would be completely different values, are next to each other, so the color changes abruptly and the boundary appears.

color gap by noise parameter

To solve this problem, for example, noise(sin(angle)) would result in noise(0) for both angles 0 and 2PI, and there would be no boundary. However, the change will now be periodic.

cyclic color

Well, now what?

One Idea Can Work.

To solve this problem, Masaki Yamabe (@masakick) san gave me a good idea.

[Translated] How about making two rounds of drawing, and then painting over the first round while gradually increasing the transparency of the second round?


Following this concept, I manipulated the transparency, and the results were successful.

  • In the first cycle, transparency goes from high to low.
  • In the second cycle, it goes from low to high.
no color gap example

(The change in transparency results in a slight loss of saturation and some dullness)

Controlling Perlin Noise with Polar Coordinates (Processing / p5js Code Examples)

Let's write code using noise(angle, radius) so that the color changes not only with angle but also with radius.

example image of rainbow color arc
example image of rainbow color arc
ref.
Polar coordinate system : Wikipedia
Cartesian coordinate system : Wikipedia

Processing


/*
 * Processing code example
 *
 * Connect the Perlin noise neatly using polar coordinates
 * Creative Coding Cooking in 3 Minutes
 *
 * @author @deconbatch
 * @version 0.1
 * @license CC0 1.0 https://creativecommons.org/publicdomain/zero/1.0/deed.ja
 * Processing 4.3.3
 * 2025.05.03
 */

float marginRate = 0.1;
int cirMax = 7;
int arcMax = 60;

void setup() {
  // Canvas setting
  size(800, 800);
  colorMode(HSB, 360.0, 100.0, 100.0, 100.0);
  background(0.0, 0.0, 90.0, 100.0);
  noFill();
  noStroke();

  // Calculates numerical values for drawing using specified parameters
  float margin = min(width, height) * marginRate;
  float cirWidth = (min(width, height) * 0.5 - margin * 2) / cirMax;
  float angleDiv = PI / arcMax;

  // Draw
  translate(width * 0.5, height * 0.5);
  strokeWeight(cirWidth * 0.8);
  strokeCap(SQUARE);
  ellipseMode(RADIUS); // Radius designation instead of diameter designation
  for (int cirCnt = 0; cirCnt < cirMax; cirCnt++) {
    for (float angle = 0; angle < TWO_PI * 2; angle += angleDiv) {
      float aHue = (noise(cirCnt * 0.1, angle * 0.2) * 720) % 360;
      float aAlp = 100 * sin(angle / 4); // KEY POINT
      stroke(aHue, 60.0, 60.0, aAlp);
      arc(
          0.0, 0.0,
          margin + cirWidth * cirCnt, margin + cirWidth * cirCnt,
          angle, angle + angleDiv
          );
    }
  }
}

p5js


/*
 * p5js code example
 *
 * Connect the Perlin noise neatly using polar coordinates
 * Creative Coding Cooking in 3 Minutes
 *
 * @author @deconbatch
 * @version 0.1
 * @license CC0 1.0 https://creativecommons.org/publicdomain/zero/1.0/deed.ja
 * p5js 2.0.0
 * 2025.05.03
 */

const w = 800;
const h = w;
const marginRate = 0.1;
const cirMax = 7;
const arcMax = 60;

function setup() {
  // Canvas setting
  createCanvas(w, h);
  colorMode(HSB, 360, 100, 100, 100);
  background(0, 0, 90, 100);
  noFill();
  noStroke();

  // Calculates numerical values for drawing using specified parameters
  const margin = min(w, h) * marginRate;
  const cirWidth = (min(w, h) * 0.5 - margin * 2) / cirMax;
  const angleDiv = PI / arcMax;

  // Draw
  translate(w * 0.5, h * 0.5);
  strokeWeight(cirWidth * 0.8);
  strokeCap(SQUARE);
  ellipseMode(RADIUS); // Radius designation instead of diameter designation
  for (let cirCnt = 0; cirCnt < cirMax; cirCnt++) {
    for (let angle = 0; angle < TWO_PI * 2; angle += angleDiv) {
      let aHue = (noise(cirCnt * 0.1, angle * 0.2) * 720) % 360;
      let aAlp = 100 * sin(angle / 4); // KEY POINT
      stroke(aHue, 60, 60, aAlp);
      arc(
          0, 0,
          margin + cirWidth * cirCnt, margin + cirWidth * cirCnt,
          angle, angle + angleDiv
      );
    }
  }
}

Conclusion

In this article, we explained how to use Perlin noise in a polar coordinate system to create smooth color changes along an arc.

Feel free to modify this sample code to create animations, combine it with standard Cartesian Perlin noise, and explore various possibilities. Unleash your creativity!

 

ref. Animation Example

ref. Combine It with Standard Cartesian Perlin Noise

 

Please also enjoy my other articles on Parlin Noise.

It's a generative-art example with the 'Worley noise' and the 'Perlin noise'.

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

Next Post Previous Post
No Comment
Add Comment
comment url