Waves

index.html

<canvas id='canvas' width='400' height='400'></canvas>

script.js

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const width = canvas.width;
const height = canvas.height;

const loopDuration = 1;
const LINES = 20;

function draw() {
  context.fillStyle = '#fff';
  context.lineWidth = 1;
  context.fillRect(0,0,width, height);
  const time = ( .001 * performance.now() ) % loopDuration;
  for (let j = 0; j < LINES; j++) {
    const y = j * height / LINES;
    context.beginPath();
    context.moveTo(-10,y);
    // draw 1px segments for each line (from x = -10 to x = with + 20). For 50px segments:
    // for(let x=-10; x<width+20;x+=50) {
    for(let x=-10; x<width+20;x++) {
      const dx = .5 * width - x;
      const dy = .5 * height - y;
      // distance of the current segment to the center
      const d = Math.sqrt(dx*dx+dy*dy);
      // let offset = waveHeight * Math.sin( distanceFactor - timeFactor ) * heightScaleDependingDistance;
      let offset = 20 * Math.sin( .0002 * d * d - time * 2 * Math.PI / loopDuration ) * Math.exp( - .00002 * d * d );
      context.lineTo(x,y+offset);
    }
    //close the shape off-screen
    context.lineTo(width+20,y+2*height);
    context.lineTo(-10,y+2*height);
    context.closePath();
    context.fillStyle = `rgb(${(j/LINES)*100 + 100}, 128, 128)`;
    context.fill();
    context.stroke();
  }
  window.requestAnimationFrame(draw);
}

draw();

waves.markdown

Waves

Basic waves example from @thespite (https://github.com/spite/looper/blob/master/loops/2.js) with some minot tweaks This shares the same principle than https://generativeartistry.com/tutorials/joy-division/

A Pen by Gazzell on CodePen.

License.