//Mac

//Chrome

//https://nnamm.com/blog/3669よりコピペ

//文字化けなし



/*

  https://ics.media/entry/18812 の動作をp5jsで再現する。

  HTML Canvas要素とJavaScriptで実現している。

  自分なりに作ってから上記URLのp5js版のコードを移植したもの。

*/



let stageW = innerWidth;

let stageH = innerHeight;

const lineNum = 100; // ラインの数

const segmentNum = 100; // 曲線の分割数

const amplitude = stageH / 2; // 振幅



function setup(){ 

  createCanvas(stageW, stageH);

  colorMode(HSB);

  strokeWeight(1);

}



function draw() {

  background(0, 0, 0);

  noFill();

  drawCurve();

}



function drawCurve() {

  [...Array(lineNum).keys()].forEach(j => {

    const time = Date.now() / 6000; // 擬似アニメーション用の媒介変数

    const coefficient = 50 + j; // 係数



    // ラインのカラー設定

    const h = round(j / lineNum * 360); // 色相

    const s = 100; // 彩度

    const l = round(j / lineNum * 100); // 明度



    beginShape();

    stroke(h, s, l);



    [...Array(segmentNum).keys()].forEach(i => {

      // X座標

      const x = i / (segmentNum - 1) * stageW;

      // Y座標

      const px = i / coefficient; // 横軸の入力値

      const py = (j / 50 + time); // 時間の入力値

      //const y = amplitude * noise(px, py) + stageH / 3;

      const y = (noise(px, py)) * stageH;

      vertex(x, y);

    });

    endShape();

  });

}



// マウスを押している間は処理を止める

function mousePressed() {

  noLoop();

}



function mouseReleased() {

  loop();

}