// Una frase, un cielo. La stessa frase dà sempre lo stesso cielo.

function cielo(frase, w = 800, h = 500) {
  let acc = 0;
  const dado = (n) => {
    acc = (acc * 1103515245 + n * 12345 + 7) % 2147483648;
    return acc / 2147483648;
  };
  for (const c of frase) dado(c.charCodeAt(0));

  const parole = frase.toLowerCase().split(/\s+/).filter(Boolean);
  let stelle = "", linee = "";

  parole.forEach((parola, i) => {
    // ogni parola occupa la sua regione di cielo
    const cx = (0.12 + dado(i + 1) * 0.76) * w;
    const cy = (0.14 + dado(i + 7) * 0.72) * h;
    const punti = [];

    for (const lettera of parola) {
      const codice = lettera.charCodeAt(0);
      const a = dado(codice) * Math.PI * 2;
      const d = 12 + dado(codice + 3) * 52;
      const x = cx + Math.cos(a) * d, y = cy + Math.sin(a) * d;
      // vocali più luminose: sono quelle che tengono insieme le parole
      const vocale = "aeiouàèéìòù".includes(lettera);
      const r = vocale ? 2.6 + dado(codice) * 1.8 : 1.1 + dado(codice) * 1.2;
      punti.push([x, y]);
      stelle += `<circle cx="${x.toFixed(1)}" cy="${y.toFixed(1)}" r="${r.toFixed(2)}" fill="#fff" opacity="${(vocale ? .95 : .6).toFixed(2)}"/>`;
    }
    for (let k = 1; k < punti.length; k++) {
      linee += `<line x1="${punti[k-1][0].toFixed(1)}" y1="${punti[k-1][1].toFixed(1)}" x2="${punti[k][0].toFixed(1)}" y2="${punti[k][1].toFixed(1)}" stroke="#fff" stroke-width=".5" opacity=".28"/>`;
    }
  });

  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${h}">
    <rect width="${w}" height="${h}" fill="#070a16"/>${linee}${stelle}</svg>`;
}

// cielo("libera la tua creatività")