My Sketch

let churchSound;

let jerichoSound;

let fft;

// Fast Fourier Transform = ses sinyalini ayrı ayrı frekans bileşenlerine ayırarak analiz eder.

//Her bir frekans bandında ne kadar genlik bulunduğunu gösterir.

let amplitude;

//Genlik, bir ses sinyalinin genel yüksekliğini veya hacmini ölçer.

//Belirli bir zamanda sesin yoğunluğunu veya enerjisini temsil eder.

​

let churchVolumeSlider;

let jerichoVolumeSlider;

​

function preload() {

  churchSound = loadSound('church.mp3');

  jerichoSound = loadSound('jericho.mp3');

}

​

function setup() {

  createCanvas(800, 600);

  background(30);

​

  fft = new p5.FFT();

  amplitude = new p5.Amplitude();

​

  // Create buttons 

// Click to play- pause. Click again to contimnue. 

  // Allows to play both songs at the same time

  let churchButton = createButton('Play/Pause Church');

  churchButton.position(10, 100);

  churchButton.mousePressed(toggleChurch);

​

  let jerichoButton = createButton('Play/Pause Jericho');

  jerichoButton.position(180, 100);

  jerichoButton.mousePressed(toggleJericho);

​

  // Create volume sliders

  //arange volume according to to personal like

  churchVolumeSlider = createSlider(0, 1, 0.5, 0.01);

  churchVolumeSlider.position(20, 60);

  churchVolumeSlider.style('width', '120px');

​

  jerichoVolumeSlider = createSlider(0, 1, 0.5, 0.01);

  jerichoVolumeSlider.position(160, 60);

  jerichoVolumeSlider.style('width', '120px');

}

​

function draw() {

  background(30, 20); // Transparent background for smoother fading trails

​

  // Adjust volumes based on sliders

  churchSound.setVolume(churchVolumeSlider.value());

  jerichoSound.setVolume(jerichoVolumeSlider.value());

​

  // Only analyze when track is playing

  if (!churchSound.isPlaying() && !jerichoSound.isPlaying()) return;

​

  let spectrum = fft.analyze();

  let bass = fft.getEnergy('bass');

  let treble = fft.getEnergy('treble');

​

  translate(width / 2, height / 2);

​

  for (let i = -200; i < 200; i += 10) {

    let angle = frameCount * 0.05 + i * 0.1;

    let x = i * 2;

    let y1 = sin(angle) * (50 + bass * 0.3);

    let y2 = cos(angle) * (50 + treble * 0.1);

​

    let size = 8;

    let lineLength = map(bass, 0, 255, 50, 300);

​

    noStroke();

​

    // Top wave (red, bass, fading)

    fill(255, 0, 0, map(bass, 0, 255, 50, 120));

    ellipse(x, y1, size, size);

​

    // Bottom wave (grey, treble, fading)

    fill(150, 150, 150, map(treble, 0, 255, 30, 100));

    ellipse(x, y2, size, size);

​

    // Extended connecting lines (fading)

    stroke(255, map(bass, 0, 255, 20, 80));

    line(x, y1, x, y1 - lineLength);

    line(x, y1, x, y2);

  }

}

​

function toggleChurch() {

  if (churchSound.isPlaying()) {

    churchSound.pause();

  } else {

    churchSound.loop();

  }

}

​

function toggleJericho() {

  if (jerichoSound.isPlaying()) {

    jerichoSound.pause();

  } else {

    jerichoSound.loop();

  }

}

​