Function paperBall

public/js/folderManager.js:1798–1843

(cx, cy, r, extra = false)

  }

  function paperBall(cx, cy, r, extra = false) {
    // Deterministic "crumple" wobble so the paper balls don't look perfectly round.
    const seed = (((Math.round(cx * 10) * 73856093) ^ (Math.round(cy * 10) * 19349663)) >>> 0);
    const rot = seed % 8;
    const base = [0.00, -0.12, 0.10, -0.16, 0.12, -0.08, 0.10, -0.14];
    const wobble = extra ? 0.85 : 0.55;
    const pts = [];
    for (let i = 0; i < 8; i++) {
      const idx = (i + rot) % 8;
      const a = (Math.PI * 2 * i) / 8;
      const m = 1 + (base[idx] * wobble);
      pts.push({
        x: cx + Math.cos(a) * r * m,
        y: cy + Math.sin(a) * r * m
      });
    }

    const mid = (a, b) => ({ x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 });
    const start = mid(pts[pts.length - 1], pts[0]);
    let d = `M ${start.x} ${start.y}`;
    for (let i = 0; i < pts.length; i++) {
      const p = pts[i];
      const n = pts[(i + 1) % pts.length];
      const m = mid(p, n);
      d += ` Q ${p.x} ${p.y} ${m.x} ${m.y}`;
    }
    d += ' Z';

    const crease1 = `
      M ${cx - r*0.62} ${cy - r*0.08}
      C ${cx - r*0.12} ${cy - r*0.78}, ${cx + r*0.52} ${cy - r*0.46}, ${cx + r*0.35} ${cy + r*0.05}
    `;
    const crease2 = `
      M ${cx - r*0.45} ${cy + r*0.25}
      C ${cx - r*0.05} ${cy + r*0.10}, ${cx + r*0.20} ${cy + r*0.55}, ${cx + r*0.55} ${cy + r*0.30}
    `;
    return `
      <path d="${d}" fill="#f7f9ff" stroke="#c7d2e4" stroke-width="0.48"/>
      <path d="${crease1}" fill="none" stroke="#ffffff" stroke-opacity="0.55" stroke-width="0.55" stroke-linecap="round"/>
      <path d="${crease2}" fill="none" stroke="#8fa7cf" stroke-opacity="0.48" stroke-width="0.50" stroke-linecap="round"/>
      ${extra ? `
        <path d="M ${cx - r*0.18} ${cy + r*0.62} l ${r*0.62} ${-r*0.42}"
              fill="none" stroke="#8fa7cf" stroke-opacity="0.40" stroke-width="0.45" stroke-linecap="round"/>
      ` : ''}
    `;
  }
}

function renderRecycleBinNode(hasItems = false) {