08A Pet Creature That Wanders, Tags Along and Startles Away
When the target stops it wanders on smooth noise, when the target moves it eases off as it gets closer, and when the target moves too fast it bolts the other way before settling down.
Best forHelper character in the corner of a store page
STARTLE_SPEEDARRIVE_RADIUSWANDER_TURN
<main class="stage">
<div class="cf is-demo" id="cf">
<canvas class="cf__canvas" data-role="canvas" width="480" height="300" role="img" aria-label="A round pet that wanders when the target stops, follows when it moves, and bolts away when it moves too fast."></canvas>
<p class="cf__status" data-role="status" aria-live="off">Wandering</p>
<button class="cf__pause" data-role="pause" type="button" aria-pressed="false">Pause</button>
</div>
</main>@use "../../../../site/static/demo-tokens" as *;
@include stage($stage-paper);
.cf {
position: relative;
width: min(92vw, calc(160vh - 12.8vw));
aspect-ratio: 480 / 300;
margin: 0 auto;
border-radius: $r-card;
overflow: hidden;
box-shadow: $shadow-raised;
background: $subject-cream;
}
.cf__canvas {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
.cf__pause {
position: absolute;
right: $sp-3;
bottom: $sp-3;
padding: $sp-1 $sp-3;
border: 2px solid $subject-ink;
border-radius: $r-pill;
background: $subject-ink;
color: $subject-cream;
font-family: inherit;
font-weight: 700;
font-size: 12px;
line-height: 1.6;
cursor: pointer;
box-shadow: $shadow-press;
transition: transform $dur-quick $ease-spring;
}
// 눌린 상태(멈춤) — 바탕과 글자색을 뒤집어 aria-pressed 가 눈에도 보이게
.cf__pause[aria-pressed="true"] {
background: $subject-cream;
color: $subject-ink;
}
.cf__pause:hover {
transform: translateY(-2px);
}
.cf__pause:active {
transform: translateY(1px);
}
.cf__pause:focus-visible {
outline: 3px solid $subject-ink;
outline-offset: 3px;
}
// 상태 줄 — 지금 어떤 행동 중인지 글자로. 시연 중에는 aria-live off, 사람이 처음 손대면 polite
.cf__status {
position: absolute;
left: $sp-3;
top: $sp-3;
margin: 0;
padding: $sp-1 $sp-3;
border-radius: $r-pill;
background: $subject-ink;
color: $subject-cream;
font-weight: 700;
font-size: 12px;
line-height: 1.6;
pointer-events: none;
}
@media (max-width: 340px) {
.cf__pause,
.cf__status { font-size: 11px; padding: $sp-1 $sp-2; }
}
// 동작 줄이기 — 장면은 스크립트가 쉬는 자세 한 장으로 멈춘다. 버튼도 떠오르지 않게
@media (prefers-reduced-motion: reduce) {
.cf__pause { transition: none !important; }
.cf__pause:hover,
.cf__pause:active { transform: none !important; }
}html, body {
margin: 0;
overflow: hidden;
}
.stage {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
background: #ffffff;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: clamp(8px, 4vw, 24px);
}
.cf {
position: relative;
width: min(92vw, 160vh - 12.8vw);
aspect-ratio: 480/300;
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
background: #fff7e6;
}
.cf__canvas {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
.cf__pause {
position: absolute;
right: 12px;
bottom: 12px;
padding: 4px 12px;
border: 2px solid #17141a;
border-radius: 999px;
background: #17141a;
color: #fff7e6;
font-family: inherit;
font-weight: 700;
font-size: 12px;
line-height: 1.6;
cursor: pointer;
box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cf__pause[aria-pressed=true] {
background: #fff7e6;
color: #17141a;
}
.cf__pause:hover {
transform: translateY(-2px);
}
.cf__pause:active {
transform: translateY(1px);
}
.cf__pause:focus-visible {
outline: 3px solid #17141a;
outline-offset: 3px;
}
.cf__status {
position: absolute;
left: 12px;
top: 12px;
margin: 0;
padding: 4px 12px;
border-radius: 999px;
background: #17141a;
color: #fff7e6;
font-weight: 700;
font-size: 12px;
line-height: 1.6;
pointer-events: none;
}
@media (max-width: 340px) {
.cf__pause,
.cf__status {
font-size: 11px;
padding: 4px 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.cf__pause {
transition: none !important;
}
.cf__pause:hover,
.cf__pause:active {
transform: none !important;
}
}(function () {
const root = document.getElementById("cf");
if (!root) return;
// 판 좌표 — 캔버스 안은 늘 480×300. 화면에 보이는 크기와 상관없이 계산은 이 좌표로 한다
const W = 480;
const H = 300;
const TAU = Math.PI * 2;
function clamp(v, lo, hi) { return v < lo ? lo : (v > hi ? hi : v); }
function lerp(a, b, k) { return a + (b - a) * k; }
function smooth(x) { const c = clamp(x, 0, 1); return c * c * (3 - 2 * c); }
// 각을 -π~π 로 접는다 — 두 방향의 차이를 잴 때 한 바퀴 넘어간 값을 되돌린다
function wrapAngle(a) {
let r = a;
while (r > Math.PI) {
r -= TAU;
}
while (r < -Math.PI) {
r += TAU;
}
return r;
}
// 따라가기 비율 — 1 − e^(−rate·dt). 프레임 시간이 달라도 1초에 같은 만큼 다가간다
function follow(rate, dt) { return 1 - Math.exp(-rate * dt); }
// 시드 고정 난수 — 같은 시드면 같은 흔들림·배치가 다시 나온다 (32비트 정수 섞기)
function makeRng(seed) {
let s = seed >>> 0;
return function () {
s = (s + 0x6d2b79f5) >>> 0;
let t = s;
t = Math.imul(t ^ (t >>> 15), t | 1);
t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};
}
// 1차원 값 노이즈 — 정수 자리마다 시드로 정한 값(-1~1)을 두고 사이는 부드러운 보간. 흔들림·배회 방향에 쓴다
const NOISE_TABLE = new Float32Array(256);
const noiseRng = makeRng(480);
for (let i = 0; i < 256; i += 1) {
NOISE_TABLE[i] = noiseRng() * 2 - 1;
}
function smoothNoise(x) {
const i = Math.floor(x);
const f = x - i;
const u = f * f * (3 - 2 * f);
return lerp(NOISE_TABLE[i & 255], NOISE_TABLE[(i + 1) & 255], u);
}
// 8자 길 — 가로로 한 번(sin θ), 세로로 두 번(sin 2θ) 흔들리는 점. 판 가운데를 지나는 두 고리를 period 초에 한 바퀴
function figureEight(t, ax, ay, period) {
const a = TAU * t / period;
return [W / 2 + ax * Math.sin(a), H / 2 + ay * Math.sin(2 * a)];
}
// 마디 사슬 — xs[0], ys[0] 이 머리. 머리를 옮긴 뒤 부르면 뒤 마디마다 「앞 마디에서 지금 자기 쪽으로 향한 방향 × gap」 자리로 끌어온다.
// 간격만 지키므로 마디는 늘지도 줄지도 않고, 몸은 머리가 지나간 길을 대충 따라 눕는다.
// maxBend 가 π 보다 작으면 이웃 두 토막이 꺾이는 각을 ±maxBend(라디안)로 자른다 — π 이상(예: Math.PI)이면 각 한계 없음.
// backAngle 은 머리 뒤쪽 방향(머리 진행 방향 + π). 숫자면 첫 토막도 그 방향을 기준으로 자른다, NaN 이면 첫 토막은 자유
function followChain(xs, ys, gap, maxBend, backAngle) {
const n = xs.length;
let prevAng = backAngle;
for (let i = 1; i < n; i += 1) {
let ang = Math.atan2(ys[i] - ys[i - 1], xs[i] - xs[i - 1]);
if (maxBend < Math.PI && !isNaN(prevAng)) {
const d = wrapAngle(ang - prevAng);
if (d > maxBend) {
ang = prevAng + maxBend;
}
else if (d < -maxBend) {
ang = prevAng - maxBend;
}
}
xs[i] = xs[i - 1] + Math.cos(ang) * gap;
ys[i] = ys[i - 1] + Math.sin(ang) * gap;
prevAng = ang;
}
}
// 마디 i 에서 머리 쪽을 향한 방향(라디안) — 양 끝은 이웃 한 토막, 가운데는 앞뒤 마디를 이은 방향
function jointAngle(xs, ys, i) {
const n = xs.length;
if (i <= 0) {
return Math.atan2(ys[0] - ys[1], xs[0] - xs[1]);
}
if (i >= n - 1) {
return Math.atan2(ys[n - 2] - ys[n - 1], xs[n - 2] - xs[n - 1]);
}
return Math.atan2(ys[i - 1] - ys[i + 1], xs[i - 1] - xs[i + 1]);
}
// 이웃 두 토막 사이 꺾인 각(라디안, 부호 있음) — 마디 i 앞 토막과 뒤 토막의 방향 차
function bendAt(xs, ys, i) {
const a = Math.atan2(ys[i] - ys[i - 1], xs[i] - xs[i - 1]);
const b = Math.atan2(ys[i + 1] - ys[i], xs[i + 1] - xs[i]);
return wrapAngle(b - a);
}
// 몸 윤곽 — 마디마다 방향의 법선(직각) 쪽으로 radii[i] 만큼 좌우로 민 점을 잇는다.
// 순서: 머리 왼쪽 → 왼쪽 옆구리를 따라 꼬리 → 꼬리 끝 → 오른쪽 옆구리를 따라 머리 → 머리 앞쪽 반원(HEAD_CAP_STEPS 조각). 닫힌 다각형, 점마다 x 와 y 를 차례로 넣은 한 줄 배열
const HEAD_CAP_STEPS = 6;
function bodyOutline(xs, ys, radii) {
const n = xs.length;
const pts = [];
for (let i = 0; i < n; i += 1) {
const a = jointAngle(xs, ys, i) + Math.PI / 2;
pts.push(xs[i] + Math.cos(a) * radii[i], ys[i] + Math.sin(a) * radii[i]);
}
const tailA = jointAngle(xs, ys, n - 1) + Math.PI;
pts.push(xs[n - 1] + Math.cos(tailA) * radii[n - 1], ys[n - 1] + Math.sin(tailA) * radii[n - 1]);
for (let i = n - 1; i >= 0; i -= 1) {
const a = jointAngle(xs, ys, i) - Math.PI / 2;
pts.push(xs[i] + Math.cos(a) * radii[i], ys[i] + Math.sin(a) * radii[i]);
}
const a0 = jointAngle(xs, ys, 0);
for (let k = 1; k < HEAD_CAP_STEPS; k += 1) {
const a = a0 - Math.PI / 2 + Math.PI * k / HEAD_CAP_STEPS;
pts.push(xs[0] + Math.cos(a) * radii[0], ys[0] + Math.sin(a) * radii[0]);
}
return pts;
}
// 몸이 스스로 겹친 정도 — 사슬에서 3칸 이상 떨어진 두 마디가 두 반지름 합보다 가까운 쌍의 수와 가장 가까운 거리
function selfOverlap(xs, ys, radii) {
const n = xs.length;
let count = 0;
let nearest = Infinity;
for (let i = 0; i < n; i += 1) {
for (let j = i + 3; j < n; j += 1) {
const d = Math.hypot(xs[i] - xs[j], ys[i] - ys[j]);
if (d < nearest) {
nearest = d;
}
if (d < radii[i] + radii[j]) {
count += 1;
}
}
}
return [count, nearest];
}
// 파스텔 팔레트 — 크림·옅은 민트 바탕 위에 파스텔 생물, 윤곽선과 그림자는 진한 잉크색으로 명도 차를 둔다
const PAPER = [251, 247, 238];
const PAPER_LOW = [222, 242, 234];
const INK = [58, 50, 74];
const CREAM = [255, 251, 242];
const CORAL = [244, 162, 144];
const LAVENDER = [188, 170, 236];
const BUTTER = [246, 222, 140];
const SAGE = [156, 204, 164];
const PINK = [244, 176, 200];
const SKY = [156, 204, 236];
function rgba(c, a) {
return 'rgba(' + Math.round(clamp(c[0], 0, 255)) + ',' + Math.round(clamp(c[1], 0, 255)) + ',' + Math.round(clamp(c[2], 0, 255)) + ',' + clamp(a, 0, 1).toFixed(3) + ')';
}
function shade(c, k) { return [c[0] * k, c[1] * k, c[2] * k]; }
const canvasEl = root.querySelector('[data-role="canvas"]');
const pauseEl = root.querySelector('[data-role="pause"]');
const ctxRaw = canvasEl ? canvasEl.getContext('2d') : null;
if (!canvasEl || !ctxRaw || !pauseEl) {
return;
}
const cv = canvasEl;
const ctx = ctxRaw;
const pauseBtn = pauseEl;
// 목표점(판 좌표)과 그 속도(px/초) — 8자 길 또는 포인터. 그리기에서 눈동자 방향·목표 표시에 쓴다
let tx = W / 2;
let ty = H / 2;
let tvx = 0;
let tvy = 0;
function fitCanvas() {
// 배율은 2 에서 자른다 — 배율 3 기기에서 화소가 2.25배로 늘어 프레임마다 일이 그만큼 커지지 않게
const dpr = Math.min(window.devicePixelRatio || 1, 2);
cv.width = Math.round(W * dpr);
cv.height = Math.round(H * dpr);
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
function clearStage(top, bottom) {
const g = ctx.createLinearGradient(0, 0, 0, H);
g.addColorStop(0, rgba(top, 1));
g.addColorStop(1, rgba(bottom, 1));
ctx.fillStyle = g;
ctx.fillRect(0, 0, W, H);
}
// 점들을 지나는 매끈한 닫힌 곡선 — 이웃 두 점의 가운데를 잇고 점 자체는 2차 곡선의 조절점으로 쓴다
function smoothClosed(pts) {
const n = pts.length / 2;
ctx.beginPath();
ctx.moveTo((pts[2 * (n - 1)] + pts[0]) / 2, (pts[2 * (n - 1) + 1] + pts[1]) / 2);
for (let i = 0; i < n; i += 1) {
const j = (i + 1) % n;
ctx.quadraticCurveTo(pts[2 * i], pts[2 * i + 1], (pts[2 * i] + pts[2 * j]) / 2, (pts[2 * i + 1] + pts[2 * j + 1]) / 2);
}
ctx.closePath();
}
function fillShape(pts, fill, line) {
smoothClosed(pts);
ctx.fillStyle = rgba(fill, 1);
ctx.fill();
if (line > 0) {
ctx.lineWidth = line;
ctx.lineJoin = 'round';
ctx.strokeStyle = rgba(INK, 1);
ctx.stroke();
}
}
// 바닥 그림자 — 같은 윤곽을 (ox, oy) 만큼 밀어 옅은 잉크색으로
function dropShadow(pts, ox, oy, alpha) {
ctx.save();
ctx.translate(ox, oy);
smoothClosed(pts);
ctx.fillStyle = rgba(INK, alpha);
ctx.fill();
ctx.restore();
}
// 눈 — 흰자 위 눈동자를 (lookX, lookY) 쪽으로 반지름의 0.4 만큼 민다. open 0~1 은 위 눈꺼풀이 덮는 정도의 반대
function drawEye(x, y, r, lookX, lookY, open) {
const a = Math.atan2(lookY - y, lookX - x);
ctx.beginPath();
ctx.arc(x, y, r, 0, TAU);
ctx.fillStyle = rgba(CREAM, 1);
ctx.fill();
ctx.lineWidth = 1.5;
ctx.strokeStyle = rgba(INK, 1);
ctx.stroke();
ctx.beginPath();
ctx.arc(x + Math.cos(a) * r * 0.4, y + Math.sin(a) * r * 0.4, r * 0.55, 0, TAU);
ctx.fillStyle = rgba(INK, 1);
ctx.fill();
if (open < 1) {
ctx.save();
ctx.beginPath();
ctx.arc(x, y, r + 0.5, 0, TAU);
ctx.clip();
ctx.fillStyle = rgba(INK, 0.85);
ctx.fillRect(x - r - 1, y - r - 1, 2 * r + 2, (2 * r + 2) * (1 - open));
ctx.restore();
}
}
// 목표 표시 — 잉크색 고리와 점. 생물이 무엇을 쫓는지 보이게
function drawTarget(x, y) {
// 동작 줄이기의 쉬는 자세에서는 포인터가 올라왔을 때만 보인다
if (still && !ptrOn) {
return;
}
ctx.beginPath();
ctx.arc(x, y, 7, 0, TAU);
ctx.lineWidth = 2;
ctx.strokeStyle = rgba(INK, 0.55);
ctx.stroke();
ctx.beginPath();
ctx.arc(x, y, 2.5, 0, TAU);
ctx.fillStyle = rgba(INK, 0.7);
ctx.fill();
}
// 08 반려 생물 — 상태 셋을 오간다: 0 배회(목표가 멈춤) · 1 따라가기(목표가 움직임) · 2 놀라 달아나기(목표가 너무 빠르고 가까움)
const WANDER = 0;
const FOLLOW = 1;
const STARTLE = 2;
const PET_RADIUS = 28;
// 따라가기 — 원하는 속도 = MAX_SPEED × clamp((거리 − STOP_DIST) / ARRIVE_RADIUS, 0, 1). 가까워질수록 느려지다 STOP_DIST 에서 선다
const MAX_SPEED = 170;
const ARRIVE_RADIUS = 110;
const STOP_DIST = 46;
// 방향 바꾸기 — 지금 속도를 원하는 속도 쪽으로 따라가기 비율 STEER(1/초)로. 달아날 때는 FLEE_STEER
const STEER = 4;
const FLEE_STEER = 9;
// 배회 — 1초에 WANDER_TURN × 노이즈(−1~1) 라디안씩 방향을 틀며 WANDER_SPEED(px/초)로 걷는다
const WANDER_SPEED = 45;
const WANDER_TURN = 2.2;
// 놀람 — 목표 속도가 STARTLE_SPEED(px/초)를 넘고 거리가 STARTLE_RADIUS 안이면 FLEE_SPEED 로 반대쪽으로 달아나 CALM_TIME 초 뒤 진정
const STARTLE_SPEED = 420;
const STARTLE_RADIUS = 160;
const FLEE_SPEED = 260;
const CALM_TIME = 1.1;
const FLEE_MARGIN = 110;
// 목표가 움직인다고 보는 속도(px/초)와, 멈춘 뒤 배회로 바뀌기까지의 시간(초)
const MOVE_SPEED = 25;
const IDLE_DELAY = 0.6;
// 목표 일정(9초 한 바퀴) — [끝 시각(초), 8자 길 위 빠르기 배수]. 0 이면 멈춤, 4.5 면 쏜살같이
const TARGET_PLAN = [1.6, 0, 4.4, 1, 5.0, 4.5, 7.4, 1, 9, 0];
const PLAN_LENGTH = 9;
const PREWARM = 3.4;
// 일정을 적분해 8자 길 위 자리(길 시계, 초)를 구한다 — 빠르기 배수 × 지난 시간의 합
function planClock(t) {
const loops = Math.floor(t / PLAN_LENGTH);
const local = t - loops * PLAN_LENGTH;
let perLoop = 0;
let acc = 0;
let start = 0;
for (let i = 0; i < TARGET_PLAN.length; i += 2) {
const end = TARGET_PLAN[i];
const rate = TARGET_PLAN[i + 1];
perLoop += (end - start) * rate;
if (local > start) {
acc += (Math.min(local, end) - start) * rate;
}
start = end;
}
return loops * perLoop + acc;
}
function pathAt(t) { return figureEight(planClock(t), 165, 90, 8); }
let pet = { x: W / 2, y: H / 2, vx: 0, vy: 0, wanderAng: 0, state: WANDER, calm: 0, idle: 0, clock: 0 };
// 꼬리 — 몸 뒤에 붙은 짧은 사슬(각 한계 0.5)
const TAIL_JOINTS = 8;
const petTailX = new Float64Array(TAIL_JOINTS);
const petTailY = new Float64Array(TAIL_JOINTS);
function reset() {
const p = pathAt(0);
pet = { x: p[0] - 70, y: p[1] + 20, vx: 0, vy: 0, wanderAng: 0, state: WANDER, calm: 0, idle: 0, clock: 0 };
for (let i = 0; i < TAIL_JOINTS; i += 1) {
petTailX[i] = pet.x - PET_RADIUS * 0.8 - i * 8;
petTailY[i] = pet.y;
}
}
function update(dt, tx, ty, tvx, tvy) {
pet.clock += dt;
const dx = tx - pet.x;
const dy = ty - pet.y;
const dist = Math.hypot(dx, dy) || 1;
const targetSpeed = Math.hypot(tvx, tvy);
if (pet.state !== STARTLE && targetSpeed > STARTLE_SPEED && dist < STARTLE_RADIUS) {
pet.state = STARTLE;
pet.calm = CALM_TIME;
}
let wantX = 0;
let wantY = 0;
let steer = STEER;
if (pet.state === STARTLE) {
// 달아날 방향 = 목표 반대쪽. 판 가장자리 FLEE_MARGIN(px) 안이면 가운데 쪽을 섞어 벽에 붙지 않게
let fa = Math.atan2(-dy, -dx);
const edge = Math.min(pet.x, W - pet.x, pet.y, H - pet.y);
if (edge < FLEE_MARGIN) {
const home = Math.atan2(H / 2 - pet.y, W / 2 - pet.x);
fa += wrapAngle(home - fa) * (1 - edge / FLEE_MARGIN);
}
wantX = Math.cos(fa) * FLEE_SPEED;
wantY = Math.sin(fa) * FLEE_SPEED;
steer = FLEE_STEER;
pet.calm -= dt;
if (pet.calm <= 0) {
pet.state = targetSpeed > MOVE_SPEED ? FOLLOW : WANDER;
}
}
else {
pet.idle = targetSpeed > MOVE_SPEED ? 0 : pet.idle + dt;
pet.state = pet.idle > IDLE_DELAY ? WANDER : FOLLOW;
if (pet.state === FOLLOW) {
const sp = MAX_SPEED * clamp((dist - STOP_DIST) / ARRIVE_RADIUS, 0, 1);
wantX = dx / dist * sp;
wantY = dy / dist * sp;
}
else {
pet.wanderAng += smoothNoise(pet.clock * 0.7) * WANDER_TURN * dt;
// 판 가장자리에 가까우면 가운데 쪽으로 방향을 끈다
const edge = Math.min(pet.x, W - pet.x, pet.y, H - pet.y);
if (edge < 70) {
const home = Math.atan2(H / 2 - pet.y, W / 2 - pet.x);
pet.wanderAng += wrapAngle(home - pet.wanderAng) * follow(3, dt);
}
wantX = Math.cos(pet.wanderAng) * WANDER_SPEED;
wantY = Math.sin(pet.wanderAng) * WANDER_SPEED;
}
}
const k = follow(steer, dt);
pet.vx = lerp(pet.vx, wantX, k);
pet.vy = lerp(pet.vy, wantY, k);
pet.x = clamp(pet.x + pet.vx * dt, PET_RADIUS * 1.6, W - PET_RADIUS * 1.6);
pet.y = clamp(pet.y + pet.vy * dt, PET_RADIUS * 1.8, H - PET_RADIUS * 1.4);
if (Math.hypot(pet.vx, pet.vy) > 8 && pet.state !== WANDER) {
pet.wanderAng = Math.atan2(pet.vy, pet.vx);
}
// 꼬리 뿌리 = 몸 뒤(속도 반대쪽) 가장자리
const back = Math.hypot(pet.vx, pet.vy) > 2 ? Math.atan2(-pet.vy, -pet.vx) : Math.atan2(petTailY[1] - pet.y, petTailX[1] - pet.x);
petTailX[0] = pet.x + Math.cos(back) * PET_RADIUS * 0.8;
petTailY[0] = pet.y + Math.sin(back) * PET_RADIUS * 0.8;
followChain(petTailX, petTailY, 8, 0.5, back);
}
function restPose() {
pet = { x: W / 2, y: H / 2 + 10, vx: 0, vy: 0, wanderAng: 0, state: WANDER, calm: 0, idle: 0, clock: 0 };
for (let i = 0; i < TAIL_JOINTS; i += 1) {
petTailX[i] = pet.x - PET_RADIUS * 0.8 - i * 8;
petTailY[i] = pet.y - Math.sin(i / (TAIL_JOINTS - 1) * Math.PI) * 10;
}
}
// 상태 줄 글자 — 상태 번호 순서(배회 · 따라가기 · 놀람)
const STATUS_TEXT = ['Wandering', 'Following', 'Startled, running away'];
const statusEl = root.querySelector('[data-role="status"]');
let shownState = -1;
function draw() {
clearStage(PAPER, PAPER_LOW);
const speed = Math.hypot(pet.vx, pet.vy);
const ang = speed > 2 ? Math.atan2(pet.vy, pet.vx) : 0;
// 늘이기·누르기 — 빠를수록 진행 방향으로 길어지고 옆으로 얇아진다(넓이는 그대로)
const stretch = 1 + Math.min(speed / 600, 0.32);
const squash = 1 / Math.sqrt(stretch);
ctx.beginPath();
ctx.ellipse(pet.x + 4, pet.y + PET_RADIUS * 0.9, PET_RADIUS * 1.05, 7, 0, 0, TAU);
ctx.fillStyle = rgba(INK, 0.13);
ctx.fill();
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
for (let pass = 0; pass < 2; pass += 1) {
ctx.beginPath();
ctx.moveTo(petTailX[0], petTailY[0]);
for (let i = 1; i < TAIL_JOINTS; i += 1) {
ctx.lineTo(petTailX[i], petTailY[i]);
}
ctx.lineWidth = pass === 0 ? 10 : 6;
ctx.strokeStyle = pass === 0 ? rgba(INK, 1) : rgba(BUTTER, 1);
ctx.stroke();
}
ctx.save();
ctx.translate(pet.x, pet.y);
ctx.rotate(ang);
ctx.scale(stretch, squash);
ctx.rotate(-ang);
// 귀 — 머리 위 두 개의 둥근 삼각형
for (let s = -1; s <= 1; s += 2) {
ctx.beginPath();
ctx.moveTo(s * 8, -PET_RADIUS * 0.8);
ctx.lineTo(s * 22, -PET_RADIUS * 1.35);
ctx.lineTo(s * 25, -PET_RADIUS * 0.45);
ctx.closePath();
ctx.fillStyle = rgba(BUTTER, 1);
ctx.fill();
ctx.lineWidth = 2.5;
ctx.strokeStyle = rgba(INK, 1);
ctx.stroke();
}
ctx.beginPath();
ctx.arc(0, 0, PET_RADIUS, 0, TAU);
ctx.fillStyle = rgba(BUTTER, 1);
ctx.fill();
ctx.lineWidth = 2.5;
ctx.strokeStyle = rgba(INK, 1);
ctx.stroke();
ctx.fillStyle = rgba(CORAL, 0.75);
for (let s = -1; s <= 1; s += 2) {
ctx.beginPath();
ctx.ellipse(s * 15, 9, 6, 4, 0, 0, TAU);
ctx.fill();
}
ctx.restore();
// 눈 — 배회 중엔 반쯤 감고, 놀라면 크게 뜬다. 눈동자는 늘 목표 쪽
const open = pet.state === WANDER ? 0.5 : 1;
const er = pet.state === STARTLE ? 8 : 6;
for (let s = -1; s <= 1; s += 2) {
drawEye(pet.x + s * 10, pet.y - 5, er, tx, ty, open);
}
if (pet.state === STARTLE) {
// 놀람 표시 — 머리 위 느낌표, 남은 진정 시간만큼 위로 떠 있다
const lift = 10 + 14 * clamp(pet.calm / CALM_TIME, 0, 1);
ctx.fillStyle = rgba(INK, 1);
ctx.fillRect(pet.x - 2.5, pet.y - PET_RADIUS - lift - 18, 5, 13);
ctx.beginPath();
ctx.arc(pet.x, pet.y - PET_RADIUS - lift, 3, 0, TAU);
ctx.fill();
}
drawTarget(tx, ty);
if (statusEl && shownState !== pet.state) {
shownState = pet.state;
statusEl.textContent = STATUS_TEXT[pet.state];
}
}
// 한 프레임에 넘기는 시간 상한(초) — 탭을 오래 숨겼다 돌아온 첫 프레임에도 50ms 까지만 계산에 넣는다
const DT_MAX = 0.05;
// 미리 돌리기 — 첫 장면을 그리기 전에 PREWARM 초를 1/60초 걸음으로 계산해 생물이 길 위에 자리 잡은 채 시작한다
const PREWARM_STEP = 1 / 60;
// 시연 시계(초) — 8자 길 위의 자리를 정한다
let simTime = 0;
// 포인터(판 좌표) — 판 위에 있으면 목표를 포인터 쪽으로 옮긴다. 떠나면 다시 8자 길로 서서히 돌아간다
let ptrX = W / 2;
let ptrY = H / 2;
let ptrOn = false;
let ptrBlend = 0;
let paused = false;
const reduceQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
// 페이지를 연 채 동작 줄이기 설정을 바꿔도 change 리스너가 이 값을 다시 읽는다
let still = reduceQuery.matches;
// 자동 시연 중인가 — 사람이 처음 손대면 시연 표시를 떼고 알림 줄을 polite 로 켠다
let demo = root.classList.contains('is-demo');
// 리스너는 한 묶음으로 달고 정리할 때 한 번에 뗀다
const off = new AbortController();
function wake() {
if (!demo) {
return;
}
demo = false;
root.classList.remove('is-demo');
const live = root.querySelector('[aria-live]');
if (live) {
live.setAttribute('aria-live', 'polite');
}
}
// 목표 옮기기 — 8자 길 자리와 포인터 자리를 ptrBlend 비율로 섞고, 그 변화로 목표 속도를 잰다
function moveTarget(dt) {
const p = pathAt(simTime);
ptrBlend = lerp(ptrBlend, ptrOn ? 1 : 0, follow(4, dt));
const nx = lerp(p[0], ptrX, ptrBlend);
const ny = lerp(p[1], ptrY, ptrBlend);
if (dt > 0) {
tvx = lerp(tvx, (nx - tx) / dt, follow(12, dt));
tvy = lerp(tvy, (ny - ty) / dt, follow(12, dt));
}
tx = nx;
ty = ny;
}
function advance(dt) {
simTime += dt;
moveTarget(dt);
update(dt, tx, ty, tvx, tvy);
}
let rafId = 0;
let lastTs = -1;
function frame(ts) {
if (still || paused) {
rafId = 0;
return;
}
if (lastTs < 0) {
lastTs = ts;
}
const dt = Math.min((ts - lastTs) / 1000, DT_MAX);
lastTs = ts;
if (dt > 0) {
advance(dt);
}
draw();
rafId = window.requestAnimationFrame(frame);
}
function startLoop() {
if (rafId) {
return;
}
// 시계 다시 맞추기 — 멈췄던 사이의 시간을 첫 프레임 dt 로 넘기지 않는다
lastTs = -1;
rafId = window.requestAnimationFrame(frame);
}
function stopLoop() {
if (rafId) {
window.cancelAnimationFrame(rafId);
rafId = 0;
}
}
// 동작 줄이기 — 루프를 돌리지 않고 쉬는 자세 한 장면만 그린다
function showRest() {
stopLoop();
reset();
restPose();
draw();
}
function play() {
reset();
simTime = 0;
const p = pathAt(0);
tx = p[0];
ty = p[1];
tvx = 0;
tvy = 0;
for (let t = 0; t < PREWARM; t += PREWARM_STEP) {
advance(PREWARM_STEP);
}
draw();
if (!paused) {
startLoop();
}
}
function setPointer(ev) {
const r = cv.getBoundingClientRect();
ptrX = (ev.clientX - r.left) * W / Math.max(1, r.width);
ptrY = (ev.clientY - r.top) * H / Math.max(1, r.height);
ptrOn = true;
wake();
// 동작 줄이기에서도 입력은 화면에 남는다 — 쉬는 자세 그대로 눈과 목표 표시만 포인터 쪽으로 다시 그린다
if (still) {
tx = ptrX;
ty = ptrY;
draw();
}
}
cv.addEventListener('pointermove', setPointer, { signal: off.signal });
cv.addEventListener('pointerdown', setPointer, { signal: off.signal });
function leavePointer() { ptrOn = false; }
cv.addEventListener('pointerleave', leavePointer, { signal: off.signal });
cv.addEventListener('pointercancel', leavePointer, { signal: off.signal });
pauseBtn.addEventListener('click', function () {
paused = !paused;
pauseBtn.setAttribute('aria-pressed', paused ? 'true' : 'false');
wake();
if (paused) {
stopLoop();
}
else if (!still) {
startLoop();
}
}, { signal: off.signal });
// 탭이 숨으면 루프를 멈추고, 돌아오면 시계를 다시 맞춰 시작한다 — 숨은 동안의 몇 초가 한 프레임에 몰리지 않게
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
stopLoop();
}
else if (!paused && !still) {
startLoop();
}
}, { signal: off.signal });
// 설정이 페이지를 연 채 바뀌면 — 켜지면 쉬는 자세로 멈추고, 꺼지면 시연을 처음부터
reduceQuery.addEventListener('change', function () {
still = reduceQuery.matches;
if (still) {
showRest();
}
else {
play();
}
}, { signal: off.signal });
window.addEventListener('resize', function () {
fitCanvas();
draw();
}, { signal: off.signal });
fitCanvas();
if (still) {
showRest();
}
else {
play();
}
return function () {
stopLoop();
off.abort();
};
})();// PetWanderArriveStartle - vanilla 판(08-creature-pet-wander-arrive-startle) 의 React 포트. 같은 계산을 useEffect 안에서 돌린다.
import { useEffect, useRef } from "react";
import styles from "./PetWanderArriveStartle.module.scss";
const cx = (s: string): string => s.split(" ").map((n) => styles[n] ?? n).join(" ");
export default function PetWanderArriveStartle() {
const rootRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
const rootEl = rootRef.current;
if (!rootEl) return;
const root: HTMLElement = rootEl;
type Pt = [number, number];
type RGB = [number, number, number];
// 판 좌표 — 캔버스 안은 늘 480×300. 화면에 보이는 크기와 상관없이 계산은 이 좌표로 한다
const W = 480;
const H = 300;
const TAU = Math.PI * 2;
function clamp(v: number, lo: number, hi: number): number { return v < lo ? lo : (v > hi ? hi : v); }
function lerp(a: number, b: number, k: number): number { return a + (b - a) * k; }
function smooth(x: number): number { const c = clamp(x, 0, 1); return c * c * (3 - 2 * c); }
// 각을 -π~π 로 접는다 — 두 방향의 차이를 잴 때 한 바퀴 넘어간 값을 되돌린다
function wrapAngle(a: number): number {
let r = a;
while (r > Math.PI) { r -= TAU; }
while (r < -Math.PI) { r += TAU; }
return r;
}
// 따라가기 비율 — 1 − e^(−rate·dt). 프레임 시간이 달라도 1초에 같은 만큼 다가간다
function follow(rate: number, dt: number): number { return 1 - Math.exp(-rate * dt); }
// 시드 고정 난수 — 같은 시드면 같은 흔들림·배치가 다시 나온다 (32비트 정수 섞기)
function makeRng(seed: number): () => number {
let s = seed >>> 0;
return function (): number {
s = (s + 0x6d2b79f5) >>> 0;
let t = s;
t = Math.imul(t ^ (t >>> 15), t | 1);
t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};
}
// 1차원 값 노이즈 — 정수 자리마다 시드로 정한 값(-1~1)을 두고 사이는 부드러운 보간. 흔들림·배회 방향에 쓴다
const NOISE_TABLE = new Float32Array(256);
const noiseRng = makeRng(480);
for (let i = 0; i < 256; i += 1) { NOISE_TABLE[i] = noiseRng() * 2 - 1; }
function smoothNoise(x: number): number {
const i = Math.floor(x);
const f = x - i;
const u = f * f * (3 - 2 * f);
return lerp(NOISE_TABLE[i & 255], NOISE_TABLE[(i + 1) & 255], u);
}
// 8자 길 — 가로로 한 번(sin θ), 세로로 두 번(sin 2θ) 흔들리는 점. 판 가운데를 지나는 두 고리를 period 초에 한 바퀴
function figureEight(t: number, ax: number, ay: number, period: number): Pt {
const a = TAU * t / period;
return [W / 2 + ax * Math.sin(a), H / 2 + ay * Math.sin(2 * a)];
}
// 마디 사슬 — xs[0], ys[0] 이 머리. 머리를 옮긴 뒤 부르면 뒤 마디마다 「앞 마디에서 지금 자기 쪽으로 향한 방향 × gap」 자리로 끌어온다.
// 간격만 지키므로 마디는 늘지도 줄지도 않고, 몸은 머리가 지나간 길을 대충 따라 눕는다.
// maxBend 가 π 보다 작으면 이웃 두 토막이 꺾이는 각을 ±maxBend(라디안)로 자른다 — π 이상(예: Math.PI)이면 각 한계 없음.
// backAngle 은 머리 뒤쪽 방향(머리 진행 방향 + π). 숫자면 첫 토막도 그 방향을 기준으로 자른다, NaN 이면 첫 토막은 자유
function followChain(xs: Float64Array, ys: Float64Array, gap: number, maxBend: number, backAngle: number): void {
const n = xs.length;
let prevAng = backAngle;
for (let i = 1; i < n; i += 1) {
let ang = Math.atan2(ys[i] - ys[i - 1], xs[i] - xs[i - 1]);
if (maxBend < Math.PI && !isNaN(prevAng)) {
const d = wrapAngle(ang - prevAng);
if (d > maxBend) { ang = prevAng + maxBend; } else if (d < -maxBend) { ang = prevAng - maxBend; }
}
xs[i] = xs[i - 1] + Math.cos(ang) * gap;
ys[i] = ys[i - 1] + Math.sin(ang) * gap;
prevAng = ang;
}
}
// 마디 i 에서 머리 쪽을 향한 방향(라디안) — 양 끝은 이웃 한 토막, 가운데는 앞뒤 마디를 이은 방향
function jointAngle(xs: Float64Array, ys: Float64Array, i: number): number {
const n = xs.length;
if (i <= 0) { return Math.atan2(ys[0] - ys[1], xs[0] - xs[1]); }
if (i >= n - 1) { return Math.atan2(ys[n - 2] - ys[n - 1], xs[n - 2] - xs[n - 1]); }
return Math.atan2(ys[i - 1] - ys[i + 1], xs[i - 1] - xs[i + 1]);
}
// 이웃 두 토막 사이 꺾인 각(라디안, 부호 있음) — 마디 i 앞 토막과 뒤 토막의 방향 차
function bendAt(xs: Float64Array, ys: Float64Array, i: number): number {
const a = Math.atan2(ys[i] - ys[i - 1], xs[i] - xs[i - 1]);
const b = Math.atan2(ys[i + 1] - ys[i], xs[i + 1] - xs[i]);
return wrapAngle(b - a);
}
// 몸 윤곽 — 마디마다 방향의 법선(직각) 쪽으로 radii[i] 만큼 좌우로 민 점을 잇는다.
// 순서: 머리 왼쪽 → 왼쪽 옆구리를 따라 꼬리 → 꼬리 끝 → 오른쪽 옆구리를 따라 머리 → 머리 앞쪽 반원(HEAD_CAP_STEPS 조각). 닫힌 다각형, 점마다 x 와 y 를 차례로 넣은 한 줄 배열
const HEAD_CAP_STEPS = 6;
function bodyOutline(xs: Float64Array, ys: Float64Array, radii: Float64Array): number[] {
const n = xs.length;
const pts: number[] = [];
for (let i = 0; i < n; i += 1) {
const a = jointAngle(xs, ys, i) + Math.PI / 2;
pts.push(xs[i] + Math.cos(a) * radii[i], ys[i] + Math.sin(a) * radii[i]);
}
const tailA = jointAngle(xs, ys, n - 1) + Math.PI;
pts.push(xs[n - 1] + Math.cos(tailA) * radii[n - 1], ys[n - 1] + Math.sin(tailA) * radii[n - 1]);
for (let i = n - 1; i >= 0; i -= 1) {
const a = jointAngle(xs, ys, i) - Math.PI / 2;
pts.push(xs[i] + Math.cos(a) * radii[i], ys[i] + Math.sin(a) * radii[i]);
}
const a0 = jointAngle(xs, ys, 0);
for (let k = 1; k < HEAD_CAP_STEPS; k += 1) {
const a = a0 - Math.PI / 2 + Math.PI * k / HEAD_CAP_STEPS;
pts.push(xs[0] + Math.cos(a) * radii[0], ys[0] + Math.sin(a) * radii[0]);
}
return pts;
}
// 몸이 스스로 겹친 정도 — 사슬에서 3칸 이상 떨어진 두 마디가 두 반지름 합보다 가까운 쌍의 수와 가장 가까운 거리
function selfOverlap(xs: Float64Array, ys: Float64Array, radii: Float64Array): [number, number] {
const n = xs.length;
let count = 0;
let nearest = Infinity;
for (let i = 0; i < n; i += 1) {
for (let j = i + 3; j < n; j += 1) {
const d = Math.hypot(xs[i] - xs[j], ys[i] - ys[j]);
if (d < nearest) { nearest = d; }
if (d < radii[i] + radii[j]) { count += 1; }
}
}
return [count, nearest];
}
// 파스텔 팔레트 — 크림·옅은 민트 바탕 위에 파스텔 생물, 윤곽선과 그림자는 진한 잉크색으로 명도 차를 둔다
const PAPER: RGB = [251, 247, 238];
const PAPER_LOW: RGB = [222, 242, 234];
const INK: RGB = [58, 50, 74];
const CREAM: RGB = [255, 251, 242];
const CORAL: RGB = [244, 162, 144];
const LAVENDER: RGB = [188, 170, 236];
const BUTTER: RGB = [246, 222, 140];
const SAGE: RGB = [156, 204, 164];
const PINK: RGB = [244, 176, 200];
const SKY: RGB = [156, 204, 236];
function rgba(c: RGB, a: number): string {
return 'rgba(' + Math.round(clamp(c[0], 0, 255)) + ',' + Math.round(clamp(c[1], 0, 255)) + ',' + Math.round(clamp(c[2], 0, 255)) + ',' + clamp(a, 0, 1).toFixed(3) + ')';
}
function shade(c: RGB, k: number): RGB { return [c[0] * k, c[1] * k, c[2] * k]; }
const canvasEl = root.querySelector('[data-role="canvas"]') as HTMLCanvasElement | null;
const pauseEl = root.querySelector('[data-role="pause"]') as HTMLButtonElement | null;
const ctxRaw = canvasEl ? canvasEl.getContext('2d') : null;
if (!canvasEl || !ctxRaw || !pauseEl) { return; }
const cv: HTMLCanvasElement = canvasEl;
const ctx: CanvasRenderingContext2D = ctxRaw;
const pauseBtn: HTMLButtonElement = pauseEl;
// 목표점(판 좌표)과 그 속도(px/초) — 8자 길 또는 포인터. 그리기에서 눈동자 방향·목표 표시에 쓴다
let tx = W / 2;
let ty = H / 2;
let tvx = 0;
let tvy = 0;
function fitCanvas(): void {
// 배율은 2 에서 자른다 — 배율 3 기기에서 화소가 2.25배로 늘어 프레임마다 일이 그만큼 커지지 않게
const dpr = Math.min(window.devicePixelRatio || 1, 2);
cv.width = Math.round(W * dpr);
cv.height = Math.round(H * dpr);
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
function clearStage(top: RGB, bottom: RGB): void {
const g = ctx.createLinearGradient(0, 0, 0, H);
g.addColorStop(0, rgba(top, 1));
g.addColorStop(1, rgba(bottom, 1));
ctx.fillStyle = g;
ctx.fillRect(0, 0, W, H);
}
// 점들을 지나는 매끈한 닫힌 곡선 — 이웃 두 점의 가운데를 잇고 점 자체는 2차 곡선의 조절점으로 쓴다
function smoothClosed(pts: number[]): void {
const n = pts.length / 2;
ctx.beginPath();
ctx.moveTo((pts[2 * (n - 1)] + pts[0]) / 2, (pts[2 * (n - 1) + 1] + pts[1]) / 2);
for (let i = 0; i < n; i += 1) {
const j = (i + 1) % n;
ctx.quadraticCurveTo(pts[2 * i], pts[2 * i + 1], (pts[2 * i] + pts[2 * j]) / 2, (pts[2 * i + 1] + pts[2 * j + 1]) / 2);
}
ctx.closePath();
}
function fillShape(pts: number[], fill: RGB, line: number): void {
smoothClosed(pts);
ctx.fillStyle = rgba(fill, 1);
ctx.fill();
if (line > 0) {
ctx.lineWidth = line;
ctx.lineJoin = 'round';
ctx.strokeStyle = rgba(INK, 1);
ctx.stroke();
}
}
// 바닥 그림자 — 같은 윤곽을 (ox, oy) 만큼 밀어 옅은 잉크색으로
function dropShadow(pts: number[], ox: number, oy: number, alpha: number): void {
ctx.save();
ctx.translate(ox, oy);
smoothClosed(pts);
ctx.fillStyle = rgba(INK, alpha);
ctx.fill();
ctx.restore();
}
// 눈 — 흰자 위 눈동자를 (lookX, lookY) 쪽으로 반지름의 0.4 만큼 민다. open 0~1 은 위 눈꺼풀이 덮는 정도의 반대
function drawEye(x: number, y: number, r: number, lookX: number, lookY: number, open: number): void {
const a = Math.atan2(lookY - y, lookX - x);
ctx.beginPath();
ctx.arc(x, y, r, 0, TAU);
ctx.fillStyle = rgba(CREAM, 1);
ctx.fill();
ctx.lineWidth = 1.5;
ctx.strokeStyle = rgba(INK, 1);
ctx.stroke();
ctx.beginPath();
ctx.arc(x + Math.cos(a) * r * 0.4, y + Math.sin(a) * r * 0.4, r * 0.55, 0, TAU);
ctx.fillStyle = rgba(INK, 1);
ctx.fill();
if (open < 1) {
ctx.save();
ctx.beginPath();
ctx.arc(x, y, r + 0.5, 0, TAU);
ctx.clip();
ctx.fillStyle = rgba(INK, 0.85);
ctx.fillRect(x - r - 1, y - r - 1, 2 * r + 2, (2 * r + 2) * (1 - open));
ctx.restore();
}
}
// 목표 표시 — 잉크색 고리와 점. 생물이 무엇을 쫓는지 보이게
function drawTarget(x: number, y: number): void {
// 동작 줄이기의 쉬는 자세에서는 포인터가 올라왔을 때만 보인다
if (still && !ptrOn) { return; }
ctx.beginPath();
ctx.arc(x, y, 7, 0, TAU);
ctx.lineWidth = 2;
ctx.strokeStyle = rgba(INK, 0.55);
ctx.stroke();
ctx.beginPath();
ctx.arc(x, y, 2.5, 0, TAU);
ctx.fillStyle = rgba(INK, 0.7);
ctx.fill();
}
// 08 반려 생물 — 상태 셋을 오간다: 0 배회(목표가 멈춤) · 1 따라가기(목표가 움직임) · 2 놀라 달아나기(목표가 너무 빠르고 가까움)
const WANDER = 0;
const FOLLOW = 1;
const STARTLE = 2;
const PET_RADIUS = 28;
// 따라가기 — 원하는 속도 = MAX_SPEED × clamp((거리 − STOP_DIST) / ARRIVE_RADIUS, 0, 1). 가까워질수록 느려지다 STOP_DIST 에서 선다
const MAX_SPEED = 170;
const ARRIVE_RADIUS = 110;
const STOP_DIST = 46;
// 방향 바꾸기 — 지금 속도를 원하는 속도 쪽으로 따라가기 비율 STEER(1/초)로. 달아날 때는 FLEE_STEER
const STEER = 4;
const FLEE_STEER = 9;
// 배회 — 1초에 WANDER_TURN × 노이즈(−1~1) 라디안씩 방향을 틀며 WANDER_SPEED(px/초)로 걷는다
const WANDER_SPEED = 45;
const WANDER_TURN = 2.2;
// 놀람 — 목표 속도가 STARTLE_SPEED(px/초)를 넘고 거리가 STARTLE_RADIUS 안이면 FLEE_SPEED 로 반대쪽으로 달아나 CALM_TIME 초 뒤 진정
const STARTLE_SPEED = 420;
const STARTLE_RADIUS = 160;
const FLEE_SPEED = 260;
const CALM_TIME = 1.1;
const FLEE_MARGIN = 110;
// 목표가 움직인다고 보는 속도(px/초)와, 멈춘 뒤 배회로 바뀌기까지의 시간(초)
const MOVE_SPEED = 25;
const IDLE_DELAY = 0.6;
// 목표 일정(9초 한 바퀴) — [끝 시각(초), 8자 길 위 빠르기 배수]. 0 이면 멈춤, 4.5 면 쏜살같이
const TARGET_PLAN: number[] = [1.6, 0, 4.4, 1, 5.0, 4.5, 7.4, 1, 9, 0];
const PLAN_LENGTH = 9;
const PREWARM = 3.4;
// 일정을 적분해 8자 길 위 자리(길 시계, 초)를 구한다 — 빠르기 배수 × 지난 시간의 합
function planClock(t: number): number {
const loops = Math.floor(t / PLAN_LENGTH);
const local = t - loops * PLAN_LENGTH;
let perLoop = 0;
let acc = 0;
let start = 0;
for (let i = 0; i < TARGET_PLAN.length; i += 2) {
const end = TARGET_PLAN[i];
const rate = TARGET_PLAN[i + 1];
perLoop += (end - start) * rate;
if (local > start) { acc += (Math.min(local, end) - start) * rate; }
start = end;
}
return loops * perLoop + acc;
}
function pathAt(t: number): Pt { return figureEight(planClock(t), 165, 90, 8); }
let pet = { x: W / 2, y: H / 2, vx: 0, vy: 0, wanderAng: 0, state: WANDER, calm: 0, idle: 0, clock: 0 };
// 꼬리 — 몸 뒤에 붙은 짧은 사슬(각 한계 0.5)
const TAIL_JOINTS = 8;
const petTailX = new Float64Array(TAIL_JOINTS);
const petTailY = new Float64Array(TAIL_JOINTS);
function reset(): void {
const p = pathAt(0);
pet = { x: p[0] - 70, y: p[1] + 20, vx: 0, vy: 0, wanderAng: 0, state: WANDER, calm: 0, idle: 0, clock: 0 };
for (let i = 0; i < TAIL_JOINTS; i += 1) {
petTailX[i] = pet.x - PET_RADIUS * 0.8 - i * 8;
petTailY[i] = pet.y;
}
}
function update(dt: number, tx: number, ty: number, tvx: number, tvy: number): void {
pet.clock += dt;
const dx = tx - pet.x;
const dy = ty - pet.y;
const dist = Math.hypot(dx, dy) || 1;
const targetSpeed = Math.hypot(tvx, tvy);
if (pet.state !== STARTLE && targetSpeed > STARTLE_SPEED && dist < STARTLE_RADIUS) {
pet.state = STARTLE;
pet.calm = CALM_TIME;
}
let wantX = 0;
let wantY = 0;
let steer = STEER;
if (pet.state === STARTLE) {
// 달아날 방향 = 목표 반대쪽. 판 가장자리 FLEE_MARGIN(px) 안이면 가운데 쪽을 섞어 벽에 붙지 않게
let fa = Math.atan2(-dy, -dx);
const edge = Math.min(pet.x, W - pet.x, pet.y, H - pet.y);
if (edge < FLEE_MARGIN) {
const home = Math.atan2(H / 2 - pet.y, W / 2 - pet.x);
fa += wrapAngle(home - fa) * (1 - edge / FLEE_MARGIN);
}
wantX = Math.cos(fa) * FLEE_SPEED;
wantY = Math.sin(fa) * FLEE_SPEED;
steer = FLEE_STEER;
pet.calm -= dt;
if (pet.calm <= 0) { pet.state = targetSpeed > MOVE_SPEED ? FOLLOW : WANDER; }
} else {
pet.idle = targetSpeed > MOVE_SPEED ? 0 : pet.idle + dt;
pet.state = pet.idle > IDLE_DELAY ? WANDER : FOLLOW;
if (pet.state === FOLLOW) {
const sp = MAX_SPEED * clamp((dist - STOP_DIST) / ARRIVE_RADIUS, 0, 1);
wantX = dx / dist * sp;
wantY = dy / dist * sp;
} else {
pet.wanderAng += smoothNoise(pet.clock * 0.7) * WANDER_TURN * dt;
// 판 가장자리에 가까우면 가운데 쪽으로 방향을 끈다
const edge = Math.min(pet.x, W - pet.x, pet.y, H - pet.y);
if (edge < 70) {
const home = Math.atan2(H / 2 - pet.y, W / 2 - pet.x);
pet.wanderAng += wrapAngle(home - pet.wanderAng) * follow(3, dt);
}
wantX = Math.cos(pet.wanderAng) * WANDER_SPEED;
wantY = Math.sin(pet.wanderAng) * WANDER_SPEED;
}
}
const k = follow(steer, dt);
pet.vx = lerp(pet.vx, wantX, k);
pet.vy = lerp(pet.vy, wantY, k);
pet.x = clamp(pet.x + pet.vx * dt, PET_RADIUS * 1.6, W - PET_RADIUS * 1.6);
pet.y = clamp(pet.y + pet.vy * dt, PET_RADIUS * 1.8, H - PET_RADIUS * 1.4);
if (Math.hypot(pet.vx, pet.vy) > 8 && pet.state !== WANDER) {
pet.wanderAng = Math.atan2(pet.vy, pet.vx);
}
// 꼬리 뿌리 = 몸 뒤(속도 반대쪽) 가장자리
const back = Math.hypot(pet.vx, pet.vy) > 2 ? Math.atan2(-pet.vy, -pet.vx) : Math.atan2(petTailY[1] - pet.y, petTailX[1] - pet.x);
petTailX[0] = pet.x + Math.cos(back) * PET_RADIUS * 0.8;
petTailY[0] = pet.y + Math.sin(back) * PET_RADIUS * 0.8;
followChain(petTailX, petTailY, 8, 0.5, back);
}
function restPose(): void {
pet = { x: W / 2, y: H / 2 + 10, vx: 0, vy: 0, wanderAng: 0, state: WANDER, calm: 0, idle: 0, clock: 0 };
for (let i = 0; i < TAIL_JOINTS; i += 1) {
petTailX[i] = pet.x - PET_RADIUS * 0.8 - i * 8;
petTailY[i] = pet.y - Math.sin(i / (TAIL_JOINTS - 1) * Math.PI) * 10;
}
}
// 상태 줄 글자 — 상태 번호 순서(배회 · 따라가기 · 놀람)
const STATUS_TEXT: string[] = ['배회 중', '따라가는 중', '놀라서 달아나는 중'];
const statusEl = root.querySelector('[data-role="status"]');
let shownState = -1;
function draw(): void {
clearStage(PAPER, PAPER_LOW);
const speed = Math.hypot(pet.vx, pet.vy);
const ang = speed > 2 ? Math.atan2(pet.vy, pet.vx) : 0;
// 늘이기·누르기 — 빠를수록 진행 방향으로 길어지고 옆으로 얇아진다(넓이는 그대로)
const stretch = 1 + Math.min(speed / 600, 0.32);
const squash = 1 / Math.sqrt(stretch);
ctx.beginPath();
ctx.ellipse(pet.x + 4, pet.y + PET_RADIUS * 0.9, PET_RADIUS * 1.05, 7, 0, 0, TAU);
ctx.fillStyle = rgba(INK, 0.13);
ctx.fill();
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
for (let pass = 0; pass < 2; pass += 1) {
ctx.beginPath();
ctx.moveTo(petTailX[0], petTailY[0]);
for (let i = 1; i < TAIL_JOINTS; i += 1) { ctx.lineTo(petTailX[i], petTailY[i]); }
ctx.lineWidth = pass === 0 ? 10 : 6;
ctx.strokeStyle = pass === 0 ? rgba(INK, 1) : rgba(BUTTER, 1);
ctx.stroke();
}
ctx.save();
ctx.translate(pet.x, pet.y);
ctx.rotate(ang);
ctx.scale(stretch, squash);
ctx.rotate(-ang);
// 귀 — 머리 위 두 개의 둥근 삼각형
for (let s = -1; s <= 1; s += 2) {
ctx.beginPath();
ctx.moveTo(s * 8, -PET_RADIUS * 0.8);
ctx.lineTo(s * 22, -PET_RADIUS * 1.35);
ctx.lineTo(s * 25, -PET_RADIUS * 0.45);
ctx.closePath();
ctx.fillStyle = rgba(BUTTER, 1);
ctx.fill();
ctx.lineWidth = 2.5;
ctx.strokeStyle = rgba(INK, 1);
ctx.stroke();
}
ctx.beginPath();
ctx.arc(0, 0, PET_RADIUS, 0, TAU);
ctx.fillStyle = rgba(BUTTER, 1);
ctx.fill();
ctx.lineWidth = 2.5;
ctx.strokeStyle = rgba(INK, 1);
ctx.stroke();
ctx.fillStyle = rgba(CORAL, 0.75);
for (let s = -1; s <= 1; s += 2) {
ctx.beginPath();
ctx.ellipse(s * 15, 9, 6, 4, 0, 0, TAU);
ctx.fill();
}
ctx.restore();
// 눈 — 배회 중엔 반쯤 감고, 놀라면 크게 뜬다. 눈동자는 늘 목표 쪽
const open = pet.state === WANDER ? 0.5 : 1;
const er = pet.state === STARTLE ? 8 : 6;
for (let s = -1; s <= 1; s += 2) {
drawEye(pet.x + s * 10, pet.y - 5, er, tx, ty, open);
}
if (pet.state === STARTLE) {
// 놀람 표시 — 머리 위 느낌표, 남은 진정 시간만큼 위로 떠 있다
const lift = 10 + 14 * clamp(pet.calm / CALM_TIME, 0, 1);
ctx.fillStyle = rgba(INK, 1);
ctx.fillRect(pet.x - 2.5, pet.y - PET_RADIUS - lift - 18, 5, 13);
ctx.beginPath();
ctx.arc(pet.x, pet.y - PET_RADIUS - lift, 3, 0, TAU);
ctx.fill();
}
drawTarget(tx, ty);
if (statusEl && shownState !== pet.state) {
shownState = pet.state;
statusEl.textContent = STATUS_TEXT[pet.state];
}
}
// 한 프레임에 넘기는 시간 상한(초) — 탭을 오래 숨겼다 돌아온 첫 프레임에도 50ms 까지만 계산에 넣는다
const DT_MAX = 0.05;
// 미리 돌리기 — 첫 장면을 그리기 전에 PREWARM 초를 1/60초 걸음으로 계산해 생물이 길 위에 자리 잡은 채 시작한다
const PREWARM_STEP = 1 / 60;
// 시연 시계(초) — 8자 길 위의 자리를 정한다
let simTime = 0;
// 포인터(판 좌표) — 판 위에 있으면 목표를 포인터 쪽으로 옮긴다. 떠나면 다시 8자 길로 서서히 돌아간다
let ptrX = W / 2;
let ptrY = H / 2;
let ptrOn = false;
let ptrBlend = 0;
let paused = false;
const reduceQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
// 페이지를 연 채 동작 줄이기 설정을 바꿔도 change 리스너가 이 값을 다시 읽는다
let still = reduceQuery.matches;
// 자동 시연 중인가 — 사람이 처음 손대면 시연 표시를 떼고 알림 줄을 polite 로 켠다
let demo = root.classList.contains('is-demo');
// 리스너는 한 묶음으로 달고 정리할 때 한 번에 뗀다
const off = new AbortController();
function wake(): void {
if (!demo) { return; }
demo = false;
root.classList.remove('is-demo');
const live = root.querySelector('[aria-live]');
if (live) { live.setAttribute('aria-live', 'polite'); }
}
// 목표 옮기기 — 8자 길 자리와 포인터 자리를 ptrBlend 비율로 섞고, 그 변화로 목표 속도를 잰다
function moveTarget(dt: number): void {
const p = pathAt(simTime);
ptrBlend = lerp(ptrBlend, ptrOn ? 1 : 0, follow(4, dt));
const nx = lerp(p[0], ptrX, ptrBlend);
const ny = lerp(p[1], ptrY, ptrBlend);
if (dt > 0) {
tvx = lerp(tvx, (nx - tx) / dt, follow(12, dt));
tvy = lerp(tvy, (ny - ty) / dt, follow(12, dt));
}
tx = nx;
ty = ny;
}
function advance(dt: number): void {
simTime += dt;
moveTarget(dt);
update(dt, tx, ty, tvx, tvy);
}
let rafId = 0;
let lastTs = -1;
function frame(ts: number): void {
if (still || paused) { rafId = 0; return; }
if (lastTs < 0) { lastTs = ts; }
const dt = Math.min((ts - lastTs) / 1000, DT_MAX);
lastTs = ts;
if (dt > 0) { advance(dt); }
draw();
rafId = window.requestAnimationFrame(frame);
}
function startLoop(): void {
if (rafId) { return; }
// 시계 다시 맞추기 — 멈췄던 사이의 시간을 첫 프레임 dt 로 넘기지 않는다
lastTs = -1;
rafId = window.requestAnimationFrame(frame);
}
function stopLoop(): void {
if (rafId) { window.cancelAnimationFrame(rafId); rafId = 0; }
}
// 동작 줄이기 — 루프를 돌리지 않고 쉬는 자세 한 장면만 그린다
function showRest(): void {
stopLoop();
reset();
restPose();
draw();
}
function play(): void {
reset();
simTime = 0;
const p = pathAt(0);
tx = p[0];
ty = p[1];
tvx = 0;
tvy = 0;
for (let t = 0; t < PREWARM; t += PREWARM_STEP) { advance(PREWARM_STEP); }
draw();
if (!paused) { startLoop(); }
}
function setPointer(ev: PointerEvent): void {
const r = cv.getBoundingClientRect();
ptrX = (ev.clientX - r.left) * W / Math.max(1, r.width);
ptrY = (ev.clientY - r.top) * H / Math.max(1, r.height);
ptrOn = true;
wake();
// 동작 줄이기에서도 입력은 화면에 남는다 — 쉬는 자세 그대로 눈과 목표 표시만 포인터 쪽으로 다시 그린다
if (still) {
tx = ptrX;
ty = ptrY;
draw();
}
}
cv.addEventListener('pointermove', setPointer, { signal: off.signal });
cv.addEventListener('pointerdown', setPointer, { signal: off.signal });
function leavePointer(): void { ptrOn = false; }
cv.addEventListener('pointerleave', leavePointer, { signal: off.signal });
cv.addEventListener('pointercancel', leavePointer, { signal: off.signal });
pauseBtn.addEventListener('click', function (): void {
paused = !paused;
pauseBtn.setAttribute('aria-pressed', paused ? 'true' : 'false');
wake();
if (paused) { stopLoop(); } else if (!still) { startLoop(); }
}, { signal: off.signal });
// 탭이 숨으면 루프를 멈추고, 돌아오면 시계를 다시 맞춰 시작한다 — 숨은 동안의 몇 초가 한 프레임에 몰리지 않게
document.addEventListener('visibilitychange', function (): void {
if (document.hidden) { stopLoop(); } else if (!paused && !still) { startLoop(); }
}, { signal: off.signal });
// 설정이 페이지를 연 채 바뀌면 — 켜지면 쉬는 자세로 멈추고, 꺼지면 시연을 처음부터
reduceQuery.addEventListener('change', function (): void {
still = reduceQuery.matches;
if (still) { showRest(); } else { play(); }
}, { signal: off.signal });
window.addEventListener('resize', function (): void {
fitCanvas();
draw();
}, { signal: off.signal });
fitCanvas();
if (still) { showRest(); } else { play(); }
return function (): void {
stopLoop();
off.abort();
};
}, []);
return (
<div className={cx("cf") + " is-demo"} ref={rootRef}>
<canvas className={cx("cf__canvas")} data-role="canvas" width={480} height={300} role="img" aria-label="목표점이 멈추면 배회하고 움직이면 따라오다가 너무 빠르면 놀라 달아나는 둥근 반려 생물."></canvas>
<p className={cx("cf__status")} data-role="status" aria-live="off">{'배회 중'}</p>
<button className={cx("cf__pause")} data-role="pause" type="button" aria-pressed="false">{'일시정지'}</button>
</div>
);
}08 A Pet Creature That Wanders, Tags Along and Startles Away — Measured area 14.476% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · Cursor Follow Animation: 9 Procedural Creatures
The post this demo lives in
Cursor Follow Animation: 9 Procedural CreaturesIn a cursor follow animation, with no joint keyframed, how does a creature swim and walk after a target? 01 keeps only t See all demos in this post
If you like this effect - similar demos
Interactions06 Dice That Leave Roll Marks and Dust on the FloorDice Roll Animation: 9 Scenes with Top-Face Math
Interactions05 A Popover That Follows by Inertia and Resists Like Rubber at the EdgeCSS Popover: 9 Ways to Anchor, Flip and Spring
Interactions02 A Parabolic Rocket That Peaks Exactly at the Clicked Height and Bursts ThereCSS Fireworks: 9 Bursts, Trails and Reflections