Pulsar-Display

Running

App Files Files Community

openfree commited on May 13, 2025

Commit

df6a4c8

verified ·

1 Parent(s): 9d4c549

Update index.html

Browse files

Files changed (1) hide show

index.html +106 -87

index.html CHANGED Viewed

@@ -1,114 +1,133 @@
 <!DOCTYPE html>
 <html lang="ko">
 <head>
-  <meta charset="UTF-8">
-  <title>Pulsar Mini</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <!-- Tailwind CDN (빠른 프로토타이핑용) -->
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
-    /* custom utility 조합 */
-    body { @apply bg-gray-900 text-gray-100 flex flex-col items-center py-6 gap-6; }
-    canvas { image-rendering: pixelated; }
   </style>
 </head>
 <body>
-  <h1 class="text-3xl font-bold">Pulsar Mini</h1>
-  <div class="flex flex-wrap gap-4 max-w-4xl w-full justify-center">
-    <!-- Canvas 영역 -->
-    <canvas id="canvas" width="320" height="320" class="border border-gray-700 rounded"></canvas>
-    <!-- 컨트롤 -->
-    <div class="flex flex-col gap-3 w-80">
-      <label class="text-sm font-mono">코드:</label>
-      <textarea
-        id="code"
-        rows="4"
-        maxlength="300"
-        class="w-full p-2 rounded bg-gray-800 font-mono text-xs resize-none outline-none"
-      >(x,y,t)=>Math.sin(x*10+t)+Math.cos(y*10+t)</textarea>
-      <div class="flex gap-2">
-        <button id="play"  class="px-3 py-1 rounded bg-green-600 text-sm">▶ Play</button>
-        <button id="pause" class="px-3 py-1 rounded bg-red-600 text-sm hidden">❚❚ Pause</button>
-        <button id="random" class="px-3 py-1 rounded bg-blue-600 text-sm">🎲 Random</button>
-      </div>
-      <p class="text-[11px] text-gray-400 leading-snug">
-        함수는 <code>(x,y,t,i) =&gt; 값</code> 형식이어야 합니다.<br>
-        <code>x</code>, <code>y</code> 는 0~1 좌표, <code>t</code> 는 초, <code>i</code>는 픽셀 인덱스입니다.<br>
-        반환값은 0~1 범위로 클램프되어 그레이스케일 밝기로 표현됩니다.
-      </p>
-    </div>
   </div>
-<script>
-const canvas = document.getElementById('canvas');
-const ctx     = canvas.getContext('2d');
-const codeEl  = document.getElementById('code');
-const playBtn = document.getElementById('play');
-const pauseBtn= document.getElementById('pause');
-const rndBtn  = document.getElementById('random');
-const EXAMPLES = [
-  '(x,y,t)=>Math.sin((x+y+t)*6)',
-  '(x,y,t)=>Math.sin(x*10+t)+Math.cos(y*10+t)',
-  '(x,y,t)=>Math.sin(Math.hypot(x-0.5,y-0.5)*20-t*2)',
-];
-let fn = compile(codeEl.value);
-let playing = false;
-let start  = performance.now();
-function compile(src){
-  try { return eval(src); }
-  catch(e){ console.error(e); return ()=>0; }
-}
-function draw(time){
-  const t = (time - start) / 1000;
-  const w = canvas.width;
-  const h = canvas.height;
-  const img = ctx.getImageData(0,0,w,h);
-  const data = img.data;
-  for(let y=0; y<h; y++){
-    for(let x=0; x<w; x++){
-      const idx = (y*w + x) * 4;
-      const v = Math.max(0, Math.min(1, fn(x/w, y/h, t, idx)));
-      const c = v * 255;
-      data[idx] = data[idx+1] = data[idx+2] = c;
-      data[idx+3] = 255;
     }
   }
-  ctx.putImageData(img,0,0);
-  if(playing) requestAnimationFrame(draw);
-}
-draw(start);
-// event handlers
-playBtn.addEventListener('click', () => {
-  playing = true;
-  playBtn.classList.add('hidden');
-  pauseBtn.classList.remove('hidden');
   requestAnimationFrame(draw);
-});
-pauseBtn.addEventListener('click', () => {
-  playing = false;
-  pauseBtn.classList.add('hidden');
-  playBtn.classList.remove('hidden');
-});
-codeEl.addEventListener('input', () => {
-  fn = compile(codeEl.value);
-});
-rndBtn.addEventListener('click', () => {
-  codeEl.value = EXAMPLES[Math.floor(Math.random()*EXAMPLES.length)];
-  fn = compile(codeEl.value);
-});
-</script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="ko">
 <head>
+  <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Pulsar Mini – Touch Reactive</title>
+  <!-- Tailwind CDN: 프로토타입용, 필요 시 로컬 빌드로 교체 -->
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
+    body {
+      @apply bg-gray-900 text-gray-100 flex flex-col items-center justify-center min-h-screen gap-6 p-4 select-none;
+    }
+    canvas {
+      image-rendering: pixelated;
+      @apply border border-gray-700 rounded shadow-lg;
+    }
   </style>
 </head>
 <body>
