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.
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).
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.
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.
Well, now what?
One Idea Can Work.
To solve this problem, Masaki Yamabe (@masakick) san gave me a good idea.
無念。2周させて2周目は進むごとに段々と薄くして1周目に重ねるとか？
— 山辺真幸/データビジュアライズデザイナー (@masakick) April 15, 2025
[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.
(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.
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
散布る#processing #creativecoding pic.twitter.com/ni5Iq3uv6D
— deconbatch (@deconbatch) April 18, 2025
ref. Combine It with Standard Cartesian Perlin Noise
あなたの丹田#processing #creativecoding pic.twitter.com/FEUsbepxRT
— deconbatch (@deconbatch) April 20, 2025
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.
deconbatch
To make something is my pleasure. Having fun in endless trial-and-error. Now, I'm loving creative coding and showing some example code in my blog. Mainly creating Processing code examples.
