#Codevember day05: Music

再生すると音が出ます，すいません🙇🙇🙇．

// fork and port from 94's processing code. 
// http://94.hatenadiary.jp/entry/2018/11/04/013440
let sound_top;
let sound_bottom;
let sound_right;
let sound_left;
let sound_vertical;
let sound_horizontal;

let balls = [];

let ball_num;

function preload() {
  sound_top = loadSound("hat.wav");
  sound_bottom = loadSound("tom.wav");
  sound_right = loadSound("snare.wav");
  sound_left = loadSound("kick.wav");
  sound_vertical = loadSound("clap.wav");
  sound_horizontal = loadSound("clap.wav");
}

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  background(220, 50, 30);

  ball_num = 4; //floor(random(3, 5));

  for (let i = 0; i < ball_num; i++) {
    let x = width / 2;
    let y = height / 2;

    let b = new Ball(x, y);
    balls.push(b);
  }
}

function draw() {
  background(220, 50, 30, 15);
  drawLines();
  for (let i = 0; i < balls.length; i++) {
    let b = balls[i];
    b.update();
    b.checkBorder();
    b.display();
  }
  if(random(100) < 0.1 && balls.length > 0){     
    balls.shift();
  }  
}

function mousePressed(){
    balls.push(new Ball(mouseX,mouseY));
}

function drawLines() {
  strokeWeight(3);
  stroke(0, 0, 50, 50);
  let i = 0;
  for (let x = 0; x < width; x = x + 15) {
    if (i % 2 == 0) {
      line(x, height / 2, x + 15 / 2, height / 2);
    }
    i = i + 1;
  }
  strokeWeight(3);
  stroke(0, 0, 50, 50);
  let j = 0;
  for (let y = 0; y < height; y = y + 15) {
    if (j % 2 == 0) {
      line(width / 2, y, width / 2, y + 15 / 2);
    }
    j = j + 1;
  }

}

class Ball {

  constructor(_x, _y) {
    this.init(_x, _y);
  }
  
  init(_x, _y) {
    this.count = 0;
    this.d_max = 15;
    this.d_min = 3;
    this.x = _x;
    this.y = _y;
    this.d = random(this.d_min, this.d_max);
    this.c = color(random(360), random(60, 100), random(80, 100));
    this.sx = random(3, 5);
    if (random(100) < 50) {
      this.sx *= -1;
    }
    this.sy = random(3, 5);
    if (random(100) < 50) {
      this.sy *= -1;
    }

  }

  display() {
    fill(this.c);
    noStroke();
    ellipse(this.x, this.y, this.d * 2, this.d * 2);

  }

  update() {
    this.x = this.x + this.sx;
    this.y = this.y + this.sy;
  }

  checkBorder() {
    let volume = map(this.d, this.d_min, this.d_max, 0.01, 0.5);
    if (this.x - this.d < 0) {
      this.sx = this.sx * -1;
      sound_right.setVolume(volume);
      sound_right.play();
      this.drawRipple();
      this.count++;
    }
    if (this.x + this.d > width) {
      this.sx = this.sx * -1;
      sound_left.setVolume(volume);
      sound_left.play();
      this.drawRipple();
      this.count++;
    }
    if (this.y - this.d < 0) {
      this.sy = this.sy * -1;
      sound_top.setVolume(volume);
      sound_top.play();
      this.drawRipple();
      this.count++;
    }
    if (this.y + this.d > height) {
      this.sy = this.sy * -1;
      sound_bottom.setVolume(volume);
      sound_bottom.play();
      this.drawRipple();
      this.count++;
    }

    if (abs(this.x - width / 2) < 3) {
      sound_horizontal.setVolume(volume);
      if (!sound_horizontal.isPlaying()) {
        sound_horizontal.play();
      }
      this.drawRipple();
      this.count++;
    }
    if (abs(this.y - height / 2) < 3) {
      sound_vertical.setVolume(volume);
      if (!sound_vertical.isPlaying()) {
        sound_vertical.play();
      }
      this.drawRipple();
      this.count++;
    }

    if (this.count > 20) {
      this.reset();
    }
  }
  
  reset() {
    let x = random(50, width - 50);
    let y = random(50, height - 50);
    this.init(x, y);
  }

  drawRipple() {
    for (let i = 5; i > 0; i--) {
      let t = map(i, 5, 0, 5, 30);
      fill((hue(this.c) + 90) % 360, 80, 100, t);
      ellipse(this.x, this.y, this.d + i * 5, this.d + i * 5);
    }
  }
}