import {slider,fourbar,TAU,wrap} from './linkages.mjs'; import {gears} from './gears.mjs'; import {cam} from './cam.mjs'; import {stewart} from './stewart.mjs'; import {k} from './drawing.mjs'; const demos={slider,fourbar,gears,cam,stewart}; const $=s=>document.querySelector(s); const stage=$('#stage'),machine=$('#machine'),moving=$('#moving'),angleInput=$('#angle'); const reduced=matchMedia('(prefers-reduced-motion: reduce)'); const compactView=matchMedia('(max-width:800px)'); let demo,params,scene,theta=35*Math.PI/180,rpm=12,playing=!reduced.matches,rate=1,view='iso',overlays=false,visible=true,last=0,raf=0,lastRead=0,drag=null; const states={}; const scratch=document.createElementNS('http://www.w3.org/2000/svg','svg'); // Preserve live SVG nodes and update only changed attributes; static art stays untouched. function patch(oldNode,newNode){ if(oldNode.childNodes.length!==newNode.childNodes.length){oldNode.innerHTML=newNode.innerHTML;return;} for(let i=0;iBoolean(demo?.modes&¶ms.motion==='manual'); const phaseLabel=()=>demo?.modes?'周期相位':'输入角'; function syncMotionControls(){ const manual=manualPose(); $('#motion-controls').hidden=!demo.modes; if(demo.modes)$('#motion-mode').value=params.motion; $('#pose-readout').hidden=!demo.modes; $('#play').disabled=manual;$('#slow').disabled=manual;angleInput.disabled=manual;$('#rpm').disabled=manual; stage.classList.toggle('manual-pose',manual); $('.control-note').textContent=demo.modes?'调节位姿滑杆进入手动模式。自动演示围绕设定位姿运动；下方显示实时位姿。':'调节参数即时生效。拖动角度时自动暂停，按空格继续，← → 每次微调 1°。'; $('.drag-hint').innerHTML=manual?'⤢ 调节六个位姿参数':`⤢ ${demo.modes?'拖动模型，定位运动相位':'拖动机构，亲手转动'}`; } function updatePlay(){ $('#play').textContent=playing?'Ⅱ':'▶';$('#play').setAttribute('aria-label',playing?'暂停动画':'播放动画'); $('#play-state').textContent=manualPose()?'MANUAL':playing?'LIVE':'PAUSED'; } function toggle(){if(manualPose())return;playing=!playing;updatePlay();last=0;kick();say(playing?'继续播放':'已暂停');} function setAngle(t){if(manualPose())return;theta=t;playing=false;updatePlay();draw(true);describe();} function describe(){ stage.setAttribute('role',manualPose()?'img':'slider'); stage.setAttribute('aria-label',manualPose()?'Stewart 平台实体模型，通过六个位姿滑杆调节平台':`拖动机构调整${phaseLabel()}，左右方向键微调，空格播放或暂停`); for(const [key,value] of [['aria-valuemin','0'],['aria-valuemax','360'],['aria-valuenow',(wrap(theta)*180/Math.PI).toFixed(1)],['aria-valuetext',`${demo.title}，${phaseLabel()} ${(wrap(theta)*180/Math.PI).toFixed(1)} 度`]]){ if(manualPose())stage.removeAttribute(key);else stage.setAttribute(key,value); } } let chartRange=[0,1]; const plotX=t=>44+wrap(t)/TAU*585; const plotY=v=>148-(v-chartRange[0])/(chartRange[1]-chartRange[0])*128; function buildChart(){ chartRange=demo.range(params);if(chartRange[0]===chartRange[1])chartRange[1]+=1; let html=''; for(let j=0;j<=4;j++){ const val=chartRange[0]+(chartRange[1]-chartRange[0])*j/4,y=plotY(val); html+=`${Number(val.toFixed(1))}`; } for(let j=0;j<=4;j++){const x=44+585*j/4;html+=`${j*90}°`;} const pts=Array.from({length:361},(_,i)=>[44+585*i/360,plotY(demo.plot(i/360*TAU,params))]); const path=k.pathOf(pts); html+=``; $('#chart').innerHTML=html; $('#chart').setAttribute('aria-label',demo.chart.label+'随'+phaseLabel()+'变化的曲线，横轴0到360度'); $('#chart-unit').textContent=`${demo.chart.label} / ${demo.chart.unit}`; } function rebuild(){ machine.setAttribute('viewBox',demo.id==='stewart'&&compactView.matches?'100 -20 600 440':'0 0 800 400'); scene=demo.build(params,view);$('#base').innerHTML=scene.base;moving.innerHTML='';buildChart();draw(true);describe(); } compactView.addEventListener('change',()=>{if(demo)rebuild();}); function renderControls(){ $('#parameter-controls').innerHTML=demo.controls.map(c=>`

