Curve Vertex and Noise
Using other built in functions of the p5.js library to draw a circle. Perlin Noise is also applied to generate the above shape.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));
}
}