class Coin {

  // Constructor initializes properties for the colors, size, and rotation speed of the coins.

  constructor() {

    this.baseColor = color(200, 170, 120); // Background color for behind the coins, resembling a sandy shade.

    this.coinColor = color(240, 200, 60);  // Main color of the coin, giving it a gold appearance.

    this.edgeColor = color(255, 215, 0);   // Bright edge color, providing a shiny effect to simulate metallic edges.

    this.coinSize = 50;                    // Diameter of each coin.

    this.rotationSpeed = 0.01;             // Rotation speed applied to each coin for animation.

  }

​

  // Draw method renders the coin pattern across the canvas with rotation.

  draw() {

    // Set the background color to the base color, covering the whole canvas.

    background(this.baseColor);

​

    // Disable outlines for smoother circles.

    noStroke();

​

    // Loop through the canvas to draw a grid of coins.

    for (let y = 0; y < height; y += this.coinSize + 10) { // Vertical placement of coins

      for (let x = 0; x < width; x += this.coinSize + 10) { // Horizontal placement of coins

        push(); // Save the current drawing state.

​

        // Center each coin by moving the origin to the center of where the coin will be drawn.

        translate(x + this.coinSize / 2, y + this.coinSize / 2);

​

        // Apply a slight rotation to each coin based on frameCount for a rotating animation effect.

        rotate(frameCount * this.rotationSpeed);

​

        // Draw the outer edge of the coin for a 3D effect.

        fill(this.edgeColor); // Use the shiny edge color.

        ellipse(0, 0, this.coinSize * 1.2); // Slightly larger than the main coin body.

​

        // Draw the main body of the coin.

        fill(this.coinColor); // Use the gold color for the main part of the coin.

        ellipse(0, 0, this.coinSize);

​

        // Draw a semi-transparent circle for the background of the coin text.

        fill(255, 255, 255, 150); // White with some transparency to let the coin color show through.

        ellipse(0, 0, this.coinSize * 0.6); // Positioned at the center of the coin.

​

        // Draw the text “1” in the center of the coin to simulate a printed value.

        fill(255, 255, 200); // Slightly off-white color for contrast.

        textAlign(CENTER, CENTER); // Center text horizontally and vertically.

        textSize(this.coinSize / 2); // Adjust text size relative to the coin size.

        text('1', 0, 0); // Display the text at the center.

​

        // Add a shiny spot to enhance the 3D appearance of the coin.

        fill(255, 255, 255, 100); // Light shine with transparency.

        ellipse(this.coinSize / 4, -this.coinSize / 4, this.coinSize / 2.5); // Positioned off-center for effect.

​

        pop(); // Restore the original drawing state.

      }

    }

  }

}

// i created the visual appearnce here instead in the sketch because the code kept malfunctioning so it started owkring when i put it here