${c.label}${params[c.key]} ${c.unit}

${c.min} ${c.unit}${c.max} ${c.unit}

`).join(''); document.querySelectorAll('[data-param]').forEach(el=>{fill(el);el.addEventListener('input',()=>{params[el.dataset.param]=Number(el.value);$('#value-'+el.dataset.param).textContent=el.value;fill(el);if(demo.modes){params.motion='manual';playing=false;syncMotionControls();updatePlay();}rebuild();});el.addEventListener('change',()=>say(`${demo.title}参数已更新`));}); $('#presets').innerHTML=demo.presets.map((p,i)=>``).join(''); document.querySelectorAll('[data-preset]').forEach(el=>el.addEventListener('click',()=>{params={...params,...demo.presets[Number(el.dataset.preset)].params};if(demo.modes){theta=0;playing=!manualPose()&&!reduced.matches;}renderControls();rebuild();updatePlay();kick();say('已应用'+el.textContent.replace(' ↗',''));})); syncMotionControls(); } function select(id){ if(!demos[id])id='slider'; if(demo)states[demo.id]={params:{...params},theta}; demo=demos[id];params={...(states[id]?.params||demo.defaults)};theta=states[id]?.theta??35*Math.PI/180; if(manualPose())playing=false; $('.lab').dataset.demo=id; $('#motion-mode').innerHTML=(demo.modes||[]).map(m=>``).join(''); $('#angle-label').textContent=phaseLabel();angleInput.setAttribute('aria-label',phaseLabel()+' θ'); $('#rpm-label').textContent=demo.modes?'演示频率 f':'输入转速 n';$('#rpm-unit').textContent=demo.modes?'次/min':'r/min'; $('#rpm-min').textContent=demo.modes?'2 次/min':'2 r/min';$('#rpm-max').textContent=demo.modes?'30 次/min':'30 r/min'; $('.chart-caption').textContent=demo.modes?'曲线表示 L1 在一个演示周期内的长度；手动模式下为恒定值。':'点击曲线任意位置定位输入角；亮点与机构保持同步。'; $('#pose-readout').innerHTML=demo.modes?[['x','X','mm'],['y','Y','mm'],['z','Z','mm'],['roll','横滚','°'],['pitch','俯仰','°'],['yaw','偏航','°']].map(([key,label,unit])=>`${label} ${unit}`).join(''):''; for(const [selector,key] of [['#chapter','chapter'],['#demo-title','title'],['#english','english'],['#summary','summary'],['#concept','concept'],['#formula','formula'],['#formula-note','formulaNote']])$(selector).textContent=demo[key]; machine.setAttribute('aria-label',demo.title+'实体机构模型，'+demo.summary); document.querySelectorAll('.demo-tab[data-demo]').forEach(el=>{el.classList.toggle('active',el.dataset.demo===id);if(el.dataset.demo===id)el.setAttribute('aria-current','page');else el.removeAttribute('aria-current');}); renderControls();$('#metrics').innerHTML=demo.metrics(demo.model(theta,params,rpm),params,rpm).map((m,i)=>`

${m.label}

${m.unit}

