Run Detail

completedhy4-preview

Unscored

Every model's answer from this round

Recorded for these videos

17:31

Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)

Sep 2, 2026 · YouTube

19:45

Fable 5.1 writes an animated novel using Ren'Py... did it do better than Sol Pro 5.6?

Sep 1, 2026 · YouTube

14:09

Testing IBM Granite-4.2-8B! Can it name 100 women?

Aug 31, 2026 · YouTube

17:37

Tencent Hy4 Preview Tested: Is It Really Better Than Kimi K3 and GLM 5.3?

Aug 28, 2026 · YouTube

23:58

Qwen 3.8 Flash Tested: UI, Coding, Physics & more - compared to Opus 5, Sol Pro, Grok

Aug 27, 2026 · YouTube

14:50

Stealth Ox Alpha: a new GLM model! Full test (coding & writing) against Grok, Gemini, GPT & others

Aug 21, 2026 · YouTube

21:23

Giving Qwen 3.8 27B another chance (+ GLM 5.2). Testing against GPT, Gemini, Grok etc.

Aug 18, 2026 · YouTube

51:00

AI Coding Showdown: Grok 4.6, Gemini 3.7, Terra-Pro, Qwen3.8 2.4TB, Muse Glimmer & more

Aug 15, 2026 · YouTube

27:51

Testing Gemini 3.7 Flash: Translation, Vision, and Coding Challenges

Aug 14, 2026 · YouTube

Provider

openrouter

Challenge Version

v2.0

Turns

Duration

548.6s

Total Tokens

35,098

Input Tokens

1,267

Output Tokens

33,831

Reasoning Tokens

27,182

Reasoning Effort

default

Est. Cost

$0.0857

Started

8/28/2026, 12:56:55 PM

OR Provider

Tencent

Finish Reason

stop

Generation ID

gen-1787921815-cKfps59yf1zxVcx2yNlC

Turns (1)

Turn #1

1,267 in33,831 out27,182 reasoning35,098 total548.5s

user

You illustrate for a museum of arms and armour. Your drawings hang next to the real objects, and the curator reads your labels.

Build me the armoury slider: one HTML page, one figure, three eras.

The exhibit

A single standing figure. Below it, a slider. Drag the slider and the same figure is re-equipped for the era it lands on.

That is the exhibit. It lives or dies on the drawing, so draw properly.

The three eras

You choose all three yourself, and the choosing is part of the work. Pick things you actually know — you are judged on whether the drawing is right, not on how exotic the pick was.

1. Anywhere in the last five hundred years. Any year from 1526 onwards, anywhere on earth. Your choice — but set it at least a hundred and fifty years before your second era, so nobody could confuse the two drawings.

2. About a hundred years ago. A specific year between 1910 and 1945, and a specific place. Yours to pick.

3. Sometime between 2040 and 2140. Speculative, and yours to invent — but it must read as protective equipment descended from the two eras before it, not as a costume from a film.

Name the year and the place for all three. "Seventeenth-century Europe" is not an era; 1631, Saxony is.

The hard requirements

1. One body. It is the same person all three times. Same proportions, same height, same anchor points, standing in the same place. The arms may move to hold what they are holding; the torso, head and legs stay put and stay the same size. Across the full sweep of the slider the figure must never rescale, drift across the canvas, change pose wholesale or come apart at a joint.

This is an architectural requirement, not a styling note. Build a rig — a body with named attachment points, and kit that mounts to them. Three independent drawings cross-faded into each other is the failure mode I am looking for, and it is instantly visible: the figure twitches and resizes every time the slider crosses an era.

2. Continuity and reversibility. Dragging must never make the figure jump. Between two eras there is a transition, not a cut. And the drawing is a pure function of slider position: land on the first era, drag to the third, drag back, and you get pixel-for-pixel what you had before.

Your three choices are made once, by you, while you write the file. Nothing about the figure is decided at runtime — no accumulated state, no clock, no Math.random anywhere.

3. The label. Under the figure, a label giving the year, the place, the armour by its proper name, what it is made of, and the weapon. Between eras, the label says what it is between.

