Hello,
I am currently working on a circular wave generator, that can be modified by users. To achieve it I am using curveVertex.
beginShape();
let i =0;
for(let a = 0; a < TWO_PI; a += ang){
i++;
let sx = x + cos(a) * rad2;
let sy = y + sin(a) * rad2;
console.log('sx'+sx);
console.log('sy'+sy);
fill(72, 139, 143);
curveTightness(-0.5);
curveVertex(sx, sy);
sx = x + cos(a + halfAng) * randomCornerLengths[i];
sy = y + y + sin(a + halfAng) * randomCornerLengths[i];
curveVertex(sx, sy);
}
endShape(CLOSE);
}
no, it is your concept of creating a closed 360deg shape
by a loop over 2 vertexes
while using curveVertex,
-a- i show you how to play with the
stepsize
number of steps
-b- i told you about the conflict that curveVertex needs
a begin and ending control point
so for 3 point curve need 5 points, like i play here
for better understanding
so there is a big chance that actually the problem is not that a point
is missing in your curve, it might be the
missing endpoint control point
wrong start control point
defining the angle of the last points
-c- how about a total new concept
-c1a- always start by using not use curveVertex, only vertex ( lines )
-c1b- use noFill for better view
-c2- make a loop over 360deg and create a ellipse only one point per loop
after this works clean ( you never have to worry again about closed shape… )
-c3- add a harmonic
means for the basic ellipse there is no “number of star points” needed
also the random radial array not needed.
just add a sinus with a adjustable higher frequence and amplitude.
( harmonic means the added sinus must fit into the basic circle or you get a
“final step” again.
-c4- optional can add more harmonics for further “distortion” of the basic ellpisis
In case some one is having similuar Problems. I have found perlin noise as a solution for my problem. https://www.openprocessing.org/sketch/112858/. This sketch shows how it can function within a circle.
I’m too struggling closing a curveVertex shape, your help will be much appreciated. Here is my code:
let ang = TWO_PI / (this.vertices.length - 1);
let i = 0;
beginShape();
curveVertex(this.vertices[0].x, this.vertices[0].y);
for (let a = 0; a <= TWO_PI; a+= ang) {
let v = this.vertices[i];
curveVertex(v.x, v.y);
i++;
// text(i, v.x, v.y);
ellipse(v.x, v.y, 4, 4);
}
endShape();
The shape starts from the first dot on the right side CCW all the way around. Even though I’m using a full-circle for loop, I cant figure out how to close the shape to produce a smooth shape, hence the omission to use CLOSE on the endShape function.
The vertices array contains a series of (x,y) coordinates that are all interconnected using springs and the slug shape is created using a bezierPoint() curve, if that helps to understand how the shape is constructed.
checked the reference already?
possibly it is not that clear,
but you need at beginning and end
2 more points as control points
( they not get a connecting line but define the angle from the last line end )
like make then manually prior and after your FOR loop
Yes I have checked the reference. Unless I’m missing something, not sure what is wrong. I’m going full circle connecting the dots to create the curve… but 2 sections are still missing.
one line need 2 points
four lines need 5 points ( 0 … 4 )
if four lines have to be a closed shape ( like circle )
point 0 and point 4 must be same.
anyhow need the 2 control points what not get lines!
so need 7 points
-1- point 3 cp1 ( if use point 0 shape closed but wrong angle )
-2- point 0 p1 line start
-3- point 1 p2
-4- point 2 p3
-5- point 3 p4
-6- point 4 p1 line end
-7- point 1 cp2 ( if use point 4 ( == 0 ) shape closed but wrong angle )
