let rectWidth = 2; // Initial width of the rectangle

let minHeight = 10; // Minimum height of the rectangle

let maxHeight = 500; // Maximum height of the rectangle

let spacing = 5; // Spacing between rectangles

let cornerRadii = [];

let xPositions = [];

​

let amplitude = 110; // Adjust this value to control the sway amount

let frequency = 0.13; // Adjust this value to control the sway speed

let angle = 0;

​

function setup() {

  createCanvas(540, 540);

​

  let totalWidth = numRectangles * (rectWidth + spacing);

  // Calculate the starting x-coordinate to center the shapes

  let startX = (width - totalWidth) / 2;

​

  for (let i = 0; i < numRectangles; i++) {

    cornerRadii.push(5 + i * 5); // Gradually increasing corner radius values

    xPositions.push(startX + i * (rectWidth + spacing));

  }

}

​

function draw() {

  // background("rgb(181, 0, 121)");

  background(0);

  noStroke();

​

  for (let i = 0; i < numRectangles; i++) {

    let x = xPositions[i] + amplitude * cos(angle); // Add horizontal displacement

    let centerY = height / 2; // Calculate the vertical center

    let cornerRadius = cornerRadii[i];

​

    // Calculate the height for this rectangle with a gradient

    let rectHeight = map(i, 0, numRectangles + 5, minHeight, maxHeight);

​

    rect(x, centerY - rectHeight / 2, rectWidth, rectHeight, cornerRadius); // Draw the rectangle

    angle += frequency; // Increase the angle for oscillation

  }

  textSize(20);

  fill(255);

  // text("SWAYING THROUGH", width / 2.95, height/1.1);

}

​

​

​

​

​

​

​

​