Pulsar-Display

Running

App Files Files Community

openfree commited on May 13

Commit

6618e95

verified ·

1 Parent(s): df6a4c8

Update index.html

Browse files

Files changed (1) hide show

index.html +92 -106

index.html CHANGED Viewed

@@ -3,131 +3,117 @@
 <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>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Pulsar Mini – 풀스크린 컬러</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
+    /* 기본 레이아웃 */
+    body {@apply m-0 overflow-hidden bg-black text-gray-200 font-sans;}
+    canvas {width:100vw;height:100vh;display:block;image-rendering:pixelated;cursor:crosshair;}
+    /* 오버레이 UI */
+    #ui {@apply absolute top-3 left-1/2 -translate-x-1/2 flex gap-2 z-50 select-none;}
+    #ui button {@apply px-4 py-1.5 rounded text-sm font-semibold shadow bg-gray-800/70 backdrop-blur hover:bg-gray-700;}
   </style>
 </head>
 <body>
+  <!-- 풀스크린 캔버스 -->
   <canvas id="canvas"></canvas>
+  <!-- UI 오버레이 -->
+  <div id="ui">
+    <button id="play">▶ 재생</button>
+    <button id="pause" class="hidden">❚❚ 일시정지</button>
+    <button id="random">🎲 랜덤</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');
+// 다양한 수학 공식을 활용한 컬러 패턴 템플릿 (R,G,B 각각의 식)
+const BASE_PATTERNS = [
+  // 1. 사인/코사인 격자
+  '(x,y,t)=>{const r=Math.sin((x+$S1)*$F1+t);const g=Math.sin((y+$S2)*$F2-t);const b=Math.cos((x+y)*$F3+t*0.5);return[(r+1)/2,(g+1)/2,(b+1)/2];}',
+  // 2. 원형 파동
+  '(x,y,t)=>{const d=Math.hypot(x-0.5,y-0.5);return[0.5+0.5*Math.sin(d*$F1-t*2),0.5+0.5*Math.cos(d*$F2+t),0.5+0.5*Math.sin((x-y)*$F3+t)];}',
+  // 3. 복소함수 기반 패턴
+  '(x,y,t)=>{return[0.5+0.5*Math.sin((x*x-y*y)*$F1+t),0.5+0.5*Math.cos((x*y)*$F2-t),0.5+0.5*Math.sin((x+y)*$F3)];}',
+  // 4. 절대값 사인 – 밝고 선명한 색
+  '(x,y,t)=>{return[Math.abs(Math.sin($F1*x+t)),Math.abs(Math.sin($F2*y-t)),Math.abs(Math.sin(($F3)*(x+y)+t*0.3))];}',
+  // 5. 극좌표 무지개
+  '(x,y,t)=>{const a=Math.atan2(y-0.5,x-0.5);const r=(a/Math.PI+1)/2;return[r,0.5+0.5*Math.sin(t+$F1*r*10),1-r];}',
+  // 6. 로즈(장미) 커브 기반
+  '(x,y,t)=>{const a=Math.atan2(y-0.5,x-0.5);const k=$K;return[0.5+0.5*Math.sin(k*a+t),0.5+0.5*Math.sin(k*a+t+2*Math.PI/3),0.5+0.5*Math.sin(k*a+t+4*Math.PI/3)];}',
+  // 7. 페르마 나선 노이즈
+  '(x,y,t)=>{const r=Math.hypot(x-0.5,y-0.5);const phi=r*10+$F1;return[0.5+0.5*Math.sin(phi+t),0.5+0.5*Math.cos(phi*1.3-t),0.5+0.5*Math.sin(phi*0.7+t*0.5)];}',
+];
+function rand(min,max){return Math.random()*(max-min)+min;}
+function pickRandomFormula(){
+  const tmpl=BASE_PATTERNS[Math.floor(Math.random()*BASE_PATTERNS.length)];
+  return tmpl
+    .replaceAll('$F1',rand(5,30).toFixed(2))
+    .replaceAll('$F2',rand(5,30).toFixed(2))
+    .replaceAll('$F3',rand(5,30).toFixed(2))
+    .replaceAll('$S1',Math.random().toFixed(2))
+    .replaceAll('$S2',Math.random().toFixed(2))
+    .replaceAll('$K',Math.floor(rand(3,9))); // 정수 꽃잎 수
+}
+let formulaSrc = pickRandomFormula();
+let fn = compile(formulaSrc);
+let playing = true;
+let start = performance.now();
+function resizeCanvas(){
+  canvas.width = window.innerWidth * DPR;
+  canvas.height = window.innerHeight * DPR;
+  ctx.setTransform(DPR,0,0,DPR,0,0);
+}
+resizeCanvas();
+window.addEventListener('resize',resizeCanvas);
+function compile(src){
+  try{ return eval(src); }
+  catch(e){ console.error(e); return ()=>[0,0,0]; }
+}
+function clamp01(v){ return v<0?0:v>1?1:v; }
+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 idx=0;
+  for(let y=0;y<h;y++){
+    for(let x=0;x<w;x++){
+      const c = fn(x/w,y/h,t,idx);
+      const r = clamp01(c[0])*255;
+      const g = clamp01(c[1])*255;
+      const b = clamp01(c[2])*255;
+      data[idx++] = r;
+      data[idx++] = g;
+      data[idx++] = b;
+      data[idx++] = 255;
     }
   }
+  ctx.putImageData(img,0,0);
+  if(playing) requestAnimationFrame(draw);
+}
+requestAnimationFrame(draw);
+function randomize(){ formulaSrc = pickRandomFormula(); fn = compile(formulaSrc); start = performance.now(); }
+// UI 이벤트
+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>