JSFiddle - React, Tailwind, and code Playground

by notupdated

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Psychedelic Swirl</title>
  <style>
    /* Remove scrollbars and ensure canvas fills the window */
    html, body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: #000; /* Fallback background */
      height: 100%;
      width: 100%;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="psychedelicCanvas"></canvas>

  <script>
    const canvas = document.getElementById('psychedelicCanvas');
    const ctx = canvas.getContext('2d');

    let width, height;

    // Dynamically resize canvas to fit window
    function resizeCanvas() {
      width = window.innerWidth;
      height = window.innerHeight;
      canvas.width = width;
      canvas.height = height;
    }
    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

    // Main animation loop
    function animate(time) {
      const imageData = ctx.createImageData(width, height);
      const data = imageData.data;

      // Loop through every pixel
      for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
          const index = (y * width + x) * 4;

          // Combine multiple sine waves for a swirling effect
          // Adjust the multipliers (0.02, 0.003, etc.) to change the “grooviness”
          const value =
            Math.sin(x * 0.02 + time * 0.002) +
            Math.sin(y * 0.02 + time * 0.003) +
            Math.sin((x + y) * 0.02 + time * 0.001);

          // 'value' roughly goes from -3 to +3. Shift/scale to [0..1] range
          const normalized = (value + 3) / 6;

          // Map normalized value to red/blue channels
          // Tweak these to experiment with colors
          const r = normalized * 255;     // red channel
          const g = 0;                   // keep green at 0 for strong red/blue contrast
          const b = (1 - normalized) * 255; // blue channel

          data[index + 0] = r;     // R
   ...