Scribbling over the screen

by Vasil Svetoslavov

HTML

<canvas id="scribble"></canvas>
<form>
  <label>First Name</label>
  <input type="text">
  <br>
  <label>Last Name</label>
  <input ytpe="text">
  <br>

CSS

#scribble{
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none; /* да не пречи на кликовете по сайта */
}

JavaScript

(() => {
  const c = document.getElementById('scribble');
  const ctx = c.getContext('2d');

  let W = 0, H = 0;

  function resize() {
    const dpr = Math.max(1, window.devicePixelRatio || 1);
    W = innerWidth; H = innerHeight;
    c.width  = Math.floor(W * dpr);
    c.height = Math.floor(H * dpr);
    c.style.width = W + 'px';
    c.style.height = H + 'px';
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
  }
  resize();
  addEventListener('resize', resize);

  const rand = (a,b) => Math.random() * (b-a) + a;
  const clamp = (v,a,b) => Math.max(a, Math.min(b, v));

  // Време за изчакване преди да стартира анимацията
  const MAX_WAIT_SECONDS = 10;
  // ✅ Контрол на скоростта (глобално)
  const SPEED = 0.75; // 0.4 бавно, 1 нормално, 1.4 бързо

  // ✅ Големи разстояния НЕ се рисуват
  const MAX_SEGMENT_DEFAULT = 75; // 40–90 според вкуса

  // “кутия с химикали”
const PALETTE = [
  // черни / сиви
  [ 25,  25,  25],   // черно
  [ 90,  90,  90],   // сиво
  [160, 160, 160],   // светло сиво

  // червени / розови
  [220,  40,  60],   // червено
  [255,  90, 120],   // розово
  [255, 140, 180],   // бебешко розово

  // оранжеви / жълти
  [255, 110,  40],   // оранжево
  [255, 160,  60],   // мандарина
  [255, 210,  80],   // жълто
  [255, 240, 140],   // светло жълто

  // зелени
  [ 40, 180,  80],   // зелено
  [ 90, 220, 120],   // светло зелено
  [ 40, 140, 140],   // тюркоаз
  [120, 220, 200],   // мента

  // сини
  [ 40, 100, 220],   // синьо
  [ 80, 150, 255],   // небесно
  [120, 190, 255],   // бебешко синьо
  [ 30,  60, 120],   // тъмно синьо

  // лилави
  [120,  60, 180],   // лилаво
  [160, 100, 220],   // люляк
  [200, 140, 255],   // пастелно лилаво

  // кафяви / земни (много “детски”)
  [140,  90,  40],   // кафяво
  [190, 130,  80],   // светло кафяво
  [110,  70,  40],   // тъмно кафяво

  // циан / неон-ish
  [ 40, 220,...