var y0, x1, y1, x2, y2;

let step, maxSteps, dir;

​

let paused = false;

​

function keyPressed() {

  if (key === " ") paused = !paused;

}

function drawBackground() {

  // background(255);

  background(0)

​

  // fill(color(0, 255, 0, 100));

  fill(color(0, 0, 0, 100));

  noStroke();

  beginShape();

  vertex(0, 0);

  vertex(width, height);

  vertex(width, 0);

  endShape(CLOSE);

​

  // fill(color(255, 0, 0, 100));

  fill(color(0, 0, 0, 100));

  noStroke();

  beginShape();

  vertex(0, 0);

  vertex(0, height);

  vertex(width, height);

  endShape(CLOSE);

​

  // fill(color(255,255,255,50 ));

  fill(color(0, 0, 0, 50));

  rect(0, height / 2 - 50, width, 100);

​

  // fill(color(255,0,0,50));

  fill(color(0, 0, 0, 50));

  rect(0, height / 16 - 14, width, 178);

  // fill(color(255,0,255,50));

  fill(color(0, 0, 0, 50));

  rect(0, height-200, width, 178);

  let _offset = 50;

  stroke(color(255,255,255,50));

  strokeWeight(0.5);

  let ctr = 0;

  for (let i = -width; i < width; i+= _offset) {

    if ((ctr%3)==0) stroke(color(255,255,255,50));

    else if ((ctr%3)==1) stroke(color(255,0,0,50));

    else stroke(color(0,255,0,50));

    line(i,0,width+i,height);

    ctr++;

  }

}

function setup() {

  step = 1;

  dir = true;

  maxSteps = 50;

  createCanvas(720, 600);

  // createCanvas(7200,7200);

  angleMode(RADIANS);

  drawBackground();

  // fill(color(255,255,255,50));

  // beginShape();

  // vertex(-50,height+50);

  // vertex(width+50,-50);

  // vertex(width-50,-50);

  // vertex(-50,height-50);

  // endShape(CLOSE);

​

  // noLoop();

​

  y0 = [];

  x1 = [];

  y1 = [];

  x2 = [];

  // drawSineWave(step, _y[j]);

  y2 = [];

}

​

function draw() {

  if (!paused) {

    // drawBackground();

    // draw 50 sinusoidal waves

    let _y = [

      height / 4,

      height / 2,

      height / 8,

      height - height / 4,

      height - height / 8,

    ]; // 2 * (height / 4)];

​

    if (dir) {

      for (let j = 0; j < _y.length; j++) {

        drawSineWave(step, _y[j]);

        // for (let i = 1; i < 50; i++) {

        // drawSineWave(i, _y[j]);

        // }

      }

      step++;

​

      if (step > maxSteps) dir = false;

    } else {

      for (let j = 0; j < _y.length; j++) {

        drawSineWave(step, _y[j]);

        // for (let i = 1; i < 50; i++) {

        // drawSineWave(i, _y[j]);

        // }

      }

      step--;

​

      if (step <= 0) {

        dir = true;

      } //console.log("done"); noLoop(); }

    }

  }

}

​

function drawSineWave(modifier, _y) {

  for (let i = 0; i <= width; i++) {

    y0[i] = _y; // height / 4;

​

    if (i === 0) {

      y1[i] = y0;

      // slighly displace each wave

      x1[i] = 0 + modifier;

    } else {

      y1[i] = y1[i - 1];

      x1[i] = x1[i - 1];

    }

​

    let amplitude = (i / 10) * (modifier / 20);

    if (_y > height / 2 + 1)

      stroke(`rgba(0, 180, 0, ${((1 / width) * (width - x1[i] / 2)) / 5})`);

    else if (_y < height / 2 - 1)

      stroke(`rgba(180, 0, 0, ${((1 / width) * (width - x1[i] / 2)) / 5})`);

    else {

      stroke(`rgba(255, 255, 255, ${((1 / width) * (width - x1[i] / 2)) / 5})`);

      // stroke(`rgba(0, 0, 0, ${((1 / width) * (width - x1[i] / 2)) / 5})`);

      amplitude = ((width-i) / 10) * ((maxSteps-modifier) / 20);

    }

​

    // try to mirror

    // let amplitude;

    // let amplitude = (i / 10) * (modifier / 20);

    amplitude = constrain(amplitude, 0, 50);//*14);

    // if (i < (width/2)) amplitude = ((width-i) / 10) * ((maxSteps-modifier) / 20);

    // else amplitude = (i / 10) * (modifier / 20);

​

    x2[i] = x1[i] + 1;

    y2[i] = amplitude * sin(i / 10) + y0[i];

​

    line(x1[i], y1[i], x2[i], y2[i]);

​

    x1[i] = x2[i];

    y1[i] = y2[i];

  }

}

​