+  <h1 class="text-3xl font-bold mb-2">Pulsar Mini</h1>
+  <p class="text-sm text-gray-400 mb-4 text-center">캔버스를 탭하거나 클릭할 때마다 새로운 무작위 패턴이 재생됩니다.</p>
+  <canvas id="canvas"></canvas>
+  <div class="flex gap-3">
+    <button id="play"  class="px-4 py-1.5 rounded bg-green-600 text-sm">▶ 재생</button>
+    <button id="pause" class="px-4 py-1.5 rounded bg-red-600  text-sm hidden">❚❚ 일시정지</button>
+    <button id="random" class="px-4 py-1.5 rounded bg-blue-600 text-sm">🎲 랜덤</button>
   </div>
+  <script>
+  const DPR = window.devicePixelRatio || 1;
+  const canvas = document.getElementById('canvas');
+  const ctx = canvas.getContext('2d');
+  const playBtn  = document.getElementById('play');
+  const pauseBtn = document.getElementById('pause');
+  const rndBtn   = document.getElementById('random');
+  // 10가지 예제 + 매 호출마다 매개변수를 랜덤으로 섞음
+  const BASE_PATTERNS = [
+    '(x,y,t)=>Math.sin((x+y+t)*$FREQ)',
+    '(x,y,t)=>Math.cos((x-y+t)*$FREQ)',
+    '(x,y,t)=>Math.sin(Math.hypot(x-0.5,y-0.5)*$FREQ - t*3)',
+    '(x,y,t)=>Math.sin(x*$FREQ+t)+Math.cos(y*$FREQ+t)',
+    '(x,y,t)=>Math.sin((x*$FREQ+y*$FREQ+t*2))*Math.cos((x*$FREQ-y*$FREQ+t))',
+    '(x,y,t)=>Math.sin((x+y)*$FREQ + t*5)*0.5+0.5',
+    '(x,y,t)=>Math.sin(Math.atan2(y-0.5,x-0.5)*$FREQ + t*2)',
+    '(x,y,t)=>((Math.sin(x*$FREQ)+Math.cos(y*$FREQ+t))*0.5)+0.5',
+    '(x,y,t)=>Math.sin(((x-0.5)**2+(y-0.5)**2)*$FREQ - t*4)',
+    '(x,y,t)=>Math.sin((x*x - y*y)*$FREQ + t*3)'
+  ];
+  function pickRandomFormula() {
+    const tmpl = BASE_PATTERNS[Math.floor(Math.random()*BASE_PATTERNS.length)];
+    const freq = (Math.random()*30 + 10).toFixed(1); // 10~40 사이 주파수
+    return tmpl.replaceAll('$FREQ', freq);
+  }
+  let formulaSrc = pickRandomFormula();
+  let fn = compile(formulaSrc);
+  let playing = true;
+  let start = performance.now();
+  function resizeCanvas() {
+    const size = Math.min(window.innerWidth, window.innerHeight) * 0.8;
+    canvas.style.width  = size + 'px';
+    canvas.style.height = size + 'px';
+    canvas.width  = size * DPR;
+    canvas.height = size * DPR;
+    ctx.scale(DPR, DPR);
+  }
+  resizeCanvas();
+  window.addEventListener('resize', resizeCanvas);
+  function compile(src) {
+    try {
+      return eval(src);
+    } catch (e) {
+      console.error(e);
+      return () => 0;
     }
   }
+  function draw(time) {
+    const t = (time - start) / 1000;
+    const w = canvas.width / DPR;
+    const h = canvas.height / DPR;
+    const img = ctx.createImageData(w, h);
+    const data = img.data;
+    let i = 0;
+    for (let y = 0; y < h; y++) {
+      for (let x = 0; x < w; x++) {
+        const v = Math.max(0, Math.min(1, fn(x / w, y / h, t, i)));
+        const c = v * 255;
+        data[i++] = c; // R
+        data[i++] = c; // G
+        data[i++] = c; // B
+        data[i++] = 255; // A
+      }
+    }
+    ctx.putImageData(img, 0, 0);
+    if (playing) requestAnimationFrame(draw);
+  }
   requestAnimationFrame(draw);
+  function randomize() {
+    formulaSrc = pickRandomFormula();
+    fn = compile(formulaSrc);
+    start = performance.now();
+  }
+  // 버튼 이벤트
+  playBtn.addEventListener('click', () => {
+    playing = true;
+    playBtn.classList.add('hidden');
+    pauseBtn.classList.remove('hidden');
+    start = performance.now();
+    requestAnimationFrame(draw);
+  });
+  pauseBtn.addEventListener('click', () => {
+    playing = false;
+    pauseBtn.classList.add('hidden');
+    playBtn.classList.remove('hidden');
+  });
+  rndBtn.addEventListener('click', randomize);
+  canvas.addEventListener('pointerdown', randomize); // 터치·클릭 모두 대응
+  </script>
 </body>
 </html>