let angles = []; // our angles here represent the x-positions

let angleV = [];

let angleA = [];

let r = 5;

let touchedLineColor = [50, 50, 250]; // Color when touched

let lineDrawn = false; // Flag to check if the line is drawn

let lineX = -350; // Starting point for the line animation

​

// let waveGraduale =0;

// let numSegments = 10;

 let waveFullyDrawn = false;

let wave = -450;

​

let song;

let song1;

let hasPlayed = false;

let hasPlayed1 = false;

​

function preload() {

  song = loadSound("/sound.mp3");

  song1 = loadSound("/beat.mp3");

}

​

function setup() {

  createCanvas(500, 500);

​

  total = floor(width / r);

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

    angles[i] = map(i, 0.5, total, 0, TWO_PI*4);

    angleV[i] = 0;

    angleA[i] = i * 0.000001;

  }

}

​

function draw() {

  background(0, 105);

  translate(250, 250);

​

  //play sound

  if (!song1.isPlaying() && !hasPlayed && !lineDrawn) {

    song1.play();

    hasPlayed1 = true;

  }

  //Draw the line

  if (!lineDrawn) {

    stroke(random(50, 180), random(50, 180), random(200, 250)); // Color for the middle line

    strokeWeight(1);

    rotate(PI / 3);

    line(lineX, random(r) *5, lineX * -PI * r, 0); // Draw the line segment

    lineX += 0.5; // Move the line to the right

​

    // When the line is fully drawn, set the flag to true

    if (lineX > 450) {

      lineDrawn = true;

    }

    return; // Exit

  }

  // Play sound and loop it

  if (!song.isPlaying() && !hasPlayed) {

    song.play();

    song.setLoop(true); // This makes the song loop continuously

    hasPlayed = true;

  }

​

  //Draw the wave

  if(!waveFullyDrawn){

  rotate(PI / 3);

​

  for (let i = 0; i < angles.length; i++) {

    beginShape();

    for (let i = 0; i < angles.length; i++) {

      let y = map(sin(angles[i]), -1, 1, -150, 150);

      let x = map(i, 0, angles.length, -350, 350);

​

      let particleSize = r * 0.9; // Default particle size

​

      // Check if the particle touches the line (y is close to 0)

      if (abs(y) < 5) {

        //draw the shape gradually on canvas

​

        fill(touchedLineColor); // Change color when touching

        particleSize = r * 2.5; // Increase the size of the particle

      } else {

        fill(getWaveColor(y)); // Get color based on y value

      }

​

      stroke(getWaveColor(y));

      strokeWeight(1);

      line(cos(x), 0, x, y); // Draw line from middle to particle

      noStroke();

      circle(x, y, particleSize); // Draw the particle

      noFill();

      vertex(x, y);

      endShape();

    }

    vertex.x+=0.5;

    vertex.y+=0.5;

​

    //   // Redraw the horizontal line in the middle to ensure it's always visible

    //   let R,g,b;

    //   R = random(200,255);

    //   g = random(200,255);

    //   b = random(200,255);

    //   stroke(random(R),random(g),random(b),20); // Color for the middle line

    //   strokeWeight(2);

    //     line(-350, 0, 350, 0); // Redraw the line across the canvas

​

    angleV[i] = constrain(angleV[i], -0.01, 0.5);

    angles[i] -= angleV[i];

    angleV[i] += angleA[i];

     if(wave>450){

  waveFullyDrawn = true;}

  }

}

  return; // Exit

}

​

// Function to calculate the color of the wave based on y position

function getWaveColor(B) {

  // Map the y position to a range of colors from light to dark

  let blish = map(B, -50, 90, 150, 250); // Varies from light to dark

  return color(blish, blish, 250); // Color with varying blueish shades

}

​