b5246b1f7f
Gaze magnitude now comes from the angle to the pointer rather than a linear distance ramp: gain = distance / hypot(distance, depth) That is the projection of an eyeball rotating to face a target `depth` away, so it saturates. Once the pointer passes the knee the eyes hold near-full deflection and keep pointing straight at it, which is what reads as being looked at. Measured angle error against the true cursor direction is 0 degrees. Default travel rises from 9 to 30 SVG units. The eye group is clipped to the head silhouette and the outer eye edge sits 48 units from it, so 30 stays clear while the slider can explore up to the clip. At the shipping 46px render this moves the pupils 4.5 screen px instead of 1.4. Extract the tracker into davebotGaze.ts and add davebot-gaze.html, a tuning lab with live controls for travel, depth, smoothing, convergence and lean. Settings persist, so the header reads whatever the lab last saved. Sliders are generated from the engine's own limits and read back its clamped values, so the panel cannot display a number the tracker is not using.
52 lines
1.7 KiB
HTML
52 lines
1.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="theme-color" content="#f6f6f6" />
|
|
<title>Davebot gaze lab - tune how hard he looks at the cursor</title>
|
|
</head>
|
|
<body>
|
|
<div class="shell">
|
|
<header>
|
|
<h1>Davebot gaze lab</h1>
|
|
<p>
|
|
Move the cursor anywhere on the page. Davebot's eyes point at it, and the settings on the
|
|
right change how hard he locks on. Values save as you drag, and the portfolio header reads
|
|
the same values, so tune here and reload that page to see it in place.
|
|
</p>
|
|
</header>
|
|
|
|
<div class="layout">
|
|
<main>
|
|
<section class="stage" id="stage" aria-label="Davebot at review size"></section>
|
|
<section class="scales" id="scales" aria-label="Davebot at shipping size"></section>
|
|
</main>
|
|
|
|
<aside class="panel">
|
|
<h2>Feel</h2>
|
|
<div class="presets" id="presets"></div>
|
|
<div id="controls"></div>
|
|
|
|
<div class="meter">
|
|
<div class="meter-head">
|
|
<span>Deflection</span>
|
|
<span id="deflection-value">0%</span>
|
|
</div>
|
|
<div class="bar" id="deflection-bar"></div>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button type="button" id="copy">Copy JSON</button>
|
|
<button type="button" id="reset">Reset</button>
|
|
</div>
|
|
<pre><code id="settings-json"></code></pre>
|
|
</aside>
|
|
</div>
|
|
|
|
<footer>Design System 01 · gaze tuning · values persist locally</footer>
|
|
</div>
|
|
<script type="module" src="/src/davebot-gaze-main.ts"></script>
|
|
</body>
|
|
</html>
|