Assignment 3 – Spinning Symphony | Haziel

My inspiration for this assignment was basically the forms and shapes we usually find around us. Whether it be through the whirlwind or even a simple whirlpool we see in the sink when draining the water, I wanted to created something related to spirals. Moreover, spirals are also inspired by one of my favorite astronomical objects: spiral galaxies. The beautiful spiral arms of these galaxies, stretching outward in what it seems to be a delicate movement, caught completely my attention and evoke a sense of wonder. Drawing from these natural phenomena, I aimed to create an interactive artwork that celebrates the harmony of spirals.

Keep clicking on the screen to create your Spiral Galaxy 🙂

In this project, when the mouse button is pressed, a new spiral centered around the cursor position is drawn on the canvas. The spirals consist of a series of connected points, creating a spiral pattern as they move outward. Each spiral has a random color and speed, creating a dynamic and varied composition. The spirals continue to evolve and interact with each other as the user interacts with the canvas. To create this effect, I challenge myself in creating new patterns, supported by tutorial videos on how to create the spiral effect, like this one.

class Spiral {
  // Constructor function to initialize a new spiral object with specified parameters
  constructor(x, y, radius, color, speed) {
    // Initialize object properties based on input parameters
    this.x = x; // X-coordinate of the center of the spiral
    this.y = y; // Y-coordinate of the center of the spiral
    this.radius = radius; // Radius of the spiral
    this.color = color; // Color of the spiral (as an array [R, G, B])
    this.angle = 0; // Initial angle of the spiral
    this.speed = speed; // Speed of rotation for the spiral
  }

  // Display function to draw the spiral on the canvas
  display() {
    noStroke(); // Disable stroke (outline)
    fill(this.color); // Set fill color based on the color property
    let spiralSize = this.radius * this.angle; // Calculate the size of the spiral
    // Draw a small ellipse at a point on the spiral determined by the current angle
    ellipse(this.x + cos(this.angle) * spiralSize, this.y + sin(this.angle) * spiralSize, 5, 5);
  }

  // Move function to update the angle of the spiral, causing it to rotate
  move() {
    this.angle += this.speed; // Increment the angle by the rotation speed
  }
}

For future assignments, I would like to improve my understanding of object-oriented programming concepts and explore more advanced techniques for creating dynamic and interactive visual experiences. Additionally, I aim to delve deeper into the principles of design and incorporate more sophisticated visual elements into my projects, as well as sound and music to enhance the immersive experience of my projects.