Spaces:

openfree
/

Pulsar-Display

Running

App Files Files Community

openfree commited on 16 days ago

Commit

3278d19

verified ·

1 Parent(s): 6618e95

Update index.html

Browse files

Files changed (1) hide show

index.html +98 -21

index.html CHANGED Viewed

@@ -3,26 +3,73 @@
 <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>
@@ -33,6 +80,9 @@ const playBtn  = document.getElementById('play');
 const pauseBtn = document.getElementById('pause');
 const rndBtn   = document.getElementById('random');
 // 다양한 수학 공식을 활용한 컬러 패턴 템플릿 (R,G,B 각각의 식)
 const BASE_PATTERNS = [
   // 1. 사인/코사인 격자
@@ -49,18 +99,33 @@ const BASE_PATTERNS = [
   '(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();
@@ -69,9 +134,21 @@ 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);
@@ -85,8 +162,8 @@ 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;

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Pulsar Mini – 16x16 도트 컬러</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
     /* 기본 레이아웃 */
+    body {
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+      background-color: black;
+      color: #e5e7eb;
+      font-family: sans-serif;
+      overflow: hidden;
+    }
+    .canvas-container {
+      position: relative;
+      overflow: hidden;
+      border-radius: 0.5rem;
+      border: 1px solid #374151;
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+    canvas {
+      display: block;
+      image-rendering: pixelated;
+      image-rendering: crisp-edges;
+      cursor: crosshair;
+    }
     /* 오버레이 UI */
+    #ui {
+      position: absolute;
+      top: 0.75rem;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 0.5rem;
+      z-index: 50;
+      user-select: none;
+    }
+    #ui button {
+      padding: 0.375rem 1rem;
+      border-radius: 0.25rem;
+      font-size: 0.875rem;
+      font-weight: 600;
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+      background-color: rgba(31, 41, 55, 0.7);
+      backdrop-filter: blur(4px);
+    }
+    #ui button:hover {
+      background-color: rgba(55, 65, 81, 0.7);
+    }
+    .hidden {
+      display: none;
+    }
   </style>
 </head>
 <body>
+  <!-- 중앙 배치된 캔버스 컨테이너 -->
+  <div class="canvas-container">
+    <canvas id="canvas"></canvas>
+    <!-- UI 오버레이 -->
+    <div id="ui">
+      <button id="play">▶ 재생</button>
+      <button id="pause" class="hidden">❚❚ 일시정지</button>
+      <button id="random">🎲 랜덤</button>
+    </div>
   </div>
 <script>
 const pauseBtn = document.getElementById('pause');
 const rndBtn   = document.getElementById('random');
+// 도트 그리드 설정
+const GRID_SIZE = 16; // 16x16 도트
 // 다양한 수학 공식을 활용한 컬러 패턴 템플릿 (R,G,B 각각의 식)
 const BASE_PATTERNS = [
   // 1. 사인/코사인 격자
   '(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)];}',
+  // 8. 새로운 패턴: 격자 노이즈
+  '(x,y,t)=>{const nx=Math.floor(x*$F1)/($F1/2);const ny=Math.floor(y*$F2)/($F2/2);return[0.5+0.5*Math.sin(nx*$F3+t),0.5+0.5*Math.cos(ny*$F3-t),0.5+0.5*Math.sin((nx+ny)*$F3+t*0.7)];}',
+  // 9. 새로운 패턴: 프랙탈 기반
+  '(x,y,t)=>{let zx=3*(x-0.5),zy=3*(y-0.5),i=0,max=$IT;while(i<max&&zx*zx+zy*zy<4){const tmp=zx*zx-zy*zy;zy=2*zx*zy+0.5*Math.sin(t);zx=tmp+0.5*Math.cos(t);i++;}return[i/max,0.5+0.5*Math.sin(i/max*Math.PI+t),0.5+0.5*Math.cos(i/max*Math.PI*2-t)];}',
+  // 10. 새로운 패턴: 체커보드 변형
+  '(x,y,t)=>{const cx=Math.floor(x*$F1);const cy=Math.floor(y*$F1);const even=(cx+cy)%2===0;const r=0.5+0.5*Math.sin(cx*cy/($F2)+t);const g=0.5+0.5*Math.cos((cx-cy)*$F3-t);const b=even?0.2+0.8*Math.sin(t*0.5):0.2+0.8*Math.cos(t*0.7);return[r,g,b];}',
+  // 11. 새로운 패턴: 모아레 패턴
+  '(x,y,t)=>{const p1=Math.sin(x*$F1+t);const p2=Math.sin(y*$F2-t*0.7);const p3=Math.sin((x+y)*$F3+t*0.3);const moire=Math.sin(p1*p2*p3*10);return[0.5+0.5*moire,0.5+0.5*Math.sin(moire*Math.PI+t),0.5+0.5*Math.cos(moire*Math.PI-t)];}',
+  // 12. 새로운 패턴: 진동 물결
+  '(x,y,t)=>{const wave1=Math.sin(y*$F1+x*$F2+t);const wave2=Math.sin(x*$F3-y*$F1-t*1.5);return[0.5+0.5*wave1,0.5+0.5*wave2,0.5+0.5*Math.sin(wave1*wave2*3+t)];}',
+  // 13. 새로운 패턴: 노이즈 퍼뮤테이션
+  '(x,y,t)=>{const p=(x*$F1+y*$F2)%1;const q=(y*$F3-x*$F2+t)%1;return[p,q,0.5+0.5*Math.sin(p*q*Math.PI*2+t)];}',
+  // 14. 새로운 패턴: 도트 그리드
+  '(x,y,t)=>{const gx=Math.floor(x*4)/4;const gy=Math.floor(y*4)/4;const r=0.5+0.5*Math.sin(gx*$F1+gy*$F2+t);const g=0.5+0.5*Math.cos(gx*$F3-gy*$F1-t);const b=0.5+0.5*Math.sin((gx-gy)*$F3*2+t*1.5);return[r,g,b];}',
 ];
 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,40).toFixed(2))
+    .replaceAll('$F2',rand(5,40).toFixed(2))
+    .replaceAll('$F3',rand(5,40).toFixed(2))
     .replaceAll('$S1',Math.random().toFixed(2))
     .replaceAll('$S2',Math.random().toFixed(2))
+    .replaceAll('$K',Math.floor(rand(3,12))) // 정수 꽃잎 수
+    .replaceAll('$IT',Math.floor(rand(10,30))); // 프랙탈 반복 횟수
 }
 let formulaSrc = pickRandomFormula();
 let start = performance.now();
 function resizeCanvas(){
+  // 뷰포트 크기의 70%를 차지하는 정사각형으로 설정
+  const size = Math.min(window.innerWidth, window.innerHeight) * 0.7;
+  // 캔버스의 실제 해상도는 16x16
+  canvas.width = GRID_SIZE;
+  canvas.height = GRID_SIZE;
+  // 캔버스 표시 크기는 화면의 70%
+  canvas.style.width = `${size}px`;
+  canvas.style.height = `${size}px`;
+  // 캔버스 컨테이너도 같은 크기로 설정
+  const container = document.querySelector('.canvas-container');
+  container.style.width = `${size}px`;
+  container.style.height = `${size}px`;
 }
 resizeCanvas();
 window.addEventListener('resize',resizeCanvas);
 function draw(time){
   const t = (time - start)/1000;
+  const w = canvas.width;
+  const h = canvas.height;
   const img = ctx.createImageData(w,h);
   const data = img.data;
   let idx=0;