<div class="kd-wrap">
  <canvas id="kdCanvas" class="kd-canvas"></canvas>
  <div class="kd-panel">
    <span class="kd-tag">radial symmetry drawing</span>
    <div class="kd-row">
      <label>Segments <span id="kdSegVal">10</span></label>
      <input type="range" id="kdSeg" min="3" max="20" value="10" step="1" />
    </div>
    <div class="kd-row">
      <label>Brush <span id="kdBrushVal">4</span></label>
      <input type="range" id="kdBrush" min="1" max="14" value="4" step="1" />
    </div>
    <button class="kd-btn" id="kdClear">Clear</button>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0c0710;color:#f3ecfa;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.kd-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;width:min(680px,96vw)}
.kd-canvas{width:100%;aspect-ratio:1/1;background:#0c0710;border-radius:50%;border:1px solid rgba(255,255,255,.1);display:block;touch-action:none;cursor:crosshair;box-shadow:0 0 60px rgba(168,85,247,.15)}
.kd-panel{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 18px}
.kd-tag{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#d8b4fe;background:rgba(216,180,254,.1);border:1px solid rgba(216,180,254,.3);padding:4px 10px;border-radius:99px}
.kd-row{display:flex;align-items:center;gap:8px;font-size:12px;color:#c9bfe0}
.kd-row input{accent-color:#a855f7}
.kd-btn{margin-left:auto;background:#2a1240;border:1px solid rgba(216,180,254,.3);color:#d8b4fe;font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:9px;cursor:pointer}
.kd-btn:hover{background:#391962}

const canvas = document.getElementById('kdCanvas');
const ctx = canvas.getContext('2d');
const segSlider = document.getElementById('kdSeg');
const brushSlider = document.getElementById('kdBrush');
const segVal = document.getElementById('kdSegVal');
const brushVal = document.getElementById('kdBrushVal');
const clearBtn = document.getElementById('kdClear');

let width, height, dpr, cx, cy;
let drawing = false;
let last = null;
let hue = 280;

function resize() {
  dpr = Math.min(window.devicePixelRatio || 1, 2);
  width = canvas.clientWidth;
  height = canvas.clientHeight;
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  cx = width / 2;
  cy = height / 2;
  ctx.lineCap = 'round';
  ctx.lineJoin = 'round';
}

function pointerPos(e) {
  const rect = canvas.getBoundingClientRect();
  const t = e.touches ? e.touches[0] : e;
  return { x: t.clientX - rect.left, y: t.clientY - rect.top };
}

// One physical stroke segment is replayed N times, each time rotated by
// (360 / segments) degrees around the canvas center, and once more as a
// mirrored copy — that mirror is what turns simple rotational repetition
// into a true kaleidoscope (reflective) symmetry rather than a pinwheel.
function stampSegment(x1, y1, x2, y2) {
  const segments = parseInt(segSlider.value, 10);
  const width_ = parseInt(brushSlider.value, 10);
  const angleStep = (Math.PI * 2) / segments;

  ctx.lineWidth = width_;
  ctx.strokeStyle = 'hsla(' + hue + ',85%,68%,0.9)';
  ctx.shadowColor = 'hsla(' + hue + ',90%,60%,0.6)';
  ctx.shadowBlur = width_ * 1.4;

  for (let i = 0; i < segments; i++) {
    const angle = angleStep * i;
    const cosA = Math.cos(angle), sinA = Math.sin(angle);

    // Rotated copy
    drawLine(rot(x1, y1, cosA, sinA), rot(x2, y2, cosA, sinA));
    // Mirrored + rotated copy (reflect across the local x-axis first)
    drawLine(rot(x1, -y1, cosA, sinA), rot(x2, -y2, cosA, sinA));
  }
  ctx.shadowBlur = 0;
}

function rot(x, y, cosA, sinA) {
  const rx = cx + (x - cx) * cosA - (y - cy) * sinA;
  const ry = cy + (x - cx) * sinA + (y - cy) * cosA;
  return { x: rx, y: ry };
}

function drawLine(p1, p2) {
  ctx.beginPath();
  ctx.moveTo(p1.x, p1.y);
  ctx.lineTo(p2.x, p2.y);
  ctx.stroke();
}

function onDown(e) {
  drawing = true;
  last = pointerPos(e);
  hue = (hue + 3) % 360;
  e.preventDefault();
}
function onMove(e) {
  if (!drawing) return;
  const pos = pointerPos(e);
  stampSegment(last.x, last.y, pos.x, pos.y);
  last = pos;
  hue = (hue + 0.6) % 360;
  e.preventDefault();
}
function onUp() { drawing = false; last = null; }

canvas.addEventListener('mousedown', onDown);
window.addEventListener('mousemove', onMove);
window.addEventListener('mouseup', onUp);
canvas.addEventListener('touchstart', onDown, { passive: false });
canvas.addEventListener('touchmove', onMove, { passive: false });
canvas.addEventListener('touchend', onUp);

function clearCanvas() {
  ctx.clearRect(0, 0, width, height);
}

segSlider.addEventListener('input', () => { segVal.textContent = segSlider.value; });
brushSlider.addEventListener('input', () => { brushVal.textContent = brushSlider.value; });
clearBtn.addEventListener('click', clearCanvas);

resize();
window.addEventListener('resize', () => { const img = canvas.toDataURL(); resize(); });