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 customFont;

​

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

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

let angle = 0;

​

function preload() {

  // Load the font in the preload function

  customFont = loadFont('DelaGothicOne.ttf'); 

}

​

function setup() {

  textFont(customFont);

  createCanvas(600, 840);

​

  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(30,141,75)");

  noStroke();

  textAlign(CENTER);

​

​

  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(45);

  fill(255);

  text("JOIN THE WAVES", width / 2, height/1.04);

    textSize(80);

  fill(255);

    text("DYNAMIC", width/2 , height/9);

    text("NOISES", width/2 , height/5.3);

}

​

​

​

​

​

​

​

​