Day 4 - Art 1

Black on black

Möbius Layers

A generative art piece featuring animated Möbius strips that appear to evolve and shift in space. The strips are drawn in layers, each with subtle oscillations, creating a mesmerizing "black on black" effect. The animation is driven by time, giving the strips a dynamic, flowing quality as they twist and rotate. This piece explores depth and motion through mathematical functions, resulting in a captivating visual experience.

    // Initialize a variable for time-based animation
    let t = 0;
    let canvas;
    
    function setup() {
      // Create a 400x400 pixel canvas and attach it to an HTML container
      canvas = createCanvas(400, 400);
      canvas.parent('canvas-container');
      
      // Set up the drawing style
      noFill(); // Disable filling shapes, leaving only outlines
      stroke(30); // Set the stroke color to a dark gray (for "black on black" effect)
      strokeWeight(4); // Set the line thickness to 4 pixels for a more pronounced effect
    }
    
    function draw() {
      // Set the background color to black
      background(0);
      
      // Move the origin (0,0) to the center of the canvas for easier positioning
      translate(width / 2, height / 2);
    
      // Draw multiple Möbius strips to create a layered, dynamic effect
      for (let j = 0; j < 16; j++) { // Loop through 16 strips for depth
        beginShape(); // Start drawing a new shape
        
        // Loop to create the vertices of each Möbius strip
        for (let i = 0; i < TWO_PI * 2; i += 0.05) { // Create points in circular motion
          let offset = j * 30; // Offset each strip slightly to create a layering effect
          
          // Calculate x, y, and z coordinates for each vertex
          let x = cos(i + t + offset) * (120 + sin(i * 3) * 30); // X-coordinate with oscillation
          let y = sin(i + t + offset) * (120 + cos(i * 3) * 30); // Y-coordinate with oscillation
          let z = sin(i * 2 + t) * 30; // Z-coordinate for depth, animating with time
          
          // Add the vertex to the shape
          vertex(x, y);
        }
        
        // Close the shape, completing the Möbius strip
        endShape(CLOSE);
      }
    
      // Increment the time variable to animate the Möbius strips
      t += 0.01; // Small increment to create smooth animation
    }