​

* LOOP: https://www.looperman.com/loops/detail/138359/lonely-140bpm-rnb-pad-loop

* BACKGROUND WAVES: https://soundcloud.com/ewhrdg/sonic-environments-final (MINE)

* PARTICLES: https://www.openprocessing.org/sketch/529835

​

 */

​

var sound;

​

var pan = {}

var speed = {}

​

​

​

var loop1;

var lb1;

​

var particlesQuantity = 22222;

​

var positionX = new Array(particlesQuantity);

var positionY = new Array(particlesQuantity);

var velocityX = new Array(particlesQuantity).fill(0);

var velocityY = new Array(particlesQuantity).fill(0);

​

​

​

// var button;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  sound = loadSound('waves.mp3', loaded);

  loop1 = loadSound('lonely.wav');

  lb1 = new lb(width/2, height/2, 64);

  for (var particle = 1; particle < particlesQuantity; particle++) {

        positionX[particle] = random(0, width);

        positionY[particle] = random(0, height);

    }

  //starting position : corner

    positionX[0] = 0;

    positionY[0] = 0;

}

​

function loaded() {

  console.log("loaded");

    sound.play();

  sound.setVolume(1);

}

​

​

function draw() {

  background(0, 128);

  // sound.setVolume(sliderVolume.value());

  // sliderVolume.position(20,20);

  pan.x = constrain(mouseX, 0, width); 

  var panning = map(pan.x, 0, width,-1.0, 1.0);

  sound.pan(panning);

  speed.y = constrain(mouseY, 0, height); 

  var rate = map(speed.y, 0, height ,0.5, 1.5);

  sound.rate(rate);

  lb1.display(mouseX, mouseY);

  //To give particles its gooey feeling decrease velocity and randomness in position

  velocityX[0] = velocityX[0] *0.5 + (mouseX - positionX[0]) * 0.1;

    velocityY[0] = velocityY[0] *0.5 + (mouseY - positionY[0]) * 0.1;

    positionX[0] += velocityX[0];

    positionY[0] += velocityY[0];

    for (var particle = 1; particle < particlesQuantity; particle++) {

    // so that the thing is not a square of particles that follows

        var whatever = 1024 / (sq(positionX[0] - positionX[particle]) + sq(positionY[0] - positionY[particle]));

//      velocityX[particle] = velocityX[particle] * 0.95 + (velocityX[0] - velocityX[particle]) * whatever;

//      velocityY[particle] = velocityY[particle] * 0.95 + (velocityY[0] - velocityY[particle]) * whatever;

    velocityX[particle] = velocityX[particle] + (velocityX[0] - velocityX[particle]) * whatever ;

        velocityY[particle] = velocityY[particle] + (velocityY[0] - velocityY[particle]) * whatever ;

        positionX[particle] += velocityX[particle];

        positionY[particle] += velocityY[particle];

    //boundaries , X

        if ((positionX[particle] < 0 && velocityX[particle] < 0) || (positionX[particle] > width && velocityX[particle] > 0)) {

            velocityX[particle] = -velocityX[particle];

        }

//      if ((positionY[particle] < 0 && velocityY[particle] < 0) || (positionY[particle] > height && velocityY[particle] > 0)) {

//          velocityY[particle] = -velocityY[particle];

//      }

    //Actually Draw the particles 

        point(positionX[particle], positionY[particle]);

    }

}

function mouseMoved(){

  if (lb1.contains(mouseX, mouseY)) {

    loop1.play();

    loop1.setVolume(0.5);}

  else{

    loop1.pause();

  }

}

​

​

var lb = function(x_, y_, r_) {

  // Location and size

  var x = x_;

  var y = y_;

  var r = r_;

  this.contains = function(mx, my) {

    if (dist(mx, my, x, y) < r) {

      return true;

    } else {

      return false;

    }

  };

​

  // Show the doorbell (hardcoded colors, could be improved)

  this.display = function(mx, my) {

    if (this.contains(mx, my)) {

            blendMode(ADD)

        stroke(random(0,255), random(0,255), random(0,255))

    }

​

     else {

       blendMode(BLEND)

       // background(0, 0, 0)

       background(0, 128);

       stroke(64, 255, 255);

    }

  };

};

​

​

function mousePressed() {

​

  for (var particle = 1; particle < particlesQuantity; particle++) {

        positionX[particle] = random(0, width);

        positionY[particle] = random(0, height);

    }

}

​