flow

art.js

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;
document.body.appendChild(canvas);

const numWaves = 15;
const waveWidth = canvas.width;
const waveHeight = canvas.height / 2;
const waveAmplitude = 50;

function drawWave(xOffset = 0, amplitude, frequency, phase) {
  ctx.beginPath();
  for (let x = 0; x < waveWidth; x++) {
    const y = amplitude * Math.sin((x / waveWidth) * frequency + phase);
    ctx.lineTo(x + xOffset, y + waveHeight);
  }
  ctx.stroke();
}

function drawFlowingArt() {
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < numWaves; i++) {
    const amplitude = waveAmplitude * (1 + Math.sin(i / numWaves * Math.PI));
    const frequency = 1 + i / numWaves * 5;
    const phase = Math.random() * Math.PI * 2;
    const hue = i / numWaves;
    ctx.strokeStyle = `hsl(${hue * 360}, 80%, 70%)`;
    drawWave(0, amplitude, frequency, phase); // Call drawWave with xOffset set to 0
  }
}

drawFlowingArt();