P5.js curveVertex function is closing at a point

Question

I've created a noise function that pairs with a circle function to create a random noise circle thing that looks pretty cool. My problem is the curveVertex function in P5.js works correctly except for the connection of the first and last vertex. My code is:

let start = Array(50).fill(0); // dont change
let amount = 1; // amount of shapes
let gap = 30; // between shapes
let amplify = 50; // 0 -->
let colorSpeed = 1; // 1 - 9
let colorSeparation = 3; // 0 - 80 recomended 0 - 10

function setup() {

  createCanvas(windowWidth, windowHeight);
  
  for(let  i = 0 ; i < start.length; i++){
    start[i] = random(i);
  }
  
}

function draw() {
  
  background(0);
  
  for(let dnc = (amount + 1) * gap; dnc > gap; dnc -= gap){
    drawNoiseCircle(dnc, getNoise(start.length));
  }
    
  start = start.map( c => c + 0.01 );
  
}

function getNoise(amount){
  
  let lengths = [];
  
  for(let i = 1; i < amount + 1; i++){
    
    let n1 = noise(start[i - 1]);
    let noise1 = map(n1, 0, 1, -amplify, amplify);

    lengths.push(abs(-noise1));
    
  }
  
  return lengths;
  
}

function drawNoiseCircle(radius, lengths){
  
  colorMode(HSB);
  fill(((frameCount + radius) * colorSeparation)/-map(colorSpeed, 1, 10, -10, -1) % 360, 100, 50);
  noStroke()

  let x;
  let y;
  
  beginShape();
  
  for(let l = 0; l < lengths.length; l++){
    
    x = Math.cos(radians(l * 360 / lengths.length)) * (radius + lengths[l]) + width/2;
    y = Math.sin(radians(l * 360 / lengths.length)) * (radius + lengths[l]) + height/2;
    
    curveVertex(x, y);
    
  }
  
  endShape(CLOSE);
  
  stroke("black");
  line(width/2, height/2, width, height/2);
  
  line(width/2, height/2 + 9, width, height/2 + 9);

}

I understand the endShape(CLOSED) closes the shape with a straight line, but I'm not sure any other way to close the shape.

You can see the pointed edge on the right side, directly in the middle of the shape.

!EDIT!

I've added lines to the shape to show the line segment that isn't affected by the curve vertex. Also, I understand it may not be a very significant problem, but if the amount of vertexes shrink, it becomes a much bigger problem (eg. a square or a triangle).

user_89766 · Answer

Unfortunately I won't have time to dive deep and debug the actual issue with curveVertex (or it's math) at the time, but it seems there's something interesting with curveVertex() in particular.

@Ouoborus point makes sense and the function "should" behave that way (and it was with vertex(), but not curveVertex()). For some reason curveVertex() requires looping over the not just the first point again, but the second and third.

Here's basic example:

function setup() {
  createCanvas(300, 300);
  
  background(220);
  
  let numPoints = 6;
  let angleIncrement = TWO_PI / numPoints;
  let radius = 120;
  
  beginShape();
  for(let i = 0 ; i < numPoints + 3; i++){
    let angle = angleIncrement * i;
    let x = 150 + cos(angle) * radius;
    let y = 150 + sin(angle) * radius;
    curveVertex(x, y);
  }
  endShape();
}

Try decreasing numPoints + 3 to numPoints + 2 or notice the behaviour you're describing. (I could speculate it might have something to do with how curveVertex() (Catmull-Rom splines) are implemented in p5 and how many coordinates/points it requires, but this isn't accurate without reading the source code and debugging a bit)

Here's a version of your code using the above notes:

let start = Array(30).fill(0);

let colorSpeed = 1; // 1 - 9
let colorSeparation = 3; // 0 - 80 recomended 0 - 10

function setup() {
  createCanvas(600, 600);
  colorMode(HSB);
  noStroke();
  // init noise seeds
  for(let  i = 0 ; i < start.length; i++){
    start[i] = random(i);
  }
}

function getNoise(seeds, amplify = 50){
  let amount = seeds.length;
  let lengths = [];
  
  for(let i = 1; i < amount + 1; i++){
    
    let n1 = noise(seeds[i - 1]);
    let noise1 = map(n1, 0, 1, -amplify, amplify);

    lengths.push(abs(-noise1));
    
  }
  
  return lengths;
  
}

function drawNoiseCircle(radius, lengths){
  let sides = lengths.length;
  let ai = TWO_PI / sides;
  let cx = width * 0.5;
  let cy = height * 0.5;
  
  fill(((frameCount + radius) * colorSeparation)/-map(colorSpeed, 1, 10, -10, -1) % 360, 100, 50);
  
  beginShape();
  for(let i = 0 ; i < sides + 3; i++){
    let noiseRadius = radius + lengths[i % sides];
    let a = ai * i;
    let x = cx + cos(a) * noiseRadius;
    let y = cy + sin(a) * noiseRadius;
    curveVertex(x, y);
  }
  endShape();
}

function draw() {
  background(0);
  // draw with updated perlin noise values
  drawNoiseCircle(120, getNoise(start));
  // increment noise seed
  start = start.map( c => c + 0.01 );
}

P5.js curveVertex function is closing at a point

1 Answers