creatures/pose-inspect.html

51 lines · in natura-src-1.0.0.zip as natura/creatures/pose-inspect.html · creature bench: every species across a set of poses

<!doctype html><html><head><meta charset="utf-8"><title>creature pose inspector</title>
<!-- A factory inspection harness: renders the whole quadruped roster across a set of poses at high
     detail, so a coat/tail/gait change can be eyeballed in a controlled frame (not a chaotic sim).
     Open directly (file://) from this dir so the relative creatures/ script paths resolve, or point
     a headless renderer at it. Add a species to SPECIES.js and it shows up here automatically. -->
<style>
  body{margin:0;background:#8a9a6f;font:12px/1.4 sans-serif;color:#20301a}
  #wrap{padding:8px}
  canvas{display:block;background:#8a9a6f}
  h1{font-size:14px;margin:6px 8px}
</style></head><body>
<div id="wrap">
  <h1>creature pose inspector &mdash; each row a species, each column a pose</h1>
  <canvas id="c"></canvas>
</div>
<script src="species.js"></script>
<script src="render.js"></script>
<script src="behaviour.js"></script>
<script src="creatures.js"></script>
<script>
const GAL = Creatures.GALLOP;
const CLK = parseFloat(new URLSearchParams(location.search).get('t'))||0;   // ?t=<sec> drives the pant-tongue quiver so it can be judged in a static frame
// the poses to sweep. gait:null -> the species' own default walk gait.
const POSES = [
  {name:'stand',  pose:{stand:1, lod:1}},
  {name:'alert',  pose:{stand:1, neck:-0.45, ear:0.7, earTurn:0.5, lod:1}},   // ears + WHISKERS forward, head up -- judges the alertness response
  {name:'graze',  pose:{stand:0.2, neck:-0.9, lod:1}},
  {name:'walk',   pose:{stand:0, lod:1}, phase:0.3},
  {name:'gallop', pose:{gait:GAL, stand:0, lod:1}, phase:0.15},
  {name:'pant',   pose:{stand:1, neck:-0.15, ear:0.15, pant:1, clock:CLK, lod:1}},   // blown after a run: mouth open, tongue lolling (canid/feline); ?t= drives the quiver
  {name:'periscope', pose:{siteat:1, stand:1, clock:CLK, lod:1}},   // reared upright -- the squirrel's sit-to-eat + the OTTER's look-around periscope (siteat-gated forms)
];
const SPECIES = Object.keys(Creatures.SPECIES);   // every quadruped, in table order
const COLW = 300, ROWH = 190, PAD = 40, SCALE = 1.9;
const c = document.getElementById('c');
c.width = PAD + COLW*POSES.length; c.height = 30 + ROWH*SPECIES.length;
const g = c.getContext('2d');
g.fillStyle='#8a9a6f'; g.fillRect(0,0,c.width,c.height);
g.fillStyle='#20301a'; g.font='12px sans-serif';
POSES.forEach((p,i)=> g.fillText(p.name, PAD + i*COLW + COLW*0.4, 20));
SPECIES.forEach((sp,r)=>{
  const cy = 30 + r*ROWH + ROWH*0.62;
  g.save(); g.font='bold 12px sans-serif'; g.fillText(sp, 6, cy-ROWH*0.2); g.restore();
  POSES.forEach((p,i)=>{
    const cx = PAD + i*COLW + COLW*0.5;
    // a bushy-tailed predator can't flag; a gallop pose still exercises its gait
    Creatures.draw(g, sp, cx, cy, 1, p.phase!=null?p.phase:0, SCALE, p.pose);
  });
});
</script>
</body></html>