kasaframe 0.0.0-stage → 0.1.3

package/packages/core/src/rand.ts

@@ -0,0 +1,56 @@
+/**
+ * 시드 고정 난수. 상태가 없어서 (seed, i) 만 같으면 어느 탭·어느 순서로 불러도 같은 값이다.
+ * Math.random 은 쓰지 않는다 — 탭 나눠 찍기에서 탭마다 다른 그림이 나온다.
+ */
+function hash32(n: number): number {
+  let h = n | 0;
+  h = Math.imul(h ^ (h >>> 16), 0x85ebca6b);
+  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);
+  return (h ^ (h >>> 16)) >>> 0;
+}
+
+function seedOf(seed: number | string): number {
+  if (typeof seed === "number") return Number.isFinite(seed) ? Math.floor(seed * 1000003) | 0 : 0;
+  let h = 0x811c9dc5;
+  for (let i = 0; i < seed.length; i++) h = Math.imul(h ^ seed.charCodeAt(i), 0x01000193);
+  return h | 0;
+}
+
+/** [0, 1) */
+export function rand(seed: number | string, i = 0): number {
+  const s = seedOf(seed);
+  return hash32(hash32(s) ^ hash32(Math.imul((i | 0) + 0x9e3779b9, 0x27d4eb2d))) / 4294967296;
+}
+
+export const randRange = (seed: number | string, i: number, lo: number, hi: number): number => lo + (hi - lo) * rand(seed, i);
+
+export const randInt = (seed: number | string, i: number, lo: number, hi: number): number =>
+  Math.min(hi, lo + Math.floor((hi - lo + 1) * rand(seed, i)));
+
+export const pick = <T>(seed: number | string, i: number, items: readonly T[]): T => items[randInt(seed, i, 0, items.length - 1)];
+
+/** 평균 0 표준편차 1 근사(박스-뮐러) */
+export function randNormal(seed: number | string, i: number): number {
+  const u = Math.max(rand(seed, i * 2), 1e-12);
+  const v = rand(seed, i * 2 + 1);
+  return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);
+}
+
+export function shuffle<T>(seed: number | string, items: readonly T[]): T[] {
+  const a = items.slice();
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = randInt(seed, i, 0, i);
+    [a[i], a[j]] = [a[j], a[i]];
+  }
+  return a;
+}
+
+/** 부드럽게 흔들리는 1차원 잡음 [-1, 1]. 정수 격자의 시드 난수를 코사인으로 잇는다 */
+export function noise1(seed: number | string, x: number): number {
+  const i = Math.floor(x);
+  const f = x - i;
+  const a = rand(seed, i) * 2 - 1;
+  const b = rand(seed, i + 1) * 2 - 1;
+  const s = (1 - Math.cos(f * Math.PI)) / 2;
+  return a + (b - a) * s;
+}

package/packages/core/src/spring.ts

