In this article, we are going to see how to create a Rotating Spiral animation effect using p5.js.
p5.js is a JavaScript library that helps in creating graphics that users can interact with and is easy to use and helps in visualizing different kinds of graphics and animations. This article will show you how to create a Rotating Spiral animation using p5.js.
Approach: This code creates an animation of multiple spirals rotating around a common center in P5.js by following these steps:
- The “setup()” function sets the canvas size and disables the fill color for shapes.
- The “draw()” function draws the spirals on the canvas. It first clears the canvas to a white background and then translates the origin to the center of the canvas.
- The code then enters a for loop where it rotates the canvas by an increment of “TWO_PI / numArms” degrees, with “numArms” being the number of spirals in the animation.
- The “spiralArm()” function is called with the length of the spiral arm as an argument.
- The “spiralArm()” function creates a shape by using a for loop that iterates 200 times. For each iteration, it maps the current iteration number to a radius “r”, an angle “theta”, and “x” and “y” coordinates.
- The code then sets the stroke color to black and the stroke weight to 2. It begins creating the shape with “beginShape()” and adds a vertex to the shape for each iteration of the for loop with “vertex(x, y)”. The shape is closed and drawn on the canvas with “endShape()”.
Finally, the angle is incremented by the speed value to rotate the spirals.
Used Functions:
- setup(): This function sets up the canvas, and sets the fill color to “noFill”.
- draw(): This function is the main animation loop, which is called repeatedly. It clears the canvas with a white background color and translates the origin of the canvas to the center of the canvas. Then, it uses a for loop to draw the spiral arms, each one rotated by an angle proportional to the number of arms. The spiralArm() function is called to draw each arm. Finally, the angle is incremented by the speed to make the spirals rotate.
- spiralArm(): This function is used to draw a single spiral arm. It sets the stroke color and stroke weight and starts a new shape. It uses a for loop to create vertices for the shape, using polar to Cartesian coordinates transformation and the “vertex” function to add the vertices to the shape. The angle of each vertex is determined by the loop iteration and the angle argument passed to the function. The radius of each vertex is proportional to the length argument passed to the function. The shape is ended with the “endShape” function.
Example: In this example we are going to create a Rotating Spiral animation, using p5.js
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Animation of Rotating Spiral</title>
<script src=
</script>
</head>
<body>
<h2 style="color:green;">GeeksforGeeks</h2>
<script>
let angle = 0;
let speed = 0.05;
let numArms = 5;
function setup() {
createCanvas(250, 250);
noFill();
}
function draw() {
background(100);
translate(width / 2, height / 2);
for (let i = 0; i < numArms; i++) {
rotate(TWO_PI / numArms);
spiralArm(100);
}
angle += speed;
}
function spiralArm(len) {
stroke(0);
strokeWeight(2);
beginShape();
for (let i = 0; i < 200; i++) {
let r = map(i, 0, 200, 0, len);
let theta = map(i, 0, 200, 0, TWO_PI) + angle;
let x = r * cos(theta);
let y = r * sin(theta);
vertex(x, y);
}
endShape();
}
</script>
</body>
</html>
|
Output: