@mumulinya167/ccm-pet-assets 2.0.0

package/assets/cloudling/cloudling-dozing.svg

@@ -0,0 +1,358 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="stage" xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 36 36" preserveAspectRatio="xMidYMid meet">
+<g id="__cloudling-export-shims" opacity="0" pointer-events="none" style="display:none">
+<g id="control-grid"></g>
+<g id="readout"></g>
+</g>
+<script type="application/ecmascript"><![CDATA[
+const CLOUD_D = "M9.064 3.344a4.578 4.578 0 012.285-.312c1 .115 1.891.54 2.673 1.275.01.01.024.017.037.021a.09.09 0 00.043 0 4.55 4.55 0 013.046.275l.047.022.116.057a4.581 4.581 0 012.188 2.399c.209.51.313 1.041.315 1.595a4.24 4.24 0 01-.134 1.223.123.123 0 00.03.115c.594.607.988 1.33 1.183 2.17.289 1.425-.007 2.71-.887 3.854l-.136.166a4.548 4.548 0 01-2.201 1.388.123.123 0 00-.081.076c-.191.551-.383 1.023-.740 1.494-.9 1.187-2.222 1.846-3.711 1.838-1.187-.006-2.239-.44-3.157-1.302a.107.107 0 00-.105-.024c-.388.125-.78.143-1.204.138a4.441 4.441 0 01-1.945-.466 4.544 4.544 0 01-1.61-1.335c-.152-.202-.303-.392-.414-.617a5.81 5.81 0 01-.37-.961 4.582 4.582 0 01-.014-2.298.124.124 0 00.006-.056.085.085 0 00-.027-.048 4.467 4.467 0 01-1.034-1.651 3.896 3.896 0 01-.251-1.192 5.189 5.189 0 01.141-1.6c.337-1.112.982-1.985 1.933-2.618.212-.141.413-.251.601-.33.215-.089.43-.164.646-.227a.098.098 0 00.065-.066 4.51 4.51 0 01.829-1.615 4.535 4.535 0 011.837-1.388z";
+
+const SOFT_CLOUD_POINTS = [
+  {x:9.064,y:3.344},{x:9.825,y:3.106},{x:10.616,y:3.004},{x:11.413,y:3.040},
+  {x:12.192,y:3.210},{x:12.928,y:3.518},{x:13.599,y:3.948},{x:14.255,y:4.291},
+  {x:15.046,y:4.188},{x:15.843,y:4.224},{x:16.621,y:4.398},{x:17.357,y:4.706},
+  {x:18.029,y:5.134},{x:18.617,y:5.673},{x:19.103,y:6.306},{x:19.471,y:7.013},
+  {x:19.715,y:7.772},{x:19.812,y:8.564},{x:19.784,y:9.361},{x:19.797,y:10.105},
+  {x:20.287,y:10.735},{x:20.656,y:11.442},{x:20.897,y:12.202},{x:20.995,y:12.994},
+  {x:20.964,y:13.791},{x:20.791,y:14.569},{x:20.480,y:15.304},{x:20.052,y:15.977},
+  {x:19.516,y:16.567},{x:18.882,y:17.052},{x:18.174,y:17.418},{x:17.539,y:17.808},
+  {x:17.231,y:18.545},{x:16.805,y:19.218},{x:16.264,y:19.805},{x:15.633,y:20.292},
+  {x:14.925,y:20.660},{x:14.163,y:20.895},{x:13.372,y:20.996},{x:12.575,y:20.964},
+  {x:11.796,y:20.793},{x:11.061,y:20.483},{x:10.392,y:20.049},{x:9.736,y:19.714},
+  {x:8.946,y:19.811},{x:8.148,y:19.777},{x:7.370,y:19.606},{x:6.634,y:19.299},
+  {x:5.962,y:18.868},{x:5.377,y:18.326},{x:4.885,y:17.698},{x:4.522,y:16.989},
+  {x:4.283,y:16.228},{x:4.182,y:15.437},{x:4.220,y:14.640},{x:4.179,y:13.907},
+  {x:3.696,y:13.273},{x:3.332,y:12.563},{x:3.092,y:11.803},{x:3.003,y:11.010},
+  {x:3.038,y:10.213},{x:3.202,y:9.433},{x:3.514,y:8.699},{x:3.944,y:8.027},
+  {x:4.484,y:7.440},{x:5.114,y:6.951},{x:5.822,y:6.586},{x:6.445,y:6.191},
+  {x:6.752,y:5.455},{x:7.185,y:4.785},{x:7.723,y:4.197},{x:8.356,y:3.711},
+];
+
+const BASE = {
+  slump: 0.55,
+  topSag: 1.42,
+  shoulderSag: 0.34,
+  spread: 0.82,
+  floorY: 19.92,
+  floorFlatten: 0.56,
+  bottomSquish: 0.82,
+  leftLean: -0.18,
+  bodyTx: 0,
+  bodyTy: 1.15,
+  bodyRot: -1.5,
+  bodyScale: 1.04,
+  eyeY: 13.0,
+  eyeGap: 6.12,
+  eyeW: 2.70,
+  eyeH: 1.28,
+  eyeTilt: 7.7,
+  eyeStroke: 0.80,
+  eyeOpacity: 0.92,
+  haloY: 20.62,
+  haloRx: 10.8,
+  haloRy: 1.28,
+  haloOpacity: 0.34,
+  glowOpacity: 0.18,
+};
+
+const LOOP = {
+  period: 5.8,
+  breathAmp: 0.038,
+  pathBreath: 0.055,
+  nodCenter: 0.67,
+  nodWidth: 0.17,
+  nodDepth: 0.38,
+  nodRot: -0.85,
+};
+
+const CONTROL_CONFIG = [
+  { key: 'period', label: '周期', min: 3.8, max: 10, step: 0.1, unit: 's' },
+  { key: 'breathAmp', label: '呼吸', min: 0, max: 0.08, step: 0.001 },
+  { key: 'pathBreath', label: '轮廓起伏', min: 0, max: 0.12, step: 0.001 },
+  { key: 'nodCenter', label: '点头位置', min: 0.25, max: 0.90, step: 0.01 },
+  { key: 'nodWidth', label: '点头宽度', min: 0.08, max: 0.28, step: 0.01 },
+  { key: 'nodDepth', label: '点头下沉', min: 0, max: 0.9, step: 0.01 },
+  { key: 'nodRot', label: '点头旋转', min: -2.5, max: 0.5, step: 0.05, unit: 'deg' },
+];
+
+const stage = document.getElementById('stage');
+const readout = document.getElementById('readout');
+const controlGrid = document.getElementById('control-grid');
+let playing = true;
+let startMs = performance.now();
+let pausedT = 0;
+let lowPowerPaused = false;
+let rafId = 0;
+
+function scheduleLoop() {
+  if (!lowPowerPaused && !rafId) rafId = requestAnimationFrame(loop);
+}
+
+window.__clawdSetLowPowerPaused = paused => {
+  const next = !!paused;
+  if (lowPowerPaused === next) return;
+  lowPowerPaused = next;
+  if (next) {
+    pausedT = currentTime(performance.now());
+    playing = false;
+    if (rafId) cancelAnimationFrame(rafId);
+    rafId = 0;
+    return;
+  }
+  playing = true;
+  startMs = performance.now() - pausedT * 1000;
+  scheduleLoop();
+};
+
+function clamp01(v) { return Math.max(0, Math.min(1, v)); }
+function lerp(a, b, t) { return a + (b - a) * t; }
+function smoothstep01(x) {
+  const t = clamp01(x);
+  return t * t * (3 - 2 * t);
+}
+function loopDistance(a, b) {
+  return Math.abs(((a - b + 0.5) % 1 + 1) % 1 - 0.5);
+}
+function loopBump(phase, center, width) {
+  const d = loopDistance(phase, center);
+  if (d >= width) return 0;
+  return 1 - smoothstep01(d / width);
+}
+
+function catmullRomClosedPath(points, tension = 1) {
+  const q = (n) => n.toFixed(3);
+  let d = `M ${q(points[0].x)} ${q(points[0].y)}`;
+  const n = points.length;
+  for (let i = 0; i < n; i++) {
+    const p0 = points[(i - 1 + n) % n];
+    const p1 = points[i];
+    const p2 = points[(i + 1) % n];
+    const p3 = points[(i + 2) % n];
+    const c1x = p1.x + (p2.x - p0.x) * tension / 6;
+    const c1y = p1.y + (p2.y - p0.y) * tension / 6;
+    const c2x = p2.x - (p3.x - p1.x) * tension / 6;
+    const c2y = p2.y - (p3.y - p1.y) * tension / 6;
+    d += ` C ${q(c1x)} ${q(c1y)} ${q(c2x)} ${q(c2y)} ${q(p2.x)} ${q(p2.y)}`;
+  }
+  return `${d} Z`;
+}
+
+function makeDozeCloudPath(amount) {
+  const mix = clamp01(amount);
+  if (mix <= 0.0001) return CLOUD_D;
+  const slump = mix;
+  const points = SOFT_CLOUD_POINTS.map((pt) => {
+    const dx = pt.x - 12;
+    const distX = Math.abs(dx);
+    const sign = dx === 0 ? 0 : Math.sign(dx);
+    const topWeight = Math.pow(clamp01((8.2 - pt.y) / 5.2), 0.95);
+    const crownCenter = clamp01(1 - distX / 6.6);
+    const shoulderWeight = clamp01((pt.y - 6.0) / 8.5) * clamp01((18.6 - pt.y) / 10.5);
+    const lowerWeight = Math.pow(clamp01((pt.y - 15.4) / 5.8), 0.78);
+    const sideWeight = clamp01((distX - 2.2) / 7.5) * clamp01((20.2 - pt.y) / 16.2);
+
+    const topSag = slump * topWeight * BASE.topSag * (0.70 + crownCenter * 0.42);
+    const shoulderSag = slump * shoulderWeight * BASE.shoulderSag;
+    const floorCurve = BASE.floorY + Math.pow(distX / 10, 2) * 0.46 - crownCenter * 0.04;
+    const floorPull = (floorCurve - pt.y) * lowerWeight * BASE.floorFlatten * slump;
+    const sideOut = sign * slump * BASE.spread * (0.18 + sideWeight * 0.76 + lowerWeight * 0.42);
+    const bottomInhale = lowerWeight * BASE.bottomSquish * slump * -0.34;
+    const lean = BASE.leftLean * slump * (0.15 + topWeight * 0.50 + shoulderWeight * 0.30);
+
+    return { x: pt.x + sideOut + lean, y: pt.y + topSag + shoulderSag + floorPull + bottomInhale };
+  });
+  return catmullRomClosedPath(points, lerp(0.95, 0.68, mix));
+}
+
+function defs(cloudD) {
+  return `
+    <linearGradient id="body-grad" x1="12" y1="2" x2="12" y2="22" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#93c5fd"/>
+      <stop offset="0.48" stop-color="#f5f6fa"/>
+      <stop offset="1" stop-color="#dde2ec"/>
+    </linearGradient>
+    <linearGradient id="eye-grad" x1="12" y1="9" x2="12" y2="15" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#B1A7FF"/>
+      <stop offset="0.55" stop-color="#7A9DFF"/>
+      <stop offset="1" stop-color="#3941FF"/>
+    </linearGradient>
+    <radialGradient id="hi-grad" cx="0.43" cy="0.22" r="0.62">
+      <stop offset="0" stop-color="#93c5fd" stop-opacity="0.82"/>
+      <stop offset="0.58" stop-color="#93c5fd" stop-opacity="0.28"/>
+      <stop offset="1" stop-color="#93c5fd" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="halo-grad" cx="50%" cy="50%" r="50%">
+      <stop offset="0" stop-color="#7A9DFF" stop-opacity="0.55"/>
+      <stop offset="0.54" stop-color="#3941FF" stop-opacity="0.24"/>
+      <stop offset="1" stop-color="#3941FF" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="drop" x="-45%" y="-45%" width="190%" height="190%">
+      <feDropShadow class="cloud-drop-shadow" dx="0" dy="0.72" stdDeviation="0.92" flood-color="#3941FF" flood-opacity="0.35"/>
+    </filter>
+    <filter id="edge-blur" x="-40%" y="-40%" width="180%" height="180%">
+      <feGaussianBlur stdDeviation="0.16"/>
+    </filter>
+    <filter id="halo-blur" x="-80%" y="-120%" width="260%" height="340%">
+      <feGaussianBlur stdDeviation="0.42"/>
+    </filter>
+    <clipPath id="cloud-clip"><path d="${cloudD}"/></clipPath>
+  `;
+}
+
+function sleepyEyePath(cx, cy, w, h, tiltDeg, flip) {
+  const x1 = cx - w / 2;
+  const x2 = cx + w / 2;
+  const mid = cy + h * 0.56;
+  const c1x = cx - w * 0.18;
+  const c2x = cx + w * 0.18;
+  const tilt = flip * tiltDeg * 0.018;
+  return `M ${x1.toFixed(2)} ${(cy - tilt).toFixed(2)} C ${c1x.toFixed(2)} ${mid.toFixed(2)} ${c2x.toFixed(2)} ${mid.toFixed(2)} ${x2.toFixed(2)} ${(cy + tilt).toFixed(2)}`;
+}
+
+function makeEyes(frame) {
+  const lcx = 12 - BASE.eyeGap / 2;
+  const rcx = 12 + BASE.eyeGap / 2;
+  const cy = BASE.eyeY + frame.eyeDrop;
+  const h = BASE.eyeH + frame.eyeSoft;
+  const opacity = BASE.eyeOpacity * frame.eyeOpacity;
+  return `
+    <g fill="none" stroke="url(#eye-grad)" stroke-width="${(BASE.eyeStroke + frame.eyeStrokeAdd).toFixed(2)}" stroke-linecap="round" stroke-linejoin="round" opacity="${opacity.toFixed(3)}">
+      <path d="${sleepyEyePath(lcx, cy, BASE.eyeW, h, BASE.eyeTilt, -1)}"/>
+      <path d="${sleepyEyePath(rcx, cy, BASE.eyeW, h, BASE.eyeTilt, 1)}"/>
+    </g>
+  `;
+}
+
+function computeFrame(t) {
+  const phase = (t / LOOP.period) % 1;
+  const inhale = (1 - Math.cos(phase * Math.PI * 2)) / 2;
+  const exhale = 1 - inhale;
+  const nod = loopBump(phase, LOOP.nodCenter, LOOP.nodWidth);
+  const microFloat = Math.sin(phase * Math.PI * 4 + 0.45) * 0.06;
+  const pathSlump = clamp01(BASE.slump - inhale * LOOP.pathBreath + nod * 0.045);
+  const bodyTy = BASE.bodyTy - inhale * LOOP.breathAmp * 4.6 + nod * LOOP.nodDepth + microFloat * 0.18;
+  const bodyRot = BASE.bodyRot + inhale * 0.22 + nod * LOOP.nodRot;
+  const sx = BASE.bodyScale + inhale * LOOP.breathAmp * 0.95 + nod * 0.014;
+  const sy = BASE.bodyScale + inhale * LOOP.breathAmp * 1.36 - nod * 0.024;
+  return {
+    phase,
+    inhale,
+    nod,
+    pathSlump,
+    bodyTy,
+    bodyRot,
+    sx,
+    sy,
+    eyeDrop: -inhale * 0.12 + nod * 0.18,
+    eyeSoft: inhale * 0.12 + nod * 0.10,
+    eyeStrokeAdd: inhale * 0.04 + nod * 0.03,
+    eyeOpacity: clamp01(1 + inhale * 0.04 - nod * 0.04),
+    haloOpacity: BASE.haloOpacity + exhale * 0.045 + nod * 0.055,
+    haloY: BASE.haloY + exhale * 0.08 + nod * 0.18,
+    haloRx: BASE.haloRx + exhale * 0.44 + nod * 0.32,
+    haloRy: BASE.haloRy + exhale * 0.08 + nod * 0.08,
+  };
+}
+
+function renderFrame(t) {
+  const frame = computeFrame(t);
+  const cloudD = makeDozeCloudPath(frame.pathSlump);
+  const bodyTransform = `translate(${BASE.bodyTx.toFixed(3)} ${frame.bodyTy.toFixed(3)}) translate(12 12) rotate(${frame.bodyRot.toFixed(3)}) scale(${frame.sx.toFixed(4)} ${frame.sy.toFixed(4)}) translate(-12 -12)`;
+  stage.innerHTML = `
+<style>
+.edge-rim-tight { stroke-opacity: .9; }
+.edge-rim-soft { stroke-opacity: .75; }
+.edge-contact { stroke-opacity: .9; }
+.wrap {
+  width: min(980px, 100%);
+  display: grid;
+  gap: 18px;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  gap: 14px;
+  align-items: end;
+}
+#stage {
+  width: min(540px, 82vw);
+  aspect-ratio: 1;
+  display: grid;
+  place-items: center;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(120px, 1fr));
+  gap: 10px 14px;
+}
+.field {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 6px;
+  align-items: center;
+  color: rgba(255,255,255,.58);
+  font-size: 12px;
+}
+.field input { grid-column: 1 / -1; }
+output {
+  min-width: 46px;
+  text-align: right;
+  color: rgba(255,255,255,.70);
+  font-size: 12px;
+}
+@media (prefers-color-scheme: light) {
+.edge-rim-tight { stroke-opacity: .95; }
+.edge-rim-soft { stroke-opacity: .85; }
+.edge-contact { stroke-opacity: .95; }
+.cloud-drop-shadow { flood-opacity: .13; }
+output, .field { color: rgba(21,33,63,.62); }
+.cloud-drop-shadow { flood-opacity: .13; }
+.food-cloud-shadow { flood-opacity: .28; flood-color: #5060FF; }
+.food-cloud > path {
+  stroke: #5870E8 !important;
+  stroke-width: 1.2 !important;
+  stroke-opacity: .9 !important;
+  vector-effect: non-scaling-stroke !important;
+}
+}
+</style>
+<defs>
+        ${defs(cloudD)}
+        <path id="cloud-shape" d="${cloudD}"/>
+      </defs>
+      <g id="halo-layer">
+        <ellipse cx="12" cy="${frame.haloY.toFixed(2)}" rx="${frame.haloRx.toFixed(2)}" ry="${frame.haloRy.toFixed(2)}" fill="url(#halo-grad)" opacity="${frame.haloOpacity.toFixed(3)}" filter="url(#halo-blur)"/>
+        <ellipse cx="12" cy="${(frame.haloY + 0.05).toFixed(2)}" rx="${(frame.haloRx * 0.68).toFixed(2)}" ry="${(frame.haloRy * 0.46).toFixed(2)}" fill="#7A9DFF" opacity="${BASE.glowOpacity}" filter="url(#halo-blur)"/>
+      </g>
+      <g transform="${bodyTransform}">
+        <g id="edge-system">
+          <use class="edge-contact" href="#cloud-shape" fill="none" stroke="#7d8aa7" stroke-width="1.00" stroke-linejoin="round" transform="translate(0 0.16)" filter="url(#edge-blur)"/>
+          <use class="edge-rim-soft" href="#cloud-shape" fill="none" stroke="#7A9DFF" stroke-width="0.88" stroke-linejoin="round" filter="url(#edge-blur)"/>
+          <use class="edge-rim-tight" href="#cloud-shape" fill="none" stroke="#aab3c6" stroke-width="0.40" stroke-linejoin="round"/>
+        </g>
+        <g filter="url(#drop)">
+          <use href="#cloud-shape" fill="url(#body-grad)"/>
+          <rect x="1" y="2.2" width="22" height="10.4" fill="url(#hi-grad)" clip-path="url(#cloud-clip)" opacity=".88"/>
+        </g>
+        ${makeEyes(frame)}
+      </g>
+  `;
+  readout.innerHTML = `<span>phase: <b>${frame.phase.toFixed(2)}</b></span><span>slump ${(frame.pathSlump * 100).toFixed(0)}%</span><span>inhale ${(frame.inhale * 100).toFixed(0)}%</span><span>nod ${(frame.nod * 100).toFixed(0)}%</span><span>rot ${frame.bodyRot.toFixed(2)}deg</span>`;
+}
+
+function currentTime(now) {
+  if (!playing) return pausedT;
+  return (now - startMs) / 1000;
+}
+
+function loop(now) {
+  rafId = 0;
+  if (lowPowerPaused) return;
+  renderFrame(currentTime(now));
+  scheduleLoop();
+}
+
+renderFrame(0);
+scheduleLoop();
+]]></script>
+</svg>