@@ -0,0 +1,52 @@
+export interface SpringOpts {
+  from?: number;
+  to?: number;
+  stiffness?: number;
+  damping?: number;
+  mass?: number;
+  /** t=0 에서 값이 변하는 속도(단위/초) */
+  velocity?: number;
+}
+
+const DEFAULTS = { from: 0, to: 1, stiffness: 170, damping: 26, mass: 1, velocity: 0 };
+
+/**
+ * 감쇠 조화 진동의 닫힌 해. 앞 프레임 상태를 이어 받지 않으므로 아무 t 로 건너뛰어도 같은 값이 나온다 —
+ * seek 모드와 탭 나눠 찍기가 이것에 기댄다.
+ */
+export function spring(t: number, opts: SpringOpts = {}): number {
+  const { from, to, stiffness, damping, mass, velocity } = { ...DEFAULTS, ...opts };
+  if (!(t > 0)) return from;
+  if (stiffness <= 0 || mass <= 0) return to;
+  const x0 = from - to;
+  const v0 = velocity;
+  const w0 = Math.sqrt(stiffness / mass);
+  const zeta = damping / (2 * Math.sqrt(stiffness * mass));
+  let x: number;
+  if (zeta < 1) {
+    const wd = w0 * Math.sqrt(1 - zeta * zeta);
+    x = Math.exp(-zeta * w0 * t) * (x0 * Math.cos(wd * t) + ((v0 + zeta * w0 * x0) / wd) * Math.sin(wd * t));
+  } else if (zeta === 1) {
+    x = Math.exp(-w0 * t) * (x0 + (v0 + w0 * x0) * t);
+  } else {
+    const s = Math.sqrt(zeta * zeta - 1);
+    const r1 = -w0 * (zeta - s);
+    const r2 = -w0 * (zeta + s);
+    const c2 = (v0 - r1 * x0) / (r2 - r1);
+    const c1 = x0 - c2;
+    x = c1 * Math.exp(r1 * t) + c2 * Math.exp(r2 * t);
+  }
+  return to + x;
+}
+
+/** 값이 목표에서 eps 안으로 들어와 다시 나가지 않는 첫 시각(초). 1/240 초 간격으로 훑는다 */
+export function springDuration(opts: SpringOpts = {}, eps = 0.001, max = 10): number {
+  const to = opts.to ?? DEFAULTS.to;
+  const span = Math.abs((opts.from ?? DEFAULTS.from) - to) || 1;
+  const dt = 1 / 240;
+  let settled = 0;
+  for (let t = 0; t <= max; t += dt) {
+    if (Math.abs(spring(t, opts) - to) / span > eps) settled = t + dt;
+  }
+  return Math.min(settled, max);
+}

package/packages/core/src/style.ts

