Day 13 - Art 1

Triangles and nothing else

Distorted Triangles

A dynamic generative art piece featuring a grid of rotating, distorted triangles. The triangles are animated with 4D-like distortions, creating a sense of movement and depth. Color transitions and wave-like height variations are driven by time, adding a fluid, organic feel to the piece. The artwork evolves continuously, with the grid of triangles shifting in rotation, position, and color, producing a mesmerizing, ever-changing visual experience.

    // Define global variables for grid dimensions, triangle size, and other properties
    let rows, cols;
    let triangleSize = 50;  // Size of each triangle
    let offset = 0;  // Offset for wave movement
    let rotationSpeed = 0.01;  // Speed of triangle rotation
    let distortionFactor = 50;  // Factor for 4D-like distortion
    let canvas;
    
    function setup() {
      // Set up the canvas with a size of 400x400 and attach it to a container
      canvas = createCanvas(400, 400);
      canvas.parent('canvas-container');
      
      // Disable stroke for shapes
      noStroke();
      
      // Calculate the number of rows and columns based on the canvas size and triangle size
      rows = ceil(height / triangleSize);
      cols = ceil(width / triangleSize);
      
      // Set angle mode to degrees for rotation
      angleMode(DEGREES);
    }
    
    function draw() {
      // Set the background color to black
      background(0);
      
      // Increment the offset to animate the wave effect
      offset += 0.05;
    
      // Use the time elapsed since the program started to create a dynamic effect
      let time = millis() * 0.001; // Time-based factor to add a dynamic shift
    
      // Loop through the grid of triangles (rows and columns)
      for (let y = 0; y < rows; y++) {
        for (let x = 0; x < cols; x++) {
          // Calculate the position of each triangle in the grid
          let posX = x * triangleSize + triangleSize / 2;
          let posY = y * triangleSize + triangleSize / 2;
    
          // Calculate the rotation angle for each triangle based on its position and the time
          let angle = (x + y + time * 100) * rotationSpeed;
    
          // Apply a 4D-like distortion by modifying the triangle's position using sine and cosine
          let distX = sin(angle) * distortionFactor;
          let distY = cos(angle) * distortionFactor;
          let distZ = sin(angle + time) * distortionFactor;
    
          // Calculate a wave function for dynamic height variation based on grid position and offset
          let wave = sin((x + y) * 0.5 + offset) * 20;
    
          // Calculate colors that transition over time and position for a dynamic effect
          let c1 = lerpColor(color(255, 0, 150), color(0, 200, 255), (sin(offset) + 1) / 2);
          let c2 = lerpColor(color(0, 200, 255), color(255, 0, 150), (cos(offset) + 1) / 2);
    
          // Draw each triangle with 4D-like distortion and dynamic coloring
          push();  // Save the current transformation state
          translate(posX + distX, posY + distY + wave); // Apply distortion to position
          rotate(angle); // Apply rotation to the triangle
          
          // Set the color and draw the first triangle (upper half)
          fill(c1);
          triangle(
            -triangleSize / 2, -triangleSize / 2 + distZ,  // Top left vertex
            0, -triangleSize + distZ,  // Top center vertex
            triangleSize / 2, -triangleSize / 2 + distZ  // Top right vertex
          );
          
          // Set the color and draw the second triangle (lower half)
          fill(c2);
          triangle(
            -triangleSize / 2, triangleSize / 2 + distZ,  // Bottom left vertex
            0, triangleSize + distZ,  // Bottom center vertex
            triangleSize / 2, triangleSize / 2 + distZ  // Bottom right vertex
          );
          
          pop();  // Restore the previous transformation state
        }
      }
    }