The label must describe the figure actually drawn above it. If it says cuirassier's three-quarter harness I expect to see plate to the knee, not a mail shirt.

4. The weapon is dated as tightly as the armour. It is not a prop. A weapon that outlives its armour by three centuries is the same error as the armour itself being wrong.

5. No horned Viking helmets. They never existed — nineteenth-century opera costume, not archaeology. Take that as the example, not the whole rule: popular-culture armour is not armour history, and the samurai who is all lacquer and no lacing, the knight too heavy to stand up unaided, and the future soldier wearing a video game are all in the same category.

House rules

One file. Everything inline — no CDN, no external stylesheet, font, script or image. data: URIs are fine.
Inline SVG for the figure. Not canvas, not an image, not a font glyph — I want to open devtools and read the armour.
No libraries. No 3D engine.
No network at runtime.
No localStorage, sessionStorage, cookies or indexedDB. It runs in a sandboxed frame where touching them throws.
No build step, no server. Opened as a local file, it works.
Return the file as exactly one fenced html block.

Answer in exactly these sections

The timeline

Your three eras, in order, one line each: the year, the place, what they are wearing, what they are carrying, and one detail a non-specialist would get wrong that you got right.

The rig

One paragraph. Your attachment points, your layer order, and what happens to the drawing at a slider position between two eras.

The file

The single fenced html block.

The weakest era

Which of your three is the shakiest historically, and why. Name the anachronism you were most tempted by. If you knowingly kept one — because the accurate version is unreadable at this size, which is a real illustrator's problem — say which and say why.

What I check

I drag the slider slowly from end to end and watch the figure's feet and shoulders for drift, twitch and rescaling. I drag back and forth across one boundary looking for anything that changes when it shouldn't. I read every label against its drawing. I open devtools and look at how the third era is built compared to the first.

That last one matters. Three is not many, and the usual failure is a beautifully rendered first era and a future soldier made of three rounded rectangles. The last era gets the same care as the first. I will drag straight to the end before I do anything else.

If you ran out of room and know it, say so in "The weakest era". A stated weakness is a finding. Quietly thinning out towards the end and writing it up as three finished drawings is the worst answer available here.

assistant

The timeline

1631, Saxony — a cuirassier's three-quarter harness of blackened steel over a buff coat, with a lobster-tailed pot helmet, carrying a wheellock pistol and a cavalry sword; a non-specialist would put him in full polished plate to the toe with a visored close helm, but in 1631 the plate stopped at the knee and the pot helmet was open-faced, not a full visor.

1916, Somme, France — a German sentry's Sappenpanzer trench armour (steel breastplate) over a field-grey uniform, with an M1916 Stahlhelm, carrying a Gewehr 98 bolt-action rifle; a non-specialist would give him a Pickelhaube spike and no body armour, but by 1916 the coal-scuttle Stahlhelm and the steel Sappenpanzer breastplate were already in use.

2112, Leipzig, European Federation — a Modular Composite Cuirass, System 2112 (graphene-reinforced boron carbide over aramid smart-fabric on a titanium exoskeleton frame) with a descended composite helm, carrying a Kinetic Coil Carbine M2109; a non-specialist would draw either skintight spandex or a sealed spacesuit with a fishbowl visor, but this is a rigid breastplate and helmet on a jointed frame, the direct descendant of the cuirass and the Sappenpanzer.

The rig

The body is one static SVG group: head at (200,140), neck, torso polygon, and legs with fixed hips at (180,380)/(220,380), knees at (175,570)/(225,570) and ankles at (170,740)/(230,740); it never moves, rescales or redraws. The only moving attachment points are the shoulders at (155,215) and (245,215); hand targets are interpolated between the three eras and solved by two-link inverse kinematics (upper and lower arm both 85 units) so the elbows and hands are computed, not drawn, and the arms sweep continuously. Layer order is: static body, then arm strokes, then suit/armour layers (helmet on the head, torso suit and torso armour over the torso, upper-arm covers rotated to the shoulder and upper-arm angle, lower-arm covers and gauntlets rotated to the elbow and hand, leg armour and boots on the fixed legs), then weapons mounted to the hands on top. Between two eras the slider value t interpolates the hand targets and computes the IK every frame, while the kit variants for the two adjacent eras are mounted to the same transformed attachment points and cross-fade in opacity (1-f and f); at integer t only one era's kit is fully opaque, so dragging back returns pixel-for-pixel to the same drawing with no accumulated state.

