let width = 400;
let height = 400;

function setup() {
  createCanvas(width, height);
}

function draw() {
  background(255);
  drawGrid();
  drawWave();
}

let maxGridY = 25; // Y座標軸の最大値
let maxGridX = maxGridY*2; // 今回は0〜Y*2で描画

// 背景グリッド描画
function drawGrid() {
  // 背景の線
  strokeWeight(2);
  for (let x = 0; x < maxGridX; x++) {
    for (let y = -maxGridY; y < maxGridY; y++) {
      // 縦線
      if (x+1 == 0) {
        stroke(180, 180, 180);
      } else {
        stroke(220, 220, 220);
      }
      drawLineCanvas(x+1, y, x+1, y+1);
      // 横線
      if (y+1 == 0) {
        stroke(180, 180, 180);
      } else {
        stroke(220, 220, 220);
      }
      drawLineCanvas(x, y+1, x+1, y+1);
    }
  }
}

let s = 4; // 波の速度(m/s)
let dt = 1/60; // 1ステップの時間(s)
let dx = 0.2; // 要素間の距離(m)
let alpha = (s*dt/dx)**2; // 波動方程式で使用する係数
let attenuation = 0.985; // 適当な減衰率

// u(x,t) -> wave[t][x]
// tは過去、現在、未来で3つ分格納しておく.
// [0]未来 -> [1]現在 -> [2]過去 
let wave = [];
let waveLengthX = 50+1;

// 波の描画
function drawWave() {
  // 波情報を初期化
  if (wave.length == 0) {
    for (let i = 0; i < 3; i++) { // 未来、現在、過去の3つ分
      wave.push(new Array(waveLengthX).fill(0));
    }
  }
  
  // マウスクリックで波を発生させる
  if (mouseIsPressed) {
    let x = Math.floor(mouseX / width * maxGridX);
    let maxPower = 20;
    let power = Math.abs(height/2 - mouseY)/height/2 * maxPower;
    wave[0][x] = power; // 適当に波を発生させてみる
  }
  
  // 波情報を更新
  wave.unshift(wave.pop()); // 一つ分動かす
  for (let x = 0; x < waveLengthX; x++) { // 端は0で固定する
    // 輪の場合、端と端を繋ぐ
    // let prevX = x == 0 ? waveLengthX-1 : x-1;
    // let nextX = x == waveLengthX-1 ? 0 : x+1;
    
    // 自由端の場合、端は一つ内側を見る
    let prevX = x == 0 ? 1 : x-1;
    let nextX = x == waveLengthX-1 ? waveLengthX-2 : x+1;
    
    // 波動方程式を使った計算
    let V = wave[1][x];
    let R = wave[1][nextX];
    let L = wave[1][prevX];
    let P = wave[2][x];
    // 次の状態であるNを求める
    let N = alpha*(R+L-2.0*V) + 2.0*V - P;
    N *= attenuation; //　波を減衰させる
    wave[0][x] = N;
  }
  
  // 波を描画
  for (let x = 0; x < waveLengthX; x++) {
    // 次の波と線を繋げる
    if (x+1 < waveLengthX) {
      strokeWeight(7);
      stroke(0, 0, 255);
      drawLineCanvas(x, wave[1][x], x+1, wave[1][x+1]);
    }
    // 線より下を塗りつぶす
    fill(0, 0, 255);
    noStroke();
    drawRectCanvas(x-0.5, wave[1][x]-0.2, x+0.5, -maxGridY);
  }
}

// 受け取った座標位置綺麗に表示する
function drawLineCanvas(fromX, fromY, toX, toY) {
  fromX *= width/maxGridX;
  fromY *= height/2/maxGridY;
  toX *= width/maxGridX;
  toY *= height/2/maxGridY;
  let offset = [0, height/2];
  line(fromX+offset[0], height-(fromY+offset[1]), toX+offset[0], height-(toY+offset[1]));
}
function drawRectCanvas(fromX, fromY, toX, toY) {
  fromX *= width/maxGridX;
  fromY *= height/2/maxGridY;
  toX *= width/maxGridX;
  toY *= height/2/maxGridY;
  let offset = [0, height/2];
  rect(fromX+offset[0], height-(fromY+offset[1]), toX-fromX, height-(toY-fromY+offset[1]));
}

// 2次元ベクトル
class Vec2 {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  mul(s) {
    return new Vec2(this.x*s, this.y*s);
  }  
  normalize() {
    let l = sqrt(this.x**2 + this.y**2);
    return new Vec2(this.x/l, this.y/l);
  }
  rotate(rad) {
    return new Vec2(
      this.x*cos(rad) - this.y*sin(rad),
      this.x*sin(rad) + this.y*cos(rad)
    );
  }
}