some java for Processing IDE I'll try tanslatate to js

import beads.*;
import java.util.Random;
import java.util.Set;
import java.util.HashSet;
//particles
int MAX_PARTICLES = 1024;
color A, B;
Particle[] particles;

Buffer b;
WavePlayer wp;
AudioContext ac;
void setup() {
  //vis
  size(1024, 1024);
  colorMode(HSB, 360, 100, 100);
  A = color(0, 75, 100);
  B = color(50, 40, 100);
  noStroke();
  rectMode(CENTER);

  particles = new Particle[MAX_PARTICLES];
  b = new Buffer(MAX_PARTICLES);

  for (int i = 0; i < MAX_PARTICLES; i++) {
    float y = random(height);
    particles[i] = new Particle(i, random(width), y);
    b.buf[i] = (y/height) * 2 - 1;
  }

  //aud

  wp = new WavePlayer(220, b);
  ac = AudioContext.getDefaultContext();
  ac.out.addInput(wp);
  ((Gain)ac.out).setValue(0.01);
  ac.start();
}

void draw() {
  //background(0);
  fill(0, 10);
  rect(width/2, height/2, width, height);
  for (int i = 0; i < MAX_PARTICLES; i++) {
    particles[i].update();
    particles[i].display();
    b.buf[i] = (particles[i].pos.y/height) * 2 - 1;
  }
}

void mousePressed() {
  if (mouseButton == LEFT) {
    for (int i = 0; i < MAX_PARTICLES; i++) {
      particles[i].seek();
    }
  } else if (mouseButton == RIGHT) {
    //shuffle the index of the particles[]
    Particle[] temp = new Particle[MAX_PARTICLES];
    Random r = new Random();
    Set<Integer> shuffleIndex = new HashSet<>();
    for (int i = 0; i < MAX_PARTICLES; i++) {
      while (true) {
        int num = r.nextInt(MAX_PARTICLES);
        if (shuffleIndex.contains(num) == false) {
          shuffleIndex.add(num);
          temp[i] =  new Particle(i, particles[num].pos.x, particles[num].pos.y);
          break;
        }
      }
    }
    particles = temp;
  }
}

void keyPressed() {
  int wave_ = keyCode - 49;
  for (int i = 0; i < MAX_PARTICLES; i++) {
    particles[i].newTarget(wave_);
  }
}

class Particle {
  PVector pos, vel, target;
  int index;
  boolean seeking;

  Particle(int index_, float x_, float y_) {
    index = index_;
    pos = new PVector(x_, y_);
    vel = PVector.random2D();
    target = new PVector(index, index);
    target = new PVector(index, sin((float)index/MAX_PARTICLES * TWO_PI) * (height/2) + height/2);
    seeking = false;
  }
  void update() {
    if (pos.x > width)pos.x = 0;
    if (pos.x < 0)pos.x = width;
    if (pos.y > height) pos.y = 0;
    if (pos.y < 0) pos.y = height;
    pos.add(seeking ? PVector.sub(target, pos).mult(0.003) : vel);
  }
  void display() {
    fill(lerpColor(A, B, (float)index/MAX_PARTICLES));
    rect(pos.x, pos.y, 2, 2);
  }

  void newTarget(int wave) {
    switch (wave) {
      case(0):
      target = new PVector(index, sin((float)index/MAX_PARTICLES * TWO_PI) * (height/2) + height/2);
      if (index == 0)println("SINE");
      break;
      case(1):
      target = new PVector(index, index > width/2 ? height : 0);
      if (index == 0)println("SQUARE");
      break;
      case(2):
      target = new PVector(index, index);
      if (index == 0)println("SAW");
      break;
      case(3):
      target = new PVector(index, random(height));
      if (index == 0)println("NOISE");
      break;
    default :
      target = new PVector(index, sin((float)index/MAX_PARTICLES * TWO_PI) * (height/2) + height/2);
    }
  }

  void seek() {
    seeking = !seeking;
    vel = (seeking) ? PVector.sub(target, pos).mult(0.001) : PVector.random2D();
  }
}