How to create a Rotating Spiral Animation Effect using p5.js ? Last Updated : 17 Feb, 2023 Comments Improve Suggest changes Like Article Like Report 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= "https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"> </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: Comment More infoAdvertise with us Next Article How to create a Rotating Spiral Animation Effect using p5.js ? R rudra1807raj Follow Improve Article Tags : JavaScript Web Technologies HTML JavaScript-p5.js JavaScript-Questions +1 More Similar Reads How to create a Snowfall Animation Effect using p5.js ? In this article, we are going to see how to create a snow-falling animation 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 t 3 min read How to Create Noise Animation Effect using p5.js ? In this article, we are going to see how to create a Noise 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 t 3 min read How to create Shooting Star Animation Effect using CSS ? The Shooting Star effect is one of the coolest background effects that is used for dark-themed websites. Shooting Stars Animation is an extraordinary illustration of a loading screen that grabs your eye for a considerable length of time for the remainder of the content to load on the website. This e 4 min read How to Create Circle Loading Animation Effect using CSS ? In this article, we will see how to create a circle-loading animation using HTML and CSS, along with understanding its basic implementation through the example. Generally, Loading Animation is utilized to wait for the content to be fully loaded on the webpage. If some pages don't contain the loader, 6 min read How to create Animation of Sine Wave Pattern using p5.js ? In this article, we are going to see how to create a Sine Wave Pattern animation 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 3 min read How to Create a Dot loading Animation using HTML and CSS? The Dot Loading animation can be used to enhance the user interface of a website, it can be added while the website loads. This animation can be easily created using HTML and CSS. HTML Code: In this section we will create the basic structure of the dot loader using a div tag which will have some spa 2 min read How to draw simple animation using p5.js ? Animation is a method in which a collection of images is combined in a specific way and processed then they appear as moving images. Building animations make on-screen objects seem to be alive. In this article, we will learn to make a simple animation of the house in p5.js by using lines, rectangles 3 min read Create Effect of Particle Animation using CSS At least once, you must have seen a website with particles appearing and disappearing in its background. This cool particle animation may seem complicated but it is actually quite easy to make. In this article, we will set an image as the background of our body, and on it, we will have particles mov 6 min read How to create a rainbow disc using p5.js ? In this article, we are going to see how we can create a rainbow disc using p5.js. p5.js is a JavaScript library that makes it easy to create interactive graphics, and it is well-suited for visualizations of all kinds, including rainbows. This article will show you how to create a rainbow using p5.j 3 min read How to create animation of color changing and moving cube using p5.js ? In this article, we are going to see how to create the animation of color-changing and rotating cubes 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 a 4 min read Like