Day 19 - Art 1

Op Art

Warped Grid

Warped Grid is a dynamic generative art piece that creates an ever-evolving grid of rotating and warping ellipses. The shapes are animated with fluid motion, where their size, position, and color continuously shift based on time and their distance from the center of the canvas. The result is a mesmerizing, depth-filled pattern that gives the illusion of movement and transformation within a grid.

    let angle = 0; // Initialize angle for overall rotation
    let gridSize = 10; // Define the grid size (number of cells in the grid)
    let maxSize = 100; // Maximum size for the shapes
    let canvas;
    
    function setup() {
      // Create a canvas of size 400x400 and set it inside the container with ID 'canvas-container'
      canvas = createCanvas(400, 400);
      canvas.parent('canvas-container');
      
      // Set the shape drawing settings
      noFill(); // No fill color for shapes
      strokeWeight(2); // Set the stroke width to 2 pixels
    }
    
    function draw() {
      background(255); // Clear the canvas with a white background each frame
      
      // Move the origin of the canvas to the center for easier drawing and rotation
      translate(width / 2, height / 2); 
    
      // Use time-based variation for smooth, fluid motion
      let time = millis() * 0.002; // Time-based variable for animation (millis() gives the time in milliseconds)
      
      // Loop through grid positions to create the illusion of depth and warping
      for (let x = -gridSize; x < gridSize; x++) {
        for (let y = -gridSize; y < gridSize; y++) {
          
          // Calculate the distance of the current grid cell from the center
          let distance = dist(x, y, 0, 0);
          
          // Calculate the angle offset for each grid position based on its coordinates
          let angleOffset = atan2(y, x);
          
          // Dynamically calculate the size of the shape based on distance and time for fluid motion
          let size = maxSize * 0.5 * sin(time + distance * 0.2);
          
          // Warp the grid based on the sine of the angle and distance
          let xOffset = cos(angleOffset + time) * size;
          let yOffset = sin(angleOffset + time) * size;
    
          // Add color shift for visual depth based on time and distance
          let colorShift = map(sin(time + distance), -1, 1, 100, 255);
          stroke(colorShift, 100, 255 - colorShift); // Set stroke color with dynamic shifting
    
          // Draw the shape with the calculated dynamic properties
          push(); // Save the current transformation state
          translate(x * 30, y * 30); // Space out the grid cells by 30 pixels
          rotate(angle + distance * 0.5); // Rotate the shape based on its distance from the center
          ellipse(xOffset, yOffset, size, size); // Draw an ellipse with the calculated size and position
          pop(); // Restore the previous transformation state
        }
      }
    
      // Slowly increase the angle for overall rotation, creating a smooth spinning effect
      angle += 0.01;
    }