@@ -0,0 +1,100 @@
+/**
+ * 움직임 원형이 돌려주는 값. CSS 도 three 도 아닌 일반 객체라 어댑터가 제 값으로 바꾼다.
+ * 없는 칸은 「바꾸지 않음」이다 — 0 이나 기본값을 채워 넣지 않는다.
+ */
+export interface Style {
+  opacity?: number;
+  /** px */
+  x?: number;
+  y?: number;
+  z?: number;
+  scale?: number;
+  scaleX?: number;
+  scaleY?: number;
+  /** 도 */
+  rotate?: number;
+  rotateX?: number;
+  rotateY?: number;
+  skewX?: number;
+  /** px */
+  blur?: number;
+  brightness?: number;
+  /** 가려 보이는 비율 0..1 — 위·오른쪽·아래·왼쪽에서 얼마나 깎는지 */
+  clip?: { top?: number; right?: number; bottom?: number; left?: number };
+}
+
+const num = (v: number | undefined, fallback: number): number => (v !== undefined && Number.isFinite(v) ? v : fallback);
+
+/** 겹쳐 쓰기: 투명도·배율은 곱하고, 이동·회전·흐림은 더하고, 가림은 큰 쪽을 쓴다 */
+export function combine(...styles: (Style | undefined | null | false)[]): Style {
+  const out: Style = {};
+  for (const s of styles) {
+    if (!s) continue;
+    if (s.opacity !== undefined) out.opacity = num(out.opacity, 1) * num(s.opacity, 1);
+    for (const k of ["x", "y", "z", "rotate", "rotateX", "rotateY", "skewX", "blur"] as const) {
+      if (s[k] !== undefined) out[k] = num(out[k], 0) + num(s[k], 0);
+    }
+    for (const k of ["scale", "scaleX", "scaleY", "brightness"] as const) {
+      if (s[k] !== undefined) out[k] = num(out[k], 1) * num(s[k], 1);
+    }
+    if (s.clip) {
+      const c = (out.clip ??= {});
+      for (const side of ["top", "right", "bottom", "left"] as const) {
+        const v = s.clip[side];
+        if (v !== undefined) c[side] = Math.max(num(c[side], 0), num(v, 0));
+      }
+    }
+  }
+  return out;
+}
+
+const r = (v: number, d = 3): number => {
+  const m = 10 ** d;
+  return Math.round(v * m) / m;
+};
+
+export interface CssStyle {
+  opacity?: number;
+  transform?: string;
+  filter?: string;
+  clipPath?: string;
+}
+
+/** React style 객체로 바로 넘길 수 있는 꼴. 유한하지 않은 값은 버린다 — NaN 이 CSS 로 새면 요소가 통째로 사라진다 */
+export function toCss(s: Style): CssStyle {
+  const out: CssStyle = {};
+  if (s.opacity !== undefined && Number.isFinite(s.opacity)) out.opacity = r(Math.min(1, Math.max(0, s.opacity)));
+  const tf: string[] = [];
+  const x = num(s.x, 0);
+  const y = num(s.y, 0);
+  const z = num(s.z, 0);
+  if (x || y || z) tf.push(z ? `translate3d(${r(x)}px, ${r(y)}px, ${r(z)}px)` : `translate(${r(x)}px, ${r(y)}px)`);
+  if (s.rotate !== undefined && Number.isFinite(s.rotate) && s.rotate !== 0) tf.push(`rotate(${r(s.rotate)}deg)`);
+  if (s.rotateX !== undefined && Number.isFinite(s.rotateX) && s.rotateX !== 0) tf.push(`rotateX(${r(s.rotateX)}deg)`);
+  if (s.rotateY !== undefined && Number.isFinite(s.rotateY) && s.rotateY !== 0) tf.push(`rotateY(${r(s.rotateY)}deg)`);
+  if (s.skewX !== undefined && Number.isFinite(s.skewX) && s.skewX !== 0) tf.push(`skewX(${r(s.skewX)}deg)`);
+  const sx = num(s.scale, 1) * num(s.scaleX, 1);
+  const sy = num(s.scale, 1) * num(s.scaleY, 1);
+  if (sx !== 1 || sy !== 1) tf.push(sx === sy ? `scale(${r(sx, 4)})` : `scale(${r(sx, 4)}, ${r(sy, 4)})`);
+  if (tf.length) out.transform = tf.join(" ");
+  const fl: string[] = [];
+  if (s.blur !== undefined && Number.isFinite(s.blur) && s.blur > 0.01) fl.push(`blur(${r(s.blur, 2)}px)`);
+  if (s.brightness !== undefined && Number.isFinite(s.brightness) && s.brightness !== 1) fl.push(`brightness(${r(s.brightness)})`);
+  if (fl.length) out.filter = fl.join(" ");
+  if (s.clip) {
+    const pc = (v: number | undefined) => `${r(Math.min(1, Math.max(0, num(v, 0))) * 100, 2)}%`;
+    out.clipPath = `inset(${pc(s.clip.top)} ${pc(s.clip.right)} ${pc(s.clip.bottom)} ${pc(s.clip.left)})`;
+  }
+  return out;
+}
+
+const kebab = (k: string): string => k.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+
+/** 바닐라 DOM 용. 이전 프레임에 있던 칸이 이번에 빠져도 남지 않게 네 칸을 늘 다시 쓴다 */
+export function applyStyle(el: { style: CSSStyleDeclaration }, s: Style): void {
+  const css = toCss(s);
+  for (const k of ["opacity", "transform", "filter", "clipPath"] as const) {
+    const v = css[k];
+    el.style.setProperty(kebab(k), v === undefined ? "" : String(v));
+  }
+}

package/packages/core/src/time.ts