`).join(''); rebuild();updatePlay();kick(); } function draw(force=false){ const m=demo.model(theta,params,rpm); scratch.innerHTML=scene.render(theta,m,overlays);patch(moving,scratch); const a=wrap(theta)*180/Math.PI;angleInput.value=a;fill(angleInput);$('#angle-value').textContent=a.toFixed(1)+'°'; const x=plotX(theta),y=plotY(demo.plot(wrap(theta),params)); const cursor=$('#chart-cursor');cursor.setAttribute('x1',x);cursor.setAttribute('x2',x); for(const sel of ['#chart-dot','#chart-dot-halo']){$(sel).setAttribute('cx',x);$(sel).setAttribute('cy',y);} const now=performance.now(); if(force||now-lastRead>100){ demo.metrics(m,params,rpm).forEach((item,i)=>{$('#metric-'+i).textContent=item.value.toFixed(item.digits??1);}); if(demo.modes)for(const key of ['x','y','z','roll','pitch','yaw'])$('#pose-'+key).textContent=m.pose[key].toFixed(1); $('#phase').textContent=m.phase;lastRead=now; } } function tick(now){raf=0;const dt=last?Math.min((now-last)/1000,1/30):0;last=now;if(playing&&visible&&!document.hidden){theta+=dt*rpm*TAU/60*rate;draw();raf=requestAnimationFrame(tick);}else last=0;} function kick(){if(!raf&&playing&&visible&&!document.hidden){last=0;raf=requestAnimationFrame(tick);}} $('#play').addEventListener('click',toggle); $('#reset').addEventListener('click',()=>{params={...demo.defaults};theta=35*Math.PI/180;rpm=12;rate=1;$('#rpm').value=rpm;$('#rpm-value').textContent=rpm;fill($('#rpm'));$('#slow').innerHTML='1×播放倍率';renderControls();rebuild();updatePlay();say('已重置当前实验');}); $('#motion-mode').addEventListener('change',e=>{params.motion=e.target.value;theta=0;playing=!manualPose()&&!reduced.matches;syncMotionControls();rebuild();updatePlay();kick();say('已切换'+e.target.selectedOptions[0].textContent);}); $('#slow').addEventListener('click',()=>{rate=rate===1?.25:1;$('#slow').innerHTML=rate+'×播放倍率';say('播放倍率'+rate);}); $('#rpm').addEventListener('input',e=>{rpm=Number(e.target.value);$('#rpm-value').textContent=rpm;fill(e.target);draw(true);}); angleInput.addEventListener('input',()=>setAngle(Number(angleInput.value)*Math.PI/180)); $('#guides').addEventListener('click',()=>{overlays=!overlays;$('#guides').setAttribute('aria-pressed',overlays);draw(true);}); document.querySelectorAll('[data-view]').forEach(el=>el.addEventListener('click',()=>{view=el.dataset.view;document.querySelectorAll('[data-view]').forEach(b=>{b.classList.toggle('selected',b===el);b.setAttribute('aria-pressed',b===el);});rebuild();})); document.querySelectorAll('.demo-tab[data-demo]').forEach(el=>el.addEventListener('click',()=>{location.hash=el.dataset.demo;})); window.addEventListener('hashchange',()=>select(location.hash.slice(1))); function worldPointer(e){ const point=machine.createSVGPoint();point.x=e.clientX;point.y=e.clientY;const p=point.matrixTransform(machine.getScreenCTM().inverse()); const [ox,oy]=k.iso(scene.dragCenter,scene.P),c=k.cameraOf(scene.P),sx=(p.x-ox)/c.k,sy=(p.y-oy)/(c.k*c.sinE); return Math.atan2(-c.cosA*sx+c.sinA*sy,c.sinA*sx+c.cosA*sy); } stage.addEventListener('pointerdown',e=>{if(e.button!==0||manualPose())return;stage.focus({preventScroll:true});stage.setPointerCapture(e.pointerId);drag={id:e.pointerId,last:worldPointer(e)};playing=false;updatePlay();}); stage.addEventListener('pointermove',e=>{if(!drag||drag.id!==e.pointerId)return;const a=worldPointer(e);let delta=a-drag.last;if(delta>Math.PI)delta-=TAU;if(delta<-Math.PI)delta+=TAU;drag.last=a;theta+=delta;draw(true);describe();}); function endDrag(e){if(drag?.id===e.pointerId){drag=null;if(stage.hasPointerCapture(e.pointerId))stage.releasePointerCapture(e.pointerId);describe();}} stage.addEventListener('pointerup',endDrag);stage.addEventListener('pointercancel',endDrag);stage.addEventListener('lostpointercapture',()=>{drag=null;}); stage.addEventListener('keydown',e=>{if(['ArrowLeft','ArrowRight','Home','End'].includes(e.key)){e.preventDefault();if(e.key==='Home')setAngle(0);else if(e.key==='End')setAngle(TAU-.00001);else setAngle(theta+(e.key==='ArrowRight'?1:-1)*(e.shiftKey?10:1)*Math.PI/180);}}); document.addEventListener('keydown',e=>{if(e.code==='Space'&&!['BUTTON','TEXTAREA','SELECT'].includes(e.target.tagName)&&(e.target.tagName!=='INPUT'||e.target.type==='range')){e.preventDefault();toggle();}}); $('#chart').addEventListener('pointerdown',e=>{const pt=$('#chart').createSVGPoint();pt.x=e.clientX;pt.y=e.clientY;const p=pt.matrixTransform($('#chart').getScreenCTM().inverse());setAngle(Math.max(0,Math.min(.999999,(p.x-44)/585))*TAU);}); new IntersectionObserver(entries=>{visible=entries.at(-1).isIntersecting;kick();},{threshold:0}).observe(stage); document.addEventListener('visibilitychange',kick); reduced.addEventListener('change',()=>{if(reduced.matches){playing=false;updatePlay();}}); fill($('#rpm'));select(location.hash.slice(1));

每一段运动，都有其原理。

机械实验台