The file

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Armoury Slider</title>
<style>
  body { font-family: Georgia, serif; background:#f4f1ea; color:#222; margin:0; padding:20px; display:flex; flex-direction:column; align-items:center; }
  #stage { width:400px; height:800px; }
  #slider { width:400px; margin:20px 0; }
  #label { width:400px; min-height:130px; font-size:14px; line-height:1.45; text-align:center; border-top:1px solid #ccc; padding-top:10px; }
</style>
</head>
<body>
<svg id="stage" viewBox="0 0 400 800" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="760" x2="400" y2="760" stroke="#333" stroke-width="2"/>
  <g id="body">
    <ellipse cx="200" cy="140" rx="30" ry="36" fill="#e0ac69"/>
    <rect x="190" y="170" width="20" height="25" fill="#e0ac69"/>
    <path d="M150,200 L250,200 L240,260 L230,320 L235,380 L165,380 L170,320 L160,260 Z" fill="#e0ac69"/>
    <path d="M180,380 L175,570 L170,740" stroke="#e0ac69" stroke-width="26" fill="none" stroke-linecap="round"/>
    <path d="M220,380 L225,570 L230,740" stroke="#e0ac69" stroke-width="26" fill="none" stroke-linecap="round"/>
    <path d="M160,740 L195,740 L195,760 L145,760 Z" fill="#e0ac69"/>
    <path d="M205,740 L240,740 L255,760 L205,760 Z" fill="#e0ac69"/>
  </g>
  <g id="arms">
    <line id="leftUpper" stroke="#e0ac69" stroke-width="18" stroke-linecap="round"/>
    <line id="leftLower" stroke="#e0ac69" stroke-width="16" stroke-linecap="round"/>
    <line id="rightUpper" stroke="#e0ac69" stroke-width="18" stroke-linecap="round"/>
    <line id="rightLower" stroke="#e0ac69" stroke-width="16" stroke-linecap="round"/>
  </g>
  <g id="kit">
    <g class="era0" id="helm0" transform="translate(200,140)">
      <path d="M -30,-10 Q 0,-50 30,-10 L 30,10 L 20,25 L -20,25 L -30,10 Z" fill="#2b2b2b"/>
      <rect x="-15" y="-5" width="30" height="4" fill="#000"/>
      <path d="M -25,25 L 25,25 L 20,45 L -20,45 Z" fill="#2b2b2b"/>
    </g>
    <g class="era1" id="helm1" transform="translate(200,140)">
      <path d="M -30,0 C -30,-40 30,-40 30,0 L 38,20 L -38,20 Z" fill="#4a4a3a"/>
      <path d="M -20,15 L 20,15 L 15,30 L -15,30 Z" fill="#3a3a2a"/>
    </g>
    <g class="era2" id="helm2" transform="translate(200,140)">
      <path d="M -30,-5 C -30,-45 30,-45 30,-5 L 36,18 L -36,18 Z" fill="#3b4252"/>
      <path d="M -22,10 L 22,10 L 18,26 L -18,26 Z" fill="#88c0d0" opacity="0.8"/>
    </g>

    <path class="era0" d="M150,200 L250,200 L240,260 L230,320 L235,380 L165,380 L170,320 L160,260 Z" fill="#c19a6b"/>
    <path class="era0" d="M155,205 L245,205 L235,265 L225,325 L230,375 L170,375 L175,325 L165,265 Z" fill="#3a3a3a"/>
    <path class="era0" d="M170,375 L230,375 L235,395 L165,395 Z" fill="#333"/>
    <path class="era1" d="M150,200 L250,200 L240,260 L230,320 L235,380 L165,380 L170,320 L160,260 Z" fill="#4b5320"/>
    <path class="era1" d="M165,380 L235,380 L240,430 L160,430 Z" fill="#4b5320"/>
    <path class="era1" d="M165,220 L235,220 L230,300 L170,300 Z" fill="#5a5a5a"/>
    <path class="era1" d="M170,220 L230,220" stroke="#222" stroke-width="2"/>
    <path class="era2" d="M150,200 L250,200 L240,260 L230,320 L235,380 L165,380 L170,320 L160,260 Z" fill="#2e3440"/>
    <path class="era2" d="M165,380 L235,380 L240,430 L160,430 Z" fill="#2e3440"/>
    <path class="era2" d="M155,205 L245,205 L235,265 L225,325 L230,375 L170,375 L175,325 L165,265 Z" fill="#3b4252"/>
    <path class="era2" d="M170,375 L230,375 L235,395 L165,395 Z" fill="#434c5e"/>
    <path class="era2" d="M200,205 L200,375" stroke="#4c566a" stroke-width="2"/>

    <g class="era0" id="upArm0L"><path d="M0,-18 L40,-25 L75,-12 L75,12 L40,25 L0,18 Z" fill="#3a3a3a"/></g>
    <g class="era1" id="upArm1L"><path d="M0,-16 L40,-20 L80,-14 L80,14 L40,20 L0,16 Z" fill="#4b5320"/></g>
    <g class="era2" id="upArm2L"><path d="M0,-18 L40,-24 L78,-12 L78,12 L40,24 L0,18 Z" fill="#3b4252"/></g>
    <g class="era0" id="upArm0R"><path d="M0,-18 L40,-25 L75,-12 L75,12 L40,25 L0,18 Z" fill="#3a3a3a"/></g>
    <g class="era1" id="upArm1R"><path d="M0,-16 L40,-20 L80,-14 L80,14 L40,20 L0,16 Z" fill="#4b5320"/></g>
    <g class="era2" id="upArm2R"><path d="M0,-18 L40,-24 L78,-12 L78,12 L40,24 L0,18 Z" fill="#3b4252"/></g>

    <g class="era0" id="lowArm0L"><path d="M0,-14 L35,-18 L75,-10 L75,10 L35,18 L0,14 Z" fill="#3a3a3a"/></g>
    <g class="era1" id="lowArm1L"><path d="M0,-12 L35,-16 L80,-12 L80,12 L35,16 L0,12 Z" fill="#4b5320"/></g>
    <g class="era2" id="lowArm2L"><path d="M0,-14 L35,-18 L78,-10 L78,10 L35,18 L0,14 Z" fill="#3b4252"/></g>
    <g class="era0" id="lowArm0R"><path d="M0,-14 L35,-18 L75,-10 L75,10 L35,18 L0,14 Z" fill="#3a3a3a"/></g>
    <g class="era1" id="lowArm1R"><path d="M0,-12 L35,-16 L80,-12 L80,12 L35,16 L0,12 Z" fill="#4b5320"/></g>
    <g class="era2" id="lowArm2R"><path d="M0,-14 L35,-18 L78,-10 L78,10 L35,18 L0,14 Z" fill="#3b4252"/></g>

    <g class="era0" id="hand0L"><circle cx="0" cy="0" r="12" fill="#3a3a3a"/><path d="M-12,0 L-20,-6 L-20,6 Z" fill="#3a3a3a"/></g>
    <g class="era1" id="hand1L"><circle cx="0" cy="0" r="11" fill="#5a5a3a"/></g>
    <g class="era2" id="hand2L"><circle cx="0" cy="0" r="12" fill="#434c5e"/><rect x="-14" y="-4" width="8" height="8" fill="#88c0d0"/></g>
    <g class="era0" id="hand0R"><circle cx="0" cy="0" r="12" fill="#3a3a3a"/><path d="M-12,0 L-20,-6 L-20,6 Z" fill="#3a3a3a"/></g>
    <g class="era1" id="hand1R"><circle cx="0" cy="0" r="11" fill="#5a5a3a"/></g>
    <g class="era2" id="hand2R"><circle cx="0" cy="0" r="12" fill="#434c5e"/><rect x="-14" y="-4" width="8" height="8" fill="#88c0d0"/></g>

    <path class="era0" d="M172,385 L192,385 L187,565 L167,565 Z" fill="#3a3a3a"/>
    <path class="era0" d="M208,385 L228,385 L233,565 L213,565 Z" fill="#3a3a3a"/>
    <path class="era0" d="M165,560 L190,560 L195,760 L145,760 Z" fill="#2b2b2b"/>
    <path class="era0" d="M210,560 L235,560 L255,760 L205,760 Z" fill="#2b2b2b"/>
    <path class="era1" d="M172,385 L192,385 L187,570 L167,570 Z" fill="#4b5320"/>
    <path class="era1" d="M208,385 L228,385 L233,570 L213,570 Z" fill="#4b5320"/>
    <path class="era1" d="M167,700 L187,700 L195,760 L145,760 Z" fill="#2b2b2b"/>
    <path class="era1" d="M213,700 L233,700 L255,760 L205,760 Z" fill="#2b2b2b"/>
    <path class="era2" d="M170,385 L194,385 L189,565 L165,565 Z" fill="#3b4252"/>
    <path class="era2" d="M206,385 L230,385 L235,565 L211,565 Z" fill="#3b4252"/>
    <path class="era2" d="M165,565 L190,565 L185,740 L160,740 Z" fill="#434c5e"/>
    <path class="era2" d="M210,565 L235,565 L240,740 L215,740 Z" fill="#434c5e"/>
    <path class="era2" d="M160,730 L190,730 L195,760 L145,760 Z" fill="#2e3440"/>
    <path class="era2" d="M205,730 L235,730 L255,760 L205,760 Z" fill="#2e3440"/>

    <g class="era0" id="sword0">
      <path d="M0,-4 L60,-2 L70,0 L60,2 L0,4 Z" fill="#bbb"/>
      <rect x="-8" y="-6" width="10" height="12" fill="#5a3a1a"/>
      <rect x="-2" y="-10" width="4" height="20" fill="#333"/>
    </g>
  </g>

  <g class="era0" id="weapon0">
    <rect x="-45" y="-4" width="40" height="8" fill="#222"/>
    <rect x="-10" y="-8" width="12" height="16" fill="#5a3a1a"/>
    <circle cx="-15" cy="0" r="5" fill="#444"/>
  </g>
  <g class="era1" id="weapon1">
    <line id="rifleLine" stroke="#3a2a1a" stroke-width="8" stroke-linecap="round"/>
    <polygon id="rifleStock" fill="#5a3a1a"/>
  </g>
  <g class="era2" id="weapon2">
    <line id="carbineLine" stroke="#88c0d0" stroke-width="6" stroke-linecap="round"/>
    <polygon id="carbineStock" fill="#3b4252"/>
    <circle class="coil" cx="0" cy="0" r="4" fill="#88c0d0"/>
    <circle class="coil" cx="0" cy="0" r="4" fill="#88c0d0"/>
    <circle class="coil" cx="0" cy="0" r="4" fill="#88c0d0"/>
  </g>
</svg>
<input id="slider" type="range" min="0" max="2" step="0.001" value="0">
<div id="label"></div>
<script>
const slider = document.getElementById('slider');
const label = document.getElementById('label');
const L1 = 85, L2 = 85;
const shL = {x:155, y:215}, shR = {x:245, y:215};
const handTargets = [
  { left:{x:175,y:385}, right:{x:200,y:350} },
  { left:{x:180,y:300}, right:{x:240,y:380} },
  { left:{x:185,y:310}, right:{x:235,y:370} }
];
const eras = [
  { year:1631, place:"Saxony", armour:"cuirassier's three-quarter harness", material:"blackened steel plate over a buff coat", weapon:"wheellock pistol and cavalry sword" },
  { year:1916, place:"Somme, France", armour:"Sappenpanzer trench armour (steel breastplate) with M1916 Stahlhelm", material:"field-grey wool uniform, steel breastplate and helmet", weapon:"Gewehr 98 bolt-action rifle" },
  { year:2112, place:"Leipzig, European Federation", armour:"Modular Composite Cuirass, System 2112", material:"graphene-reinforced boron carbide over aramid smart-fabric, titanium exoskeleton frame", weapon:"Kinetic Coil Carbine M2109" }
];
function lerp(a,b,f){ return {x:a.x+(b.x-a.x)*f, y:a.y+(b.y-a.y)*f}; }
function ik(shoulder, target){
  let dx = target.x - shoulder.x, dy = target.y - shoulder.y;
  let d = Math.hypot(dx, dy);
  const maxD = L1 + L2 - 0.001, minD = Math.abs(L1 - L2) + 0.001;
  if(d > maxD){ dx *= maxD/d; dy *= maxD/d; d = maxD; }
  if(d < minD){ dx *= minD/d; dy *= minD/d; d = minD; }
  let base = Math.atan2(dy, dx);
  let cosA = (L1*L1 + d*d - L2*L2) / (2*L1*d);
  cosA = Math.max(-1, Math.min(1, cosA));
  let a = Math.acos(cosA);
  let s1 = {theta1: base - a}, s2 = {theta1: base + a};
  function finish(s){
    s.elbow = { x: shoulder.x + L1*Math.cos(s.theta1), y: shoulder.y + L1*Math.sin(s.theta1) };
    s.theta2 = Math.atan2(target.y - s.elbow.y, target.x - s.elbow.x);
    return s;
  }
  finish(s1); finish(s2);
  return (Math.abs(s1.elbow.x - 200) > Math.abs(s2.elbow.x - 200)) ? s1 : s2;
}
function setLine(id, x1, y1, x2, y2){
  const l = document.getElementById(id);
  l.setAttribute('x1', x1); l.setAttribute('y1', y1);
  l.setAttribute('x2', x2); l.setAttribute('y2', y2);
}
function setTransform(id, x, y, rot){
  document.getElementById(id).setAttribute('transform', 'translate(' + x + ',' + y + ') rotate(' + (rot*180/Math.PI) + ')');
}
function update(){
  const t = parseFloat(slider.value);
  const i = Math.floor(t);
  const f = t - i;
  let leftT, rightT;
  if(i >= 2){ leftT = handTargets[2].left; rightT = handTargets[2].right; }
  else { leftT = lerp(handTargets[i].left, handTargets[i+1].left, f); rightT = lerp(handTargets[i].right, handTargets[i+1].right, f); }
  const solL = ik(shL, leftT), solR = ik(shR, rightT);
  setLine('leftUpper', shL.x, shL.y, solL.elbow.x, solL.elbow.y);
  setLine('leftLower', solL.elbow.x, solL.elbow.y, leftT.x, leftT.y);
  setLine('rightUpper', shR.x, shR.y, solR.elbow.x, solR.elbow.y);
  setLine('rightLower', solR.elbow.x, solR.elbow.y, rightT.x, rightT.y);
  setTransform('upArm0L', shL.x, shL.y, solL.theta1);
  setTransform('upArm1L', shL.x, shL.y, solL.theta1);
  setTransform('upArm2L', shL.x, shL.y, solL.theta1);
  setTransform('upArm0R', shR.x, shR.y, solR.theta1);
  setTransform('upArm1R', shR.x, shR.y, solR.theta1);
  setTransform('upArm2R', shR.x, shR.y, solR.theta1);
  setTransform('lowArm0L', solL.elbow.x, solL.elbow.y, solL.theta2);
  setTransform('lowArm1L', solL.elbow.x, solL.elbow.y, solL.theta2);
  setTransform('lowArm2L', solL.elbow.x, solL.elbow.y, solL.theta2);
  setTransform('lowArm0R', solR.elbow.x, solR.elbow.y, solR.theta2);
  setTransform('lowArm1R', solR.elbow.x, solR.elbow.y, solR.theta2);
  setTransform('lowArm2R', solR.elbow.x, solR.elbow.y, solR.theta2);
  setTransform('hand0L', leftT.x, leftT.y, solL.theta2);
  setTransform('hand1L', leftT.x, leftT.y, solL.theta2);
  setTransform('hand2L', leftT.x, leftT.y, solL.theta2);
  setTransform('hand0R', rightT.x, rightT.y, solR.theta2);
  setTransform('hand1R', rightT.x, rightT.y, solR.theta2);
  setTransform('hand2R', rightT.x, rightT.y, solR.theta2);
  setTransform('sword0', leftT.x, leftT.y, solL.theta2);
  setTransform('weapon0', rightT.x, rightT.y, solR.theta2);
  let dx = leftT.x - rightT.x, dy = leftT.y - rightT.y;
  let len = Math.hypot(dx, dy) || 1;
  let ux = dx/len, uy = dy/len;
  let px = -uy, py = ux;
  let muzzle = { x: leftT.x + ux*45, y: leftT.y + uy*45 };
  setLine('rifleLine', rightT.x, rightT.y, muzzle.x, muzzle.y);
  document.getElementById('rifleStock').setAttribute('points',
    (rightT.x+px*8)+','+(rightT.y+py*8)+' '+
    (rightT.x+ux*35+px*6)+','+(rightT.y+uy*35+py*6)+' '+
    (rightT.x+ux*35-px*6)+','+(rightT.y+uy*35-py*6)+' '+
    (rightT.x-px*8)+','+(rightT.y-py*8));
  let muzzle2 = { x: leftT.x + ux*50, y: leftT.y + uy*50 };
  setLine('carbineLine', rightT.x, rightT.y, muzzle2.x, muzzle2.y);
  document.getElementById('carbineStock').setAttribute('points',
    (rightT.x+px*7)+','+(rightT.y+py*7)+' '+
    (rightT.x+ux*30+px*5)+','+(rightT.y+uy*30+py*5)+' '+
    (rightT.x+ux*30-px*5)+','+(rightT.y+uy*30-py*5)+' '+
    (rightT.x-px*7)+','+(rightT.y-py*7));
  const total = len + 50;
  document.querySelectorAll('#weapon2 .coil').forEach((c, idx) => {
    let frac = 0.3 + idx*0.2;
    c.setAttribute('cx', rightT.x + ux*total*frac);
    c.setAttribute('cy', rightT.y + uy*total*frac);
  });
  let w0 = t <= 1 ? 1 - t : 0;
  let w1 = t <= 1 ? t : 2 - t;
  let w2 = t <= 1 ? 0 : t - 1;
  document.querySelectorAll('.era0').forEach(e => e.style.opacity = w0);
  document.querySelectorAll('.era1').forEach(e => e.style.opacity = w1);
  document.querySelectorAll('.era2').forEach(e => e.style.opacity = w2);
  let text = '';
  if(f < 0.001 && i < 2){
    let e = eras[i];
    text = e.year + ', ' + e.place + '. ' + e.armour + ' of ' + e.material + '; armed with ' + e.weapon + '.';
  } else if(f > 0.999 && i >= 1){
    let e = eras[i+1];
    text = e.year + ', ' + e.place + '. ' + e.armour + ' of ' + e.material + '; armed with ' + e.weapon + '.';
  } else if(i >= 2){
    let e = eras[2];
    text = e.year + ', ' + e.place + '. ' + e.armour + ' of ' + e.material + '; armed with ' + e.weapon + '.';
  } else {
    let a = eras[i], b = eras[i+1];
    text = 'Between ' + a.year + ', ' + a.place + ' and ' + b.year + ', ' + b.place + ': the ' + a.armour + ' is giving way to the ' + b.armour + '; the ' + a.weapon + ' is becoming the ' + b.weapon + '.';
  }
  label.textContent = text;
}
slider.addEventListener('input', update);
update();
</script>
</body>
</html>

The weakest era

The 2112 era is the weakest as history, because it is invention rather than record; the anachronism I was most tempted by was a full-face fishbowl visor and a glowing laser rifle, which would have made it a film costume instead of protective equipment descended from the cuirass and the Sappenpanzer, so I kept a rigid breastplate, a Stahlhelm-derived helm with a HUD visor, and a stocked coil carbine. Among the two documented eras, 1631 is the shakiest: the armour of 1631 is transitional, and I was most tempted to arm him with a flintlock pistol (already invented but not standard that year) and to put him in a visored close helmet; I kept the wheellock and an open-faced lobster-tailed pot. I also knowingly simplified the cuisses to smooth plates — accurate three-quarter harness would have articulated lames and poleyns at the knee, but at this size they read as smudges, so I kept them as clean plates for legibility.

Attachments

tencent/hy4-preview — page