Curve Vertex and Noise

Creating the points

An object or point created from the class Point has a single initial property that describes its x and y positions on the canvas. This is stored in a vector.

class Point {
  constructor(_x, _y) {
    this.coordinates = createVector(_x, _y);
  }
}

To set the initial positions of each point for drawing the circle, the angle is varied and trigonometry is used to calculate where the x and y position of the point would be for that angle. x would be cos(angle) and y would be sin(angle). These values are multipled by the radius as the circle is large. Each point object is stored in an array.

let numOfSegments = 180;
let points = [];
let radius, angle;

function setup() {
  [...]
  radius = 150;
  angle = radians(360/numOfSegments);
  for (let i = 0; i < numOfSegments; i++) {
    let xPos = radius * cos(angle*i);
    let yPos = radius * sin(angle*i);
    points.push(new Point(xPos, yPos));
  }
}

Using curveVertex() to Draw a Circle

The curveVertex() method is used in conjunction with beginShape() and endShape(). The drawCurveVertex() method creates a vertex coordinate for the circle. The drawCurveVertices() function draws the curve vertex coordinates taken from an array and these values will form the circle. The first and last curve vertex points guide the beginning and end of the curve.

class Point {
  [...]
  drawCurveVertex() {
    curveVertex(this.coordinates.x, this.coordinates.y);
  }
}

function draw() {
  [...]
  drawCurveVertices(points);
  pop();
}

function drawCurveVertices(_array) {
  noFill();
  stroke(color);
  beginShape();
  // first controlled points
  curveVertex(_array[_array.length-1].coordinates.x, _array[_array.length-1].coordinates.y);
  curveVertex(_array[_array.length-1].coordinates.x, _array[_array.length-1].coordinates.y);
  _array.forEach(item => {
      item.drawCurveVertex();
  });
  // last controlled points
  curveVertex(_array[0].coordinates.x, _array[0].coordinates.y);
  curveVertex(_array[0].coordinates.x, _array[0].coordinates.y);
  endShape();
}

Adding Perlin Noise

The points that form the circle move by using noise values. The cosine and sine of i goes between -1 and 1 and this is mapped to a value ranging between 0 and maxNoise which in this sketch is set to 7. The third dimension of the noise space or z is incrementing and shows the Perlin Noise space over time. The animatePoints() function is called before drawCurveVertices() and updates the initial x and y positions of each point every time draw() runs. In the above sketch, I fade the black background by giving it an opacity.

function animatePoints() {
  points = [];
  z += 0.01;
  for (let i = 0; i < numOfSegments; i++) {
    let x = map(cos(i), -1, 1, 0, maxNoise);
    let y = map(sin(i), -1, 1, 0, maxNoise);
    let n = noise(x, y, z);
    let xPos = radius * cos(angle*i) * n;
    let yPos = radius * sin(angle*i) * n;
    points.push(new Point(xPos, yPos));
  }
}