It's a generative-art example with the 'Worley noise' and the 'Perlin noise'.
Let me show you a simple example code of 'Processing' that you can play with it.
The example code generates a generative art using the tips I introduced before. "The tips to make the Perlin noise creative coding works more interesting."
The code has much room for improvement, so you should be able to enjoy the modification.
A generative art using the Worley noise.
What is the Worley noise?
The Worley noise is the algorithm like this.
- Put some points on the canvas.
- For every location in the canvas, take the distance between the location and the points.
- Draw something related to the distance.
I recommend you the Wikipedia.
And I recommend you to watch this video by your favorite Mr. Shiffman.
The Worley noise example artwork and the example code.
I made some artwork using the Worley noise.
Please feel free to use this example code under the terms of the GPL.
/**
* Worley noise : with the nearest point
*
* Processing 3.5.3
* @author @deconbatch
* @version 0.1
* created 0.1 2021.08.07
*/
void setup() {
size(780, 480);
colorMode(HSB, 360.0, 100.0, 100.0, 100.0);
smooth();
noLoop();
}
void draw() {
// number of the reference points
int pointNum = floor(random(5.0, 30.0));
// get random location points
ArrayList<PVector> points = randomPoints(pointNum, width, height);
// draw
background(0.0, 0.0, 0.0, 100.0);
drawWorley(points);
}
/**
* randomPoints : return PVector array of random location points
*/
public ArrayList<PVector> randomPoints(float _num, float _w, float _h) {
ArrayList<PVector> rnds = new ArrayList<PVector>();
for (int i = 0; i < _num; i++) {
rnds.add(new PVector(random(_w), random(_h)));
}
return rnds;
}
/**
* drawWorley : draws using the Worley noise
*/
public void drawWorley(ArrayList<PVector> _ps) {
float range = max(width, height);
float nsStep = 0.005;
float dsMult = 1.0;
noStroke();
for (int iX = 0; iX < width; iX++) {
for (int iY = 0; iY < height; iY++) {
// get the distance with the nearest point
float minDist = range;
for (int i = 0; i < _ps.size(); i++) {
float distance = dist(iX, iY, _ps.get(i).x, _ps.get(i).y);
if (minDist > distance) {
minDist = distance;
}
}
// calculate brightness with the distance
float nVal = minDist * dsMult * nsStep;
float pBri = (nVal * 100.0) % 90.0;
fill(0.0, 0.0, pBri, 100.0);
rect(iX, iY, 1.0, 1.0);
}
}
}
/*
Copyright (C) 2021- deconbatch
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>
*/
I calculated the brightness by the distance of the nearest point and drew grayscale rectangles.
It looks like a picture of cell division. The reference points are in the center of each cell.
I drew a line between the location and the nearest reference point.
You can enjoy a lot making something with the Worley noise like this.
Combination with the Worley noise and the Perlin noise.
Put the 'dist()' of the Worley noise into the Perlin noise parameter.
You would have seen the 'dist()' function in the Worley noise example code above.
float distance = dist(iX, iY, _ps.get(i).x, _ps.get(i).y);
I put this 'dist()' function into the Perlin noise parameter, it will draw something like this.
noise(distance, x, y);
The main point of modification is here.
Before
float nVal = minDist * dsMult * nsStep;
float pBri = (nVal * 100.0) % 90.0;
After
float nVal = noise(minDist * dsMult * nsStep, iX * nsStep, iY * nsStep);
float pBri = nVal * 100.0;
The brief description of the code.
The outline of the Worley noise example code above is like this.
- randomPoints() : Get the reference points at random locations.
- drawWorley() : Draw with the Worley noise algorithm.
The outline of this generative art code is the same as the example code.
randomPoints()
It has no collision detection logic, so the array of PVectors may contain the same location value. And also, there is the possibility that all PVectors are the same value.
drawWorley()
I drew with the algorithm below.
- On the location (x, y), get the distance to the nearest reference point.
- Calculate the brightness with that distance value. The Perlin noise that has the distance value in the parameter is the key of calculation.
- Draw a rectangle with that brightness at the location (x, y).
- Do the above on each location on the canvas.
Variables : nsStep, dsMult
I used variables 'nsStep' and 'dsMult' to control the shape.
float nsStep = 0.005;
float dsMult = 10.0;
'nsStep' controls the rate of change of the Perlin noise parameter. 'dsMult' controls the rate of change of distance.
float nsStep = 0.001;
float dsMult = 10.0;
float nsStep = 0.005;
float dsMult = 30.0;
Hint for improvement.
The key of this code to create generative art is here.
float nVal = noise(minDist * dsMult * nsStep, iX * nsStep, iY * nsStep);
It is the 3D noise of distance, x, and y.
Let's change it to the 1D noise of distance only.
float nVal = noise(minDist * dsMult * nsStep);
Then, what will happen when I add a reference point to the Perlin noise parameter?
// get the distance with the nearest point
float minDist = range;
int minIndx = 0;
for (int i = 0; i < _ps.size(); i++) {
float distance = dist(iX, iY, _ps.get(i).x, _ps.get(i).y);
if (minDist > distance) {
minDist = distance;
minIndx = i;
}
}
float nVal = noise(minDist * dsMult * nsStep, minIndx);
Each reference point shows its own pattern. And we can see the borderlines.
Let's have fun with this example code!
I used the nearest reference point in this example. You can try to use 2nd nearest or the farthest reference point.
And the drawing, I did not use color. You can enjoy changing hue and saturation.
There is much room for improvement, so you can enjoy the improvement in your own way. It must be fun!
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.
