JSFiddle - React, Tailwind, and code Playground

wave test

by greg gorlen

HTML

<canvas id="paper" height=300 width=500></canvas>

CSS

body {
  height: 95vh;
  display: flex;
}

#paper {
  margin: auto;
  border: 1px solid #000;
}

JavaScript

"use strict";


let canvas = document.getElementById("paper");
let ctx = canvas.getContext("2d");

let points = [];

let Point = function (x, y, angle, speed) {
  this.x = x;
  this.y = y;
  this.angle = angle;
  this.speed = speed;
};

Point.prototype.move = function () {
  this.y = 20 * Math.sin(this.angle) + canvas.height/ 2;
  this.angle += this.speed;
};

let start = 0.1;
for (let i = 0; i < canvas.width; i += 10) {
  points.push(new Point(i, canvas.height / 2, start, 0.05));
  start += 0.04;
}

function rInt(lo, hi) {
  return Math.random() * (hi - lo) + lo | 0;
}

(function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  for (let i = 0; i < points.length; i++) {
    points[i].move();
    ctx.lineTo(points[i].x, points[i].y);
  }
  ctx.stroke();
  
  requestAnimationFrame(update);
})();