Müller-Lyer illusion

<!doctype html><html lang="ja"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style>body{margin:0;min-height:330px}.sample{width:100%;height:100%;min-height:330px;padding:12px!important;display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:8px!important;background:#f0efeb;color:#232323;font-family:Arial,Meiryo,sans-serif;overflow:hidden;box-sizing:border-box}.sample *{box-sizing:border-box}.lab-scene{width:100%;max-width:430px;height:140px;position:relative;overflow:hidden;border-bottom:1px solid #ccc}.lab-scene:has(canvas){max-width:320px;height:auto;aspect-ratio:16/9;flex-shrink:0}.lab-canvas{display:block;width:100%;height:100%!important;outline-offset:-3px}.lab-canvas:focus-visible{outline:2px solid #222}.lab-controls{width:100%;max-width:390px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}.lab-controls label{display:grid;grid-template-columns:1fr auto;gap:2px;font-size:11px;min-width:0}.lab-controls input{grid-column:1/-1;width:100%;min-width:0;margin:0;accent-color:#333;height:30px}.lab-controls output{font-variant-numeric:tabular-nums}.lab-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}.sample .lab-actions button{color:inherit;font:11px Arial,Meiryo,sans-serif;border:1px solid #aaa;border-radius:99px;background:transparent;min-height:44px;padding:8px 12px;cursor:pointer}.lab-status{font-size:10px;line-height:1.4;min-height:14px;margin:0;text-align:center}.lab-note{font-size:9px;line-height:1.3;color:#666;margin:0;text-align:center}.lab-actions button:focus-visible{outline:2px solid #222;outline-offset:2px}@media(prefers-reduced-motion:reduce){.sample *{animation-play-state:paused!important;transition:none!important}}</style><div class="sample"><div class="lab-scene"><canvas class="lab-canvas" tabindex="0" role="img" aria-label="同じ長さを見比べる。矢印キーでも位置を変えられます。" style="touch-action:pan-y"></canvas></div><div class="lab-controls"><label>実際の線の長さ<output>130</output><input aria-label="実際の線の長さ" type="range" min="80" max="180" step="1" value="130" data-key="length"></label></div><div class="lab-actions"><button type="button" data-play>停止</button><button type="button" data-reset>最初から</button></div><p class="lab-status"></p></div><script>const lab=(function runCanvasLab(root,cfg,draw){
 const canvas=root.querySelector('canvas'),ctx=canvas.getContext('2d'),status=root.querySelector('.lab-status'),play=root.querySelector('[data-play]'),reset=root.querySelector('[data-reset]'),abort=new AbortController(),mq=matchMedia('(prefers-reduced-motion:reduce)');
 const values=Object.fromEntries(cfg.controls.map(c=>[c.key,c.value]));let state={},time=0,frame=0,last=0,allowed=!mq.matches,userPaused=false,destroyed=false,visible=true;
 const pointer={x:160,y:90,down:false,active:false,dx:0,dy:0};let event='init';
 const on=(el,type,fn,opts={})=>el.addEventListener(type,fn,{...opts,signal:abort.signal});
 const circle=(x,y,r,fill='#292929')=>{ctx.beginPath();ctx.arc(x,y,Math.max(.1,r),0,Math.PI*2);ctx.fillStyle=fill;ctx.fill()};
 const line=(x,y,a,b,color='#aaa',width=1)=>{ctx.beginPath();ctx.strokeStyle=color;ctx.lineWidth=width;ctx.moveTo(x,y);ctx.lineTo(a,b);ctx.stroke()};
 const text=(str,x,y,size=12,color='#333',align='center')=>{ctx.fillStyle=color;ctx.font=`${size>25?'700':'400'} ${size}px Arial, sans-serif`;ctx.textAlign=align;ctx.fillText(str,x,y)};
 function render(dt=0){if(destroyed||!ctx)return;ctx.setTransform(canvas.width/320,0,0,canvas.height/180,0,0);ctx.clearRect(0,0,320,180);ctx.save();draw({ctx,w:320,h:180,time,dt,values,state,pointer,event,kind:cfg.kind,circle,line,text,status:s=>{status.textContent=s}});ctx.restore();event='';}
 function tick(now){frame=0;if(!running())return;const dt=Math.min((now-(last||now))/1000,.033);last=now;time+=dt;render(dt);frame=requestAnimationFrame(tick)}
 function running(){return !destroyed&&allowed&&!userPaused&&visible&&!document.hidden&&cfg.animated!==false}
 function sync(){cancelAnimationFrame(frame);frame=0;last=0;if(running())frame=requestAnimationFrame(tick);play.textContent=running()?'停止':'再生';play.setAttribute('aria-pressed',String(userPaused));}
 function resize(){const dpr=Math.min(devicePixelRatio||1,2);canvas.width=Math.round(640*dpr);canvas.height=Math.round(360*dpr);render()}
 on(play,'click',()=>{userPaused=running();if(!userPaused)allowed=true;sync();render()});
 on(reset,'click',()=>{state={};time=0;event='reset';pointer.down=false;render();sync()});
 for(const input of root.querySelectorAll('[data-key]')){on(input,'input',()=>{values[input.dataset.key]=Number(input.value);input.closest('label').querySelector('output').textContent=input.value;event='input';render()})}
 function position(e){const b=canvas.getBoundingClientRect(),x=(e.clientX-b.left)/b.width*320,y=(e.clientY-b.top)/b.height*180;pointer.dx=x-pointer.x;pointer.dy=y-pointer.y;pointer.x=Math.max(0,Math.min(320,x));pointer.y=Math.max(0,Math.min(180,y));pointer.active=true;}
 on(canvas,'pointerdown',e=>{position(e);pointer.down=true;event='down';canvas.setPointerCapture(e.pointerId);render()});
 on(canvas,'pointermove',e=>{position(e);event='move';render()});
 on(canvas,'pointerup',e=>{position(e);pointer.down=false;event='up';render()});
 on(canvas,'pointercancel',()=>{pointer.down=false;event='cancel';render()});
 on(canvas,'pointerleave',()=>{pointer.active=false;if(!pointer.down){event='leave';render()}});
 on(canvas,'keydown',e=>{const keys={ArrowLeft:[-12,0],ArrowRight:[12,0],ArrowUp:[0,-12],ArrowDown:[0,12]};if(keys[e.key]){e.preventDefault();pointer.active=true;pointer.x=Math.max(0,Math.min(320,pointer.x+keys[e.key][0]));pointer.y=Math.max(0,Math.min(180,pointer.y+keys[e.key][1]));event='keyboard';render()}if(e.key===' '||e.key==='Enter'){e.preventDefault();pointer.down=!pointer.down;pointer.active=true;event=pointer.down?'down':'up';render()}});
 on(document,'visibilitychange',sync);on(mq,'change',()=>{allowed=!mq.matches;sync();render()});
 const observer=new IntersectionObserver(entries=>{visible=entries[0].isIntersecting;sync()});observer.observe(canvas);resize();sync();
 if(cfg.animated===false)play.hidden=true;
 return {setAuto(on){allowed=on&&!mq.matches;sync()},destroy(){destroyed=true;cancelAnimationFrame(frame);abort.abort();observer.disconnect();state={}}};
})(document,{"kind":"illusion-length","controls":[{"key":"length","label":"実際の線の長さ","min":80,"max":180,"value":130,"step":1}],"animated":false},function illusions({ctx,values:v,state:s,event,kind,circle,line,text,status}){
 if(event==='down'){if(kind==='illusion-contrast')s.hide=!s.hide;if(kind==='illusion-figure')s.invert=!s.invert;if(kind==='illusion-length')s.guide=!s.guide;}
 if(kind==='illusion-moire'){ctx.save();ctx.translate(160,90);for(let layer=0;layer<2;layer++){ctx.save();ctx.rotate(layer*v.angle*Math.PI/180);for(let x=-250;x<250;x+=v.gap)line(x,-250,x,250,layer?'#777':'#aaa',1);ctx.restore()}ctx.restore();status('角度の違いが、大きな縞を生む');}
 else if(kind==='illusion-contrast'){ctx.fillStyle=s.hide?'#999':'#222';ctx.fillRect(0,0,160,180);ctx.fillStyle=s.hide?'#999':'#e5e5e5';ctx.fillRect(160,0,160,180);const g=Math.round(v.gray);circle(80,90,25,`rgb(${g},${g},${g})`);circle(240,90,25,`rgb(${g},${g},${g})`);text('同じ RGB '+g,160,165,11,s.hide?'#222':'#999');status('画面をタップすると背景を同じ色にする');}
 else if(kind==='illusion-figure'){ctx.fillStyle=s.invert?'#222':'#eee';ctx.fillRect(0,0,320,180);ctx.beginPath();ctx.moveTo(130,0);ctx.bezierCurveTo(70,35,155,45,130,75);ctx.bezierCurveTo(95,110,150,125,110,180);ctx.lineTo(210,180);ctx.bezierCurveTo(170,125,225,110,190,75);ctx.bezierCurveTo(165,45,250,35,190,0);ctx.closePath();ctx.fillStyle=s.invert?'#eee':'#222';ctx.fill();status('中央の器と、両側の横顔。タップで白黒を反転');}
 else{const length=v.length;for(let row=0;row<2;row++){const y=55+row*75,start=160-length/2,end=160+length/2;line(start,y,end,y,'#333',2);for(const x of[start,end]){const dir=(x===start?1:-1)*(row?1:-1);line(x,y,x+dir*22,y-20,'#333',2);line(x,y,x+dir*22,y+20,'#333',2)}}if(s.guide){line(160-length/2,15,160-length/2,160,'#999');line(160+length/2,15,160+length/2,160,'#999')}status('二本は同じ長さ。タップで補助線を表示');}
});addEventListener('pagehide',()=>lab.destroy(),{once:true});</script></html>