Spaces:

openfree
/

Pulsar-Display

Running

File size: 7,929 Bytes

<!DOCTYPE html>
<html lang="ko">
<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 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');

// 도트 그리드 설정
const GRID_SIZE = 16; // 16x16 도트

// 다양한 수학 공식을 활용한 컬러 패턴 템플릿 (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)];}',
  // 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 fn = compile(formulaSrc);
let playing = true;
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 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;
  const h = canvas.height;
  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>