Concept: The concept of this code is to create an interactive animation of concentric polygons using P5.js. The animation features a series of concentric polygons that rotate around a central point, creating a visually engaging effect. Additionally, the animation can be paused and resumed by clicking anywhere on the canvas, providing interactivity for the user.
Inspiration: My primary motivation for this project stems from my deep passion for cars. As a child, I spent countless hours playing with remote control cars, and one aspect that always fascinated me was the motion of the wheels. I found it incredibly satisfying to watch the wheel rims rotate in a clockwise direction as the speed increased. This experience inspired me to recreate a mesmerizing wheel animation using for and while loops. Additionally, I added an interactive element to the animation, allowing users to pause the concentric polygons by tapping anywhere on the canvas and vice versa to resume the effect. Here’s a simple video on rotatory motion of the toy car’s wheels.
Areas of Code I’m proud: Apart from creating a realistic rotatory motion, I aimed to add an interactive feature similar to the simple buttons used to control the pausing and driving of car wheels. Initially, I encountered difficulty in adding but later I successfully achieved this feature through the implementation of one particular function: mouseClicked(). So I can say one noteworthy section of my code:is the implementation of the mouseClicked() function. This function toggles the isPaused variable, which controls the pause state of the animation. By toggling this variable based on mouse clicks, the code effectively enables the user to interact with the animation, pausing and resuming it at will. If this feature or option wouldn’t exist, the process of making the art interactive would be so difficult.
P5.js code:
// Define global variables
let angle = 0; // Initialize rotation angle
let rotationSpeed = 0.01; // Rotation speed for the spinning illusion
let isPaused = false; // Variable to track animation pause state
function setup() {
// Create canvas
createCanvas(600, 600);
// Set background color
background(255);
// Set drawing properties
noFill();
strokeWeight(2);
stroke(0);
// Define parameters for concentric polygons using a for loop
let numCircles = 20;
let radius = width / 2;
// Loop to draw concentric polygons using a for loop
for (let i = 0; i < numCircles; i++) {
// Calculate radius for current circle
let currentRadius = map(i, 0, numCircles, 0, radius);
// Generate random number of points for current polygon
let numPoints = int(random(5, 15));
let angleIncrement = TWO_PI / numPoints;
beginShape();
// Loop to draw vertices for current polygon using a while loop
let j = 0;
while (j < numPoints) {
// Calculate vertex coordinates with rotation applied
let x = width / 2 + currentRadius * cos(j * angleIncrement + angle);
let y = height / 2 + currentRadius * sin(j * angleIncrement + angle);
vertex(x, y);
j++; // Increment counter
}
endShape(CLOSE);
}
// Add a central circle to create illusion of a spinning wheel
fill(255);
ellipse(width / 2, height / 2, 50, 50); // Draw central circle
}
function draw() {
// Check if animation is not paused
if (!isPaused) {
// Set background color
background(255);
// Update rotation angle
angle += rotationSpeed;
// Redraw the artwork with updated rotation using the setup function
setup();
}
}
function mouseClicked() {
// Toggle animation pause state when mouse is clicked
isPaused = !isPaused;
}
Final Output: Here’s how it looks, click anywhere on the canvas to pause/ resume the wheel.
Reflection and Ideas for Future Work or Improvements: I believe this code successfully achieves the goal of creating an interactive animation of concentric polygons. However, I feel there are few areas for potential improvement and future work:
1) Optimization: The code could be optimized to improve performance, especially when handling a large number of polygons. So instead of 20, I tried of giving number of circles as 50 and the webpage stopped working.
2) User Interface: I feel like there should be more interactive part with many features. Like it would be better if I leave the user few options for adding controls or adding adjusting rotation speed.
3) Additional Features: Incorporating additional features such as color transitions, different polygon shapes, or customizable patterns could add depth and complexity to the animation.
Overall, this assignment was a great opportunity to experiment with loops and conditional statements. Moving forward, I’m willing to learn more and plan to incorporate and fix the above discussed areas to enhance this coding animation in future.