How to close a curvy Perlin blob nicely?

Programming Questions

mandelum

How to close a curvy Perlin blob nicely?

in Programming Questions • 2 years ago

Hello Processing Community!

I am so happy to have finally undertaken programming again, all thanks to the helpful processing language, community and books. Thank you. I accidentaly made my first game, and now I want to try to do the ecosystem practice task in Shiffmans book.

So this is my first problem I have not been able to solve myself. How to close this in a curvy way?

float[] tid = new float[12];
float angle;
void setup() {
size(800, 800);
for (int i=0;i<11;i++) {
tid[i] = random(0, 1);
}
colorMode(HSB);
noStroke();
angle = 360 / 8;
}
void draw() {
background(255);
fill(int(noise(tid[1])*360), 255, 200);
beginShape();
for (int i=1;i<12;i++) {
curveVertex(width/3 + 200 * cos(radians(angle*i))+noise(tid[i])*300, height/3 + 200 * sin(radians(angle*i))+noise(tid[i-1])*300);
}
endShape(CLOSE);
for (int i=0;i<11;i++) {
tid[i] += random(0, 0.01);
}
}

Replies(5)

allonestr..

Re: How to close a curvy Perlin blob nicely?

2 years ago

To find the answer to this, it's worth looking at the reference page for curveVertex(). It says "The first and last points in a series of curveVertex() lines will be used to guide the beginning and end of a the curve." You, quite reasonably, have drawn from each curveVertex to the next curveVertex, but have not taken this into account. To get a nice curve all the way round, you need to use some of the points more than once.

Imagine your points are on a clock face. If you draw from 1 to 2 to 3 ... to 11 to 12, according to the reference, 1 and 12 are used as guides. To complete the curve, draw from 1 to 2 to 3 .. to 11 to 12 to 1 to 2 to 3 to 4. (I found that I had to reuse four points by experiment.)

Here is the new code. Note that

- I've spaced things out a bit - although a style issue, it is easier to for other people to read your code like this - and, also, to improve legibility, I've replace those great long expressions for the co-ordinates by xpos and ypos

- I've made a variable for the number of vertices - this is also partially a style issue, but also removes a so-called magic number from your code - it saves you having to change this value in three places

- I've removed your convertion from degrees to radians by starting with radians

- so that you can start your for loop at 0, note how I've addressed the [i - 1]th element

HTH

string

float[] tid = new float[12];
float angle = PI / 4;
int numVertices = 8;
void setup()
{
size(800, 800);
colorMode(HSB);
noStroke();
for(int i = 0; i < numVertices; i++)
{
tid[i] = random(0, 1);
}
}
void draw()
{
background(255);
fill(int(noise(tid[1]) * 360), 255, 200);
beginShape();
for(int i = 0; i < numVertices; i++)
{
    float xpos = width/3 + 200 * cos((angle * i)) + noise(tid[i]) * 300;
    float ypos = height/3 + 200 * sin((angle * i)) + noise(tid[(i + numVertices - 1) % numVertices]) * 300;
    curveVertex(xpos, ypos);
}
for(int i = 0; i < 3; i++)
{
    float xpos = width/3 + 200 * cos((angle * i)) + noise(tid[i]) * 300;
    float ypos = height/3 + 200 * sin((angle * i)) + noise(tid[(i + numVertices - 1) % numVertices]) * 300;
    curveVertex(xpos, ypos);
}
endShape(CLOSE);
for(int i = 0; i < numVertices; i++)
{
tid[i] += random(0, 0.01);
}
}

mandelum

Re: Re: How to close a curvy Perlin blob nicely?

2 years ago

Why you used the modulo is also a curious thing that I try to grasp, I seem to understand it in some intuitive way, I know in theory how modulo work, but I have not yet grasped when and how you can use it to solve problems elegantly as you have here so nicely done! Programming is so beautiful and a bit mysterious in the beginnings, but you always know that everything is graspable if you just try hard enough.

mandelum

Re: How to close a curvy Perlin blob nicely?

2 years ago

Thank you so very very much, this was so helpful and such a quick reply!

I did read the reference page for curveVertex and I even tried using some of the points, but could not figure out how. I also have some trouble now figuring out why your solution works, but I will spend some more time looking though your answer and the code!

I love your helpful attitude! I hope to once be able to in the same way help out other people!

allonestr..

Re: How to close a curvy Perlin blob nicely?

2 years ago

Modulo is incredibly useful in addressing array elements. Quite often you want to refer to the element before or after the current one.

Say you have an array length 5, with elements at indexes 0, 1, 2, 3 and 4.

If i = 0, 1, 2 or 3, then i + 1 is easy, but when i = 4, i + 1 gives an out of bounds message. If you want a loop like yours, then when i = 4, i + 1 = 0 which is equal to (i + 1) % arrayLength.

It's clearer with code.

int arrayLength = 5;
for(int i = 0; i < arrayLength; i++)
{
int j = (i + 1) % arrayLength;
int k = (i - 1) % arrayLength;
println(i +" "+ j + " "+ k);
}

Unfortunately, processing won't let me use [(i - 1) % arrayLength] to address an element in the array, but I can get round it by adding the arrayLength.

int[] someArray;
int arrayLength = 5;
someArray = new int[arrayLength];
for(int i = 0; i < arrayLength; i++)
{
someArray[i] = i * 10;
}
for(int i = 0; i < arrayLength; i++)
{
println(someArray[(i + 1) % arrayLength]);
// println(someArray[(i - 1) % arrayLength]); // this doesn't work in processing
println(someArray[(i + arrayLength - 1) % arrayLength]); // so had to do this
}

string

mandelum

Re: How to close a curvy Perlin blob nicely?

2 years ago

This was so helpful again! I was just trying to work it out for myself, and now thanks to your additional explanation I think I really understand it, need to make some prinln tests for myself also to understand the mechanics of it completely!

Top Reply