@@ -0,0 +1,88 @@
+export interface Clip {
+  /** 구간 시작에서 잰 시각(초). 구간 밖이어도 그대로 — 앞이면 음수 */
+  local: number;
+  /** 0..1 로 자른 진행도 */
+  p: number;
+  active: boolean;
+}
+
+export const clamp = (v: number, lo = 0, hi = 1): number => (v < lo ? lo : v > hi ? hi : v === v ? v : lo);
+
+/** NaN 시각은 0 으로 — 움직임 입구에서 한 번 걸러 화면 값에 NaN 이 번지지 않게 */
+export const safeTime = (t: number): number => (typeof t === "number" && t === t ? t : 0);
+
+export const lerp = (a: number, b: number, p: number): number => a + (b - a) * p;
+
+/** 0 길이 구간에서 0 으로 나누지 않게 — dur 0 은 시작하는 순간 끝난 것으로 본다 */
+export const progress = (t: number, from: number, dur: number): number =>
+  dur > 0 ? clamp((t - from) / dur) : t >= from ? 1 : 0;
+
+export function clip(t: number, from: number, dur: number): Clip {
+  const local = t - from;
+  return { local, p: progress(t, from, dur), active: local >= 0 && local < dur };
+}
+
+export interface SeqItem {
+  id?: string;
+  dur: number;
+  /** 앞 항목과 겹치는 길이(초). 전환에 쓴다 */
+  overlap?: number;
+}
+
+export interface SeqSlot {
+  id: string;
+  index: number;
+  from: number;
+  to: number;
+  dur: number;
+}
+
+export interface Seq {
+  items: SeqSlot[];
+  duration: number;
+  /** t 에서 그려야 할 항목들 — 겹치는 구간이면 둘 */
+  at(t: number): (SeqSlot & Clip)[];
+}
+
+export function seq(items: SeqItem[], start = 0): Seq {
+  let cursor = start;
+  const slots: SeqSlot[] = items.map((it, index) => {
+    const from = index === 0 ? cursor : cursor - (it.overlap ?? 0);
+    cursor = from + it.dur;
+    return { id: it.id ?? String(index), index, from, to: from + it.dur, dur: it.dur };
+  });
+  return {
+    items: slots,
+    duration: cursor - start,
+    at: (t) => slots.filter((s) => t >= s.from && t < s.to).map((s) => ({ ...s, ...clip(t, s.from, s.dur) })),
+  };
+}
+
+type Easing = (p: number) => number;
+
+/**
+ * 값 구간 사상. 입력은 오름차순이어야 하고, 밖은 기본으로 끝값에 붙인다(clamp).
+ * NaN 이 들어오면 첫 출력값을 돌려 화면에 NaN 이 새지 않게 한다.
+ */
+export function interpolate(
+  v: number,
+  input: readonly number[],
+  output: readonly number[],
+  opts: { ease?: Easing; extrapolate?: "clamp" | "extend" } = {},
+): number {
+  if (input.length !== output.length || input.length < 2) throw new Error("interpolate: input·output 길이가 같고 2 이상이어야 한다");
+  if (!Number.isFinite(v)) return output[0];
+  const ext = opts.extrapolate ?? "clamp";
+  let i = 1;
+  while (i < input.length - 1 && v > input[i]) i++;
+  const a = input[i - 1];
+  const b = input[i];
+  let p = b === a ? (v >= b ? 1 : 0) : (v - a) / (b - a);
+  if (ext === "clamp") p = clamp(p);
+  if (opts.ease && p >= 0 && p <= 1) p = opts.ease(p);
+  return lerp(output[i - 1], output[i], p);
+}
+
+/** 초 ↔ 프레임. 프레임 경계 오차로 같은 프레임을 두 번 찍지 않게 반올림한다 */
+export const toFrame = (t: number, fps: number): number => Math.round(t * fps);
+export const toTime = (frame: number, fps: number): number => frame / fps;

package/packages/director/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@kasaframe/director",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./pattern": "./src/pattern.ts",
+    "./scene": "./src/scene.ts",
+    "./fallback": "./src/fallback.ts",
+    "./patterns/*": "./src/patterns/*.ts"
+  },
+  "dependencies": {
+    "@kasaframe/core": "0.0.0",
+    "@kasaframe/gen": "*",
+    "@kasaframe/motion": "^0.0.0",
+    "@kasaframe/plan": "*",
+    "@kasaframe/themes": "*"
+  },
+  "optionalDependencies": {
+    "@kasaframe/patterns": "*"
+  }
+}