Suma y Resta de Vectores \u2014 Fisica General<\/title>\r\n<style>\r\n:root{\r\n--bg:#f0f1f3;--panel:#fff;--text:#1c1917;--muted:#78716c;\r\n--accent:#0d9488;--accent-l:#ccfbf1;--accent-h:#0f766e;\r\n--border:#e7e5e4;--input:#f8fafc;--danger:#dc2626;\r\n--success:#16a34a;--warn:#d97706;--r:8px;--rl:12px;\r\n--sh:0 1px 3px rgba(0,0,0,.07);--shl:0 4px 12px rgba(0,0,0,.08);\r\n--tr:.2s ease;\r\n}\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\r\nhtml,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:13px;line-height:1.5}\r\n#app{display:grid;grid-template-columns:340px 1fr;height:100vh;width:100vw}\r\n#panel{background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;z-index:10}\r\n.ph{padding:16px 20px 12px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#0d9488,#0f766e);color:#fff;flex-shrink:0}\r\n.ph h1{font-size:16px;font-weight:700;letter-spacing:-.3px}\r\n.ph p{font-size:11px;opacity:.85;margin-top:2px}\r\n.ps{flex:1;overflow-y:auto;padding:4px 0;scrollbar-width:thin;scrollbar-color:#d6d3d1 transparent}\r\n.ps::-webkit-scrollbar{width:5px}\r\n.ps::-webkit-scrollbar-thumb{background:#d6d3d1;border-radius:3px}\r\ndetails{border-bottom:1px solid var(--border)}\r\ndetails summary{padding:10px 20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;transition:color var(--tr);user-select:none}\r\ndetails summary::-webkit-details-marker{display:none}\r\ndetails summary::before{content:'';display:inline-block;width:0;height:0;border-left:4px solid currentColor;border-top:3px solid transparent;border-bottom:3px solid transparent;transition:transform var(--tr)}\r\ndetails[open] summary::before{transform:rotate(90deg)}\r\ndetails summary:hover{color:var(--accent)}\r\n.sc{padding:8px 20px 14px}\r\n.bg{display:flex;gap:6px}\r\n.bg button{flex:1;padding:7px 0;border:1.5px solid var(--border);border-radius:var(--r);background:var(--input);font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:all var(--tr)}\r\n.bg button:hover{border-color:var(--accent);color:var(--accent)}\r\n.bg button.on{background:var(--accent);color:#fff;border-color:var(--accent)}\r\n.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border:none;border-radius:var(--r);font-size:12px;font-weight:600;cursor:pointer;transition:all var(--tr);width:100%}\r\n.btn-p{background:var(--accent);color:#fff}.btn-p:hover{background:var(--accent-h)}\r\n.btn-s{background:var(--input);color:var(--text);border:1.5px solid var(--border)}.btn-s:hover{border-color:var(--accent);color:var(--accent)}\r\n.btn-d{background:#fef2f2;color:var(--danger);border:1.5px solid #fecaca}.btn-d:hover{background:#fee2e2}\r\n.btn:disabled{opacity:.4;cursor:not-allowed}\r\n.rg,.cg{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}\r\n.rl,.cl{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;padding:4px 0}\r\n.rl input,.cl input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}\r\n.rl.dis{opacity:.35;pointer-events:none}\r\n.vc{background:var(--input);border:1px solid var(--border);border-radius:var(--rl);padding:10px 12px;margin-bottom:8px;border-left:4px solid;transition:box-shadow var(--tr)}\r\n.vc:hover{box-shadow:var(--sh)}\r\n.vh{display:flex;align-items:center;gap:8px;margin-bottom:8px}\r\n.sb{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;cursor:pointer;transition:all var(--tr);border:none;flex-shrink:0}\r\n.sb.pos{background:#dcfce7;color:#16a34a;border:1.5px solid #86efac}\r\n.sb.neg{background:#fee2e2;color:#dc2626;border:1.5px solid #fca5a5}\r\n.sb:hover{transform:scale(1.15)}\r\n.vn{font-weight:700;font-size:13px}\r\n.ir{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:4px}\r\n.ig{display:flex;flex-direction:column;gap:2px}\r\n.ig label{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}\r\n.ig input{width:100%;padding:5px 7px;border:1.5px solid var(--border);border-radius:6px;font-size:13px;font-family:'SF Mono','Cascadia Code',Consolas,monospace;background:#fff;color:var(--text);transition:border-color var(--tr);outline:none}\r\n.ig input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(13,148,136,.12)}\r\n.ig input.hv{color:transparent;caret-color:var(--text)}\r\n.at,.ct{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:12px}\r\n.at th,.at td,.ct th,.ct td{padding:5px 8px;text-align:center;border:1px solid var(--border)}\r\n.at th,.ct th{background:var(--input);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}\r\n.at .sr{background:var(--accent-l);font-weight:700}\r\n.fs{font-family:'SF Mono','Cascadia Code',Consolas,monospace;font-size:11.5px;line-height:1.8;color:var(--text);background:var(--input);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px}\r\n.fs .rl2{color:var(--accent-h);font-weight:700}\r\n.fs .sp{border-top:1px dashed var(--border);margin:4px 0}\r\n.mm{text-align:center;font-size:12px;font-weight:600;color:var(--success);padding:6px;background:#f0fdf4;border-radius:var(--r);border:1px solid #bbf7d0}\r\n.eb{display:flex;gap:6px;margin-bottom:10px}\r\n.eb .btn{flex:1}\r\n.vs{background:var(--input);border:1px solid var(--border);border-radius:var(--rl);padding:12px;margin-top:10px}\r\n.vs h4{font-size:12px;font-weight:700;margin-bottom:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}\r\n.vi{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}\r\n.vr{font-size:12px;font-weight:600;padding:8px;border-radius:var(--r);text-align:center;margin-top:6px;display:none}\r\n.vr.ok{display:block;background:#f0fdf4;color:var(--success);border:1px solid #bbf7d0}\r\n.vr.no{display:block;background:#fef2f2;color:var(--danger);border:1px solid #fecaca}\r\n.pn{font-size:11px;color:var(--warn);background:#fffbeb;border:1px solid #fde68a;padding:6px 10px;border-radius:var(--r);margin-top:6px}\r\n.it{font-size:11px;color:var(--muted);font-style:italic;margin-top:4px}\r\n#ca{position:relative;overflow:hidden;background:#fefefe}\r\n#cv{position:absolute;top:0;left:0}\r\n#cv.grabbing{cursor:grabbing}\r\n#cv.grab{cursor:grab}\r\n#zl{position:absolute;bottom:16px;right:16px;display:flex;flex-direction:column;gap:4px}\r\n#zl button{width:36px;height:36px;border:1.5px solid var(--border);border-radius:var(--r);background:var(--panel);font-size:18px;font-weight:600;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh);transition:all var(--tr)}\r\n#zl button:hover{border-color:var(--accent);color:var(--accent)}\r\n#ml{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);padding:6px 12px;border-radius:var(--r);font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;box-shadow:var(--sh);pointer-events:none;border:1px solid var(--border)}\r\n#el{position:absolute;top:12px;left:140px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);padding:6px 12px;border-radius:var(--r);font-size:12px;font-weight:600;color:var(--text);box-shadow:var(--sh);pointer-events:none;border:1px solid var(--border);font-family:'SF Mono',Consolas,monospace}\r\n#asl{position:absolute;bottom:54px;left:50%;transform:translateX(-50%);background:rgba(13,148,136,.92);color:#fff;padding:6px 16px;border-radius:20px;font-size:12px;font-weight:600;pointer-events:none;opacity:0;transition:opacity .3s ease;white-space:nowrap}\r\n#asl.vis{opacity:1}\r\n#zi{position:absolute;bottom:16px;left:16px;font-size:11px;color:var(--muted);background:rgba(255,255,255,.85);padding:4px 8px;border-radius:6px;pointer-events:none}\r\n#tc{position:fixed;top:16px;right:16px;z-index:1000;display:flex;flex-direction:column;gap:8px}\r\n.toast{padding:10px 16px;border-radius:var(--r);font-size:13px;font-weight:500;box-shadow:var(--shl);transform:translateX(120%);transition:transform .3s ease;max-width:320px}\r\n.toast.show{transform:translateX(0)}\r\n.toast-s{background:#f0fdf4;color:var(--success);border:1px solid #bbf7d0}\r\n.toast-e{background:#fef2f2;color:var(--danger);border:1px solid #fecaca}\r\n.toast-i{background:#f0f9ff;color:#0369a1;border:1px solid #bae6fd}\r\n@media(max-width:900px){\r\n#app{grid-template-columns:1fr;grid-template-rows:55vh 45vh}\r\n#panel{border-right:none;border-top:1px solid var(--border)}\r\n.ph{padding:10px 16px 8px}.ph h1{font-size:14px}\r\n.sc{padding:6px 16px 10px}details summary{padding:8px 16px;font-size:11px}\r\n.vc{padding:8px 10px}#el{left:12px;top:42px}#asl{bottom:50px}\r\n}\r\n@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"app\">\r\n<aside id=\"panel\">\r\n<div class=\"ph\"><h1>Suma y Resta de Vectores<\/h1><p>Fisica Basica \u2014 Simulacion Interactiva<\/p>\r\n<a href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/FISAR_SIM\/\" target=\"_blank\">\r\n<img decoding=\"async\" src=\"FISAR_SIM_1\" alt=\"FISAR Sim\"\r\nstyle=\"height:32px; width:auto; margin-top:8px; display:block; max-width:100%;\">\r\n<\/a>\r\n<\/div>\r\n<div class=\"ps\">\r\n<details open><summary>Configuracion<\/summary><div class=\"sc\">\r\n<label style=\"font-size:11px;font-weight:600;color:var(--muted);display:block;margin-bottom:6px\">CANTIDAD DE VECTORES<\/label>\r\n<div class=\"bg\" id=\"nb\"><\/div>\r\n<\/div><\/details>\r\n<details open><summary>Vectores<\/summary><div class=\"sc\" id=\"vcc\"><\/div><\/details>\r\n<details open><summary>Metodo Grafico<\/summary><div class=\"sc\">\r\n<div class=\"rg\">\r\n<label class=\"rl\"><input type=\"radio\" name=\"mt\" value=\"ninguna\" checked>Sin resultante<\/label>\r\n<label class=\"rl\"><input type=\"radio\" name=\"mt\" value=\"poligonal\">Poligonal (punta con cola)<\/label>\r\n<label class=\"rl\" id=\"rp\"><input type=\"radio\" name=\"mt\" value=\"paralelogramo\">Paralelogramo<\/label>\r\n<\/div>\r\n<label class=\"cl\" id=\"cw\" style=\"display:none\"><input type=\"checkbox\" id=\"cp\">Mostrar paralelogramo<\/label>\r\n<div id=\"pn2\"><\/div>\r\n<button class=\"btn btn-s\" id=\"ba\" style=\"margin-top:8px;display:none\">Mostrar animacion<\/button>\r\n<button class=\"btn btn-d\" id=\"bs\" style=\"margin-top:6px;display:none\">Detener animacion<\/button>\r\n<\/div><\/details>\r\n<details><summary>Visualizacion<\/summary><div class=\"sc\">\r\n<div class=\"cg\">\r\n<label class=\"cl\"><input type=\"checkbox\" id=\"cc\">Mostrar componentes<\/label>\r\n<label class=\"cl\"><input type=\"checkbox\" id=\"cd\">Mostrar coordenadas<\/label>\r\n<\/div>\r\n<\/div><\/details>\r\n<details open><summary>Metodo Analitico<\/summary><div class=\"sc\" id=\"ans\"><\/div><\/details>\r\n<details><summary>Comparacion de Metodos<\/summary><div class=\"sc\" id=\"cps\"><\/div><\/details>\r\n<details><summary>Ejercicios<\/summary><div class=\"sc\">\r\n<div class=\"eb\">\r\n<button class=\"btn btn-p\" id=\"bg\">Generar ejercicio<\/button>\r\n<button class=\"btn btn-s\" id=\"bsol\">Mostrar solucion<\/button>\r\n<\/div>\r\n<label class=\"cl\" style=\"margin-bottom:6px\"><input type=\"checkbox\" id=\"chm\">Resolver sin ayuda<\/label>\r\n<div class=\"vs\" id=\"vsec\" style=\"display:none\">\r\n<h4>Verificar tu respuesta<\/h4>\r\n<div class=\"vi\">\r\n<div class=\"ig\"><label>Modulo |R|<\/label><input type=\"number\" step=\"0.01\" id=\"vm2\" placeholder=\"0.00\"><\/div>\r\n<div class=\"ig\"><label>Angulo (deg)<\/label><input type=\"number\" step=\"0.01\" id=\"va2\" placeholder=\"0.00\"><\/div>\r\n<\/div>\r\n<button class=\"btn btn-p\" id=\"bv\">Verificar respuesta<\/button>\r\n<div class=\"vr\" id=\"vres\"><\/div>\r\n<\/div>\r\n<\/div><\/details>\r\n<\/div>\r\n<\/aside>\r\n<main id=\"ca\">\r\n<canvas id=\"cv\"><\/canvas>\r\n<div id=\"ml\">SIN RESULTANTE<\/div>\r\n<div id=\"el\">A<\/div>\r\n<div id=\"asl\"><\/div>\r\n<div id=\"zi\">Zoom: 100%<\/div>\r\n<div id=\"zl\">\r\n<button id=\"zin\" title=\"Acercar\">+<\/button>\r\n<button id=\"zout\" title=\"Alejar\">−<\/button>\r\n<button id=\"zrst\" title=\"Restablecer\">↺<\/button>\r\n<\/div>\r\n<\/main>\r\n<\/div>\r\n<div id=\"tc\"><\/div>\r\n\r\n<script>\r\nvar COLS=['#1d4ed8','#15803d','#c2410c','#7e22ce'];\r\nvar NAMES=['A','B','C','D'];\r\nvar RCOL='#dc2626';\r\nvar GU=45;\r\nvar TR=12;\r\n\r\nvar V=[];\r\nvar NV=1;\r\nvar MT='ninguna';\r\nvar SHC=false,SHD=false,SHP=false;\r\nvar CHM=false,SOLV=true;\r\nvar ZM=1,PX=0,PY=0;\r\nvar DRG=false,DI=-1,PAN=false,LMX=0,LMY=0,HI=-1;\r\nvar ANM=false,AST=0,APR=0,ATM=0,ACP=false;\r\nvar _CW=800,_CH=600;\r\n\r\nvar cv=document.getElementById('cv');\r\nvar cx=cv.getContext('2d');\r\nvar aslEl=document.getElementById('asl');\r\n\r\nfunction rad(d){return d*Math.PI\/180}\r\nfunction deg(r){return r*180\/Math.PI}\r\nfunction nang(d){d=d%360;return d<0?d+360:d}\r\nfunction fm(n){return(Math.round(n*100)\/100).toFixed(2)}\r\nfunction fms(n){return n>=0?fm(n):'('+fm(n)+')'}\r\nfunction ease(t){return t<.5?4*t*t*t:1-Math.pow(-2*t+2,3)\/2}\r\n\r\nfunction cw(){return _CW}\r\nfunction ch(){return _CH}\r\nfunction w2s(wx,wy){return{x:cw()\/2+wx*GU*ZM+PX,y:ch()\/2-wy*GU*ZM+PY}}\r\nfunction s2w(sx,sy){return{x:(sx-cw()\/2-PX)\/(GU*ZM),y:-(sy-ch()\/2-PY)\/(GU*ZM)}}\r\n\r\nfunction mkVec(i,m,a,s){\r\ns=s||1;var r=rad(a);\r\nreturn{n:NAMES[i],c:COLS[i],m:m,a:a,cx:m*Math.cos(r),cy:m*Math.sin(r),s:s};\r\n}\r\n\r\nfunction initV(){\r\nvar df=[[5,30],[4,135],[3,220],[2.5,310]];\r\nV=[];\r\nfor(var i=0;i<NV;i++) V.push(mkVec(i,df[i][0],df[i][1],1));\r\nACP=false;\r\nmkCards();\r\nupAll();\r\n}\r\n\r\nfunction setNV(n){\r\nif(n===NV) return;\r\nvar old=V.slice();\r\nvar df=[[5,30],[4,135],[3,220],[2.5,310]];\r\nNV=n;\r\nV=[];\r\nfor(var i=0;i<n;i++) V.push(old[i]||mkVec(i,df[i][0],df[i][1],1));\r\nACP=false;\r\nmkCards();\r\nupMT();\r\nupAll();\r\n}\r\n\r\nfunction upPolar(i){\r\nvar v=V[i],r=rad(v.a);\r\nv.cx=v.m*Math.cos(r);\r\nv.cy=v.m*Math.sin(r);\r\n}\r\n\r\nfunction upComp(i){\r\nvar v=V[i];\r\nv.m=Math.hypot(v.cx,v.cy);\r\nvar a=deg(Math.atan2(v.cy,v.cx));\r\nv.a=nang(a);\r\nif(v.m<1e-9){v.m=0;v.a=0;v.cx=0;v.cy=0}\r\n}\r\n\r\nfunction calcR(){\r\nvar sx=0,sy=0;\r\nV.forEach(function(v){sx+=v.s*v.cx;sy+=v.s*v.cy});\r\nvar mg=Math.hypot(sx,sy);\r\nvar an=nang(deg(Math.atan2(sy,sx)));\r\nif(mg<1e-9) return{rx:0,ry:0,m:0,a:0};\r\nreturn{rx:sx,ry:sy,m:mg,a:an};\r\n}\r\n\r\nfunction rsz(){\r\nvar p=cv.parentElement;\r\nvar w=p.clientWidth,h=p.clientHeight;\r\nif(w<10) w=800;\r\nif(h<10) h=600;\r\nvar dpr=window.devicePixelRatio||1;\r\nvar bw=Math.round(w*dpr),bh=Math.round(h*dpr);\r\nif(cv.width!==bw||cv.height!==bh){\r\ncv.width=bw;\r\ncv.height=bh;\r\ncv.style.width=w+'px';\r\ncv.style.height=h+'px';\r\ncx.setTransform(dpr,0,0,dpr,0,0);\r\n}\r\n_CW=w;\r\n_CH=h;\r\n}\r\n\r\nfunction render(){\r\nrsz();\r\nvar w=cw(),h=ch();\r\ncx.clearRect(0,0,w,h);\r\ncx.fillStyle='#fefefe';\r\ncx.fillRect(0,0,w,h);\r\ndrGrid();\r\ndrAxes();\r\nvar hr=CHM&&!SOLV;\r\nif(MT==='ninguna'){\r\ndrOrig(1);\r\n}else if(MT==='poligonal'){\r\ndrPoly(hr);\r\n}else if(MT==='paralelogramo'){\r\ndrPara(hr);\r\n}\r\nif(SHC&&!ANM) drComps();\r\nif(SHD&&!ANM) drCoords();\r\n}\r\n\r\nfunction gStep(){\r\nvar p=GU*ZM;\r\nif(p<15) return 5;\r\nif(p<30) return 2;\r\nif(p>200) return .25;\r\nif(p>100) return .5;\r\nreturn 1;\r\n}\r\n\r\nfunction drGrid(){\r\nvar st=gStep();\r\nvar tl=s2w(0,0),br=s2w(cw(),ch());\r\ncx.strokeStyle='#eaeaea';\r\ncx.lineWidth=.5;\r\nvar x0=Math.floor(tl.x\/st)*st,x1=Math.ceil(br.x\/st)*st;\r\nfor(var x=x0;x<=x1;x+=st){\r\nif(Math.abs(x)<1e-9) continue;\r\nvar p=w2s(x,0);\r\ncx.beginPath();cx.moveTo(p.x,0);cx.lineTo(p.x,ch());cx.stroke();\r\n}\r\nvar y0=Math.floor(br.y\/st)*st,y1=Math.ceil(tl.y\/st)*st;\r\nfor(var y=y0;y<=y1;y+=st){\r\nif(Math.abs(y)<1e-9) continue;\r\nvar p=w2s(0,y);\r\ncx.beginPath();cx.moveTo(0,p.y);cx.lineTo(cw(),p.y);cx.stroke();\r\n}\r\n}\r\n\r\nfunction drAxes(){\r\nvar o=w2s(0,0),st=gStep(),tl=s2w(0,0),br=s2w(cw(),ch());\r\ncx.strokeStyle='#444';\r\ncx.lineWidth=1.5;\r\ncx.beginPath();cx.moveTo(0,o.y);cx.lineTo(cw(),o.y);cx.stroke();\r\ncx.beginPath();cx.moveTo(o.x,0);cx.lineTo(o.x,ch());cx.stroke();\r\ncx.fillStyle='#888';\r\ncx.font='10px -apple-system,sans-serif';\r\ncx.textAlign='center';\r\ncx.textBaseline='top';\r\nvar x0=Math.floor(tl.x\/st)*st,x1=Math.ceil(br.x\/st)*st;\r\nfor(var x=x0;x<=x1;x+=st){\r\nif(Math.abs(x)<1e-9) continue;\r\nvar p=w2s(x,0);\r\ncx.strokeStyle='#444';cx.lineWidth=1;\r\ncx.beginPath();cx.moveTo(p.x,o.y-3);cx.lineTo(p.x,o.y+3);cx.stroke();\r\ncx.fillText(Number.isInteger(x)?''+x:x.toFixed(1),p.x,o.y+6);\r\n}\r\ncx.textAlign='right';\r\ncx.textBaseline='middle';\r\nvar y0=Math.floor(br.y\/st)*st,y1=Math.ceil(tl.y\/st)*st;\r\nfor(var y=y0;y<=y1;y+=st){\r\nif(Math.abs(y)<1e-9) continue;\r\nvar p=w2s(0,y);\r\ncx.strokeStyle='#444';cx.lineWidth=1;\r\ncx.beginPath();cx.moveTo(o.x-3,p.y);cx.lineTo(o.x+3,p.y);cx.stroke();\r\ncx.fillText(Number.isInteger(y)?''+y:y.toFixed(1),o.x-7,p.y);\r\n}\r\ncx.textAlign='right';\r\ncx.textBaseline='top';\r\ncx.fillText('O',o.x-6,o.y+6);\r\ncx.fillStyle='#444';\r\nvar xp=w2s(br.x,0);\r\nif(xp.x>o.x+30){\r\ncx.beginPath();cx.moveTo(xp.x-2,o.y);cx.lineTo(xp.x-10,o.y-5);cx.lineTo(xp.x-10,o.y+5);cx.fill();\r\ncx.textAlign='right';cx.textBaseline='bottom';cx.fillText('X',xp.x-4,o.y-6);\r\n}\r\nvar yp=w2s(0,tl.y);\r\nif(yp.y<o.y-30){\r\ncx.beginPath();cx.moveTo(o.x,yp.y+2);cx.lineTo(o.x-5,yp.y+10);cx.lineTo(o.x+5,yp.y+10);cx.fill();\r\ncx.textAlign='left';cx.textBaseline='top';cx.fillText('Y',o.x+8,yp.y+4);\r\n}\r\n}\r\n\r\nfunction drArr(fx,fy,tx,ty,col,lw,hl){\r\nvar dx=tx-fx,dy=ty-fy,ln=Math.hypot(dx,dy);\r\nif(ln<2) return;\r\nvar an=Math.atan2(dy,dx);\r\nhl=hl||Math.min(14,ln*.3);\r\ncx.strokeStyle=col;\r\ncx.fillStyle=col;\r\ncx.lineWidth=lw||2;\r\ncx.lineCap='round';\r\ncx.lineJoin='round';\r\ncx.beginPath();\r\ncx.moveTo(fx,fy);\r\ncx.lineTo(tx-hl*.6*Math.cos(an),ty-hl*.6*Math.sin(an));\r\ncx.stroke();\r\ncx.beginPath();\r\ncx.moveTo(tx,ty);\r\ncx.lineTo(tx-hl*Math.cos(an-.45),ty-hl*Math.sin(an-.45));\r\ncx.lineTo(tx-hl*.55*Math.cos(an),ty-hl*.55*Math.sin(an));\r\ncx.lineTo(tx-hl*Math.cos(an+.45),ty-hl*Math.sin(an+.45));\r\ncx.closePath();\r\ncx.fill();\r\n}\r\n\r\nfunction drDashedArr(fx,fy,tx,ty,col,lw,hl){\r\nvar dx=tx-fx,dy=ty-fy,ln=Math.hypot(dx,dy);\r\nif(ln<2) return;\r\nvar an=Math.atan2(dy,dx);\r\nhl=hl||Math.min(14,ln*.3);\r\ncx.strokeStyle=col;\r\ncx.fillStyle=col;\r\ncx.lineWidth=lw||2;\r\ncx.lineCap='round';\r\ncx.lineJoin='round';\r\ncx.setLineDash([8,5]);\r\ncx.beginPath();\r\ncx.moveTo(fx,fy);\r\ncx.lineTo(tx-hl*.6*Math.cos(an),ty-hl*.6*Math.sin(an));\r\ncx.stroke();\r\ncx.setLineDash([]);\r\ncx.beginPath();\r\ncx.moveTo(tx,ty);\r\ncx.lineTo(tx-hl*Math.cos(an-.45),ty-hl*Math.sin(an-.45));\r\ncx.lineTo(tx-hl*.55*Math.cos(an),ty-hl*.55*Math.sin(an));\r\ncx.lineTo(tx-hl*Math.cos(an+.45),ty-hl*Math.sin(an+.45));\r\ncx.closePath();\r\ncx.fill();\r\n}\r\n\r\nfunction drDash(x1,y1,x2,y2,col,lw){\r\ncx.strokeStyle=col;\r\ncx.lineWidth=lw||1;\r\ncx.setLineDash([6,4]);\r\ncx.beginPath();cx.moveTo(x1,y1);cx.lineTo(x2,y2);cx.stroke();\r\ncx.setLineDash([]);\r\n}\r\n\r\nfunction drLbl(txt,x,y,col,sz,bd){\r\ncx.font=(bd?'bold ':'')+(sz||13)+'px -apple-system,sans-serif';\r\ncx.fillStyle=col||'#333';\r\ncx.textAlign='center';\r\ncx.textBaseline='middle';\r\ncx.fillText(txt,x,y);\r\n}\r\n\r\nfunction drOrig(al){\r\nvar o=w2s(0,0);\r\nV.forEach(function(v,i){\r\nif(v.m<1e-9) return;\r\nvar tip=w2s(v.cx,v.cy);\r\ncx.globalAlpha=al!==undefined?al:1;\r\nvar lw=(HI===i&&!ANM)?3:2.2;\r\ndrArr(o.x,o.y,tip.x,tip.y,v.c,lw);\r\ndrLbl(v.n,tip.x+14,tip.y-14,v.c,13,true);\r\ncx.globalAlpha=1;\r\n});\r\n}\r\n\r\nfunction drPoly(hr){\r\nvar o=w2s(0,0),anim=ANM,comp=ACP||!anim;\r\nif(comp||!anim) drOrig(.3);\r\n\r\nvar px=0,py=0;\r\nvar polyLabels=V.map(function(v){return 'Dibujando '+(v.s===-1?'-':'')+v.n});\r\npolyLabels.push('Trazando resultante R');\r\n\r\nfor(var i=0;i<V.length;i++){\r\nif(anim&&i>AST) break;\r\nvar v=V[i],ex=v.s*v.cx,ey=v.s*v.cy;\r\nvar t=1;\r\nif(anim&&i===AST) t=APR;\r\nvar from=w2s(px,py),toF=w2s(px+ex,py+ey);\r\nvar toX=from.x+(toF.x-from.x)*t,toY=from.y+(toF.y-from.y)*t;\r\nif(i>0&&(comp||(anim&&i<=AST))) drDash(o.x,o.y,from.x,from.y,'#bbb',.8);\r\nif(v.s===-1) drDashedArr(from.x,from.y,toX,toY,v.c,2.5);\r\nelse drArr(from.x,from.y,toX,toY,v.c,2.5);\r\nif(t>.5){\r\nvar mx=(from.x+toX)\/2,my=(from.y+toY)\/2;\r\nvar ddx=toX-from.x,ddy=toY-from.y,ll=Math.hypot(ddx,ddy);\r\nif(ll>20){\r\nvar nx=-ddy\/ll*16,ny=ddx\/ll*16;\r\ncx.globalAlpha=t;\r\ndrLbl((v.s===-1?'-':'')+v.n,mx+nx,my+ny,v.c,12,true);\r\ncx.globalAlpha=1;\r\n}\r\n}\r\npx+=ex*t;\r\npy+=ey*t;\r\n}\r\n\r\nvar canR=comp||(anim&&AST>=V.length);\r\nif(canR&&!hr){\r\nvar tR=1;\r\nif(anim&&AST===V.length) tR=APR;\r\nvar rE=w2s(px,py);\r\nvar rx=o.x+(rE.x-o.x)*tR,ry=o.y+(rE.y-o.y)*tR;\r\ndrArr(o.x,o.y,rx,ry,RCOL,3.5,16);\r\nif(tR>.5) drLbl('R',rx+16,ry-16,RCOL,15,true);\r\n}\r\n\r\nif(anim&&AST<V.length+1) showASL(polyLabels[AST]||'');\r\nelse if(anim) hideASL();\r\n}\r\n\r\nfunction drPara(hr){\r\nvar o=w2s(0,0),anim=ANM,comp=ACP||!anim;\r\nvar vA=V[0],vB=V[1];\r\nvar eAx=vA.s*vA.cx,eAy=vA.s*vA.cy;\r\nvar eBx=vB.s*vB.cx,eBy=vB.s*vB.cy;\r\nvar tA=w2s(eAx,eAy),tB=w2s(eBx,eBy),dg=w2s(eAx+eBx,eAy+eBy);\r\n\r\nvar paraLabels=[\r\n'Dibujando '+(vA.s===-1?'-':'')+vA.n,\r\n'Dibujando '+(vB.s===-1?'-':'')+vB.n,\r\n'Trazando paralela a '+(vB.s===-1?'-':'')+vB.n+' desde punta de '+(vA.s===-1?'-':'')+vA.n,\r\n'Trazando paralela a '+(vA.s===-1?'-':'')+vA.n+' desde punta de '+(vB.s===-1?'-':'')+vB.n,\r\n'Trazando diagonal resultante R'\r\n];\r\n\r\nif(!anim){\r\ndrOrig(1);\r\nif(SHP){\r\ncx.fillStyle='rgba(13,148,136,.07)';\r\ncx.beginPath();\r\ncx.moveTo(o.x,o.y);cx.lineTo(tA.x,tA.y);cx.lineTo(dg.x,dg.y);cx.lineTo(tB.x,tB.y);\r\ncx.closePath();cx.fill();\r\ndrDash(tA.x,tA.y,dg.x,dg.y,vB.c,1.5);\r\ndrDash(tB.x,tB.y,dg.x,dg.y,vA.c,1.5);\r\nif(vA.s===-1){drDashedArr(o.x,o.y,tA.x,tA.y,vA.c,2);drLbl('-'+vA.n,tA.x+14,tA.y-14,vA.c,12,true)}\r\nif(vB.s===-1){drDashedArr(o.x,o.y,tB.x,tB.y,vB.c,2);drLbl('-'+vB.n,tB.x+14,tB.y-14,vB.c,12,true)}\r\n}\r\nif(!hr) drRes();\r\nreturn;\r\n}\r\n\r\nvar step=AST,t=APR;\r\n\r\nif(step>=0){\r\nvar t0=step===0?t:1;\r\nvar ax=o.x+(tA.x-o.x)*t0,ay=o.y+(tA.y-o.y)*t0;\r\nif(vA.s===-1) drDashedArr(o.x,o.y,ax,ay,vA.c,2.5);\r\nelse drArr(o.x,o.y,ax,ay,vA.c,2.5);\r\nif(t0>.6) drLbl((vA.s===-1?'-':'')+vA.n,ax+14,ay-14,vA.c,12,true);\r\n}\r\nif(step>=1){\r\nvar t1=step===1?t:1;\r\nvar bx=o.x+(tB.x-o.x)*t1,by=o.y+(tB.y-o.y)*t1;\r\nif(vB.s===-1) drDashedArr(o.x,o.y,bx,by,vB.c,2.5);\r\nelse drArr(o.x,o.y,bx,by,vB.c,2.5);\r\nif(t1>.6) drLbl((vB.s===-1?'-':'')+vB.n,bx+14,by-14,vB.c,12,true);\r\n}\r\nif(step>=2){\r\nvar t2=step===2?t:1;\r\ncx.fillStyle='rgba(13,148,136,.07)';\r\ncx.beginPath();\r\ncx.moveTo(o.x,o.y);cx.lineTo(tA.x,tA.y);\r\ncx.lineTo(tA.x+(dg.x-tA.x)*t2,tA.y+(dg.y-tA.y)*t2);\r\ncx.lineTo(tA.x+(tB.x-o.x)*t2,tA.y+(tB.y-o.y)*t2);\r\ncx.closePath();cx.fill();\r\ndrDash(tA.x,tA.y,tA.x+(dg.x-tA.x)*t2,tA.y+(dg.y-tA.y)*t2,vB.c,1.5);\r\n}\r\nif(step>=3){\r\nvar t3=step===3?t:1;\r\ncx.fillStyle='rgba(13,148,136,.07)';\r\ncx.beginPath();\r\ncx.moveTo(o.x,o.y);cx.lineTo(tA.x,tA.y);cx.lineTo(dg.x,dg.y);\r\ncx.lineTo(tB.x+(dg.x-tB.x)*t3,tB.y+(dg.y-tB.y)*t3);\r\ncx.closePath();cx.fill();\r\ndrDash(tB.x,tB.y,tB.x+(dg.x-tB.x)*t3,tB.y+(dg.y-tB.y)*t3,vA.c,1.5);\r\n}\r\nif(step>=4){\r\nvar t4=step===4?t:1;\r\ncx.fillStyle='rgba(13,148,136,.07)';\r\ncx.beginPath();\r\ncx.moveTo(o.x,o.y);cx.lineTo(tA.x,tA.y);cx.lineTo(dg.x,dg.y);cx.lineTo(tB.x,tB.y);\r\ncx.closePath();cx.fill();\r\ndrDash(tA.x,tA.y,dg.x,dg.y,vB.c,1.5);\r\ndrDash(tB.x,tB.y,dg.x,dg.y,vA.c,1.5);\r\nif(!hr){\r\nvar rx=o.x+(dg.x-o.x)*t4,ry=o.y+(dg.y-o.y)*t4;\r\ndrArr(o.x,o.y,rx,ry,RCOL,3.5,16);\r\nif(t4>.5) drLbl('R',rx+16,ry-16,RCOL,15,true);\r\n}\r\n}\r\nif(step<5) showASL(paraLabels[step]||'');\r\nelse hideASL();\r\n}\r\n\r\nfunction drRes(){\r\nvar r=calcR();\r\nif(r.m<1e-9) return;\r\nvar o=w2s(0,0),tip=w2s(r.rx,r.ry);\r\ndrArr(o.x,o.y,tip.x,tip.y,RCOL,3.5,16);\r\ndrLbl('R',tip.x+16,tip.y-16,RCOL,15,true);\r\n}\r\n\r\nfunction drComps(){\r\nvar o=w2s(0,0);\r\nV.forEach(function(v){\r\nif(v.m<1e-9) return;\r\nvar tip=w2s(v.cx,v.cy),tX=w2s(v.cx,0),tY=w2s(0,v.cy);\r\ndrDash(o.x,o.y,tX.x,tX.y,v.c,1);\r\ndrDash(tX.x,tX.y,tip.x,tip.y,v.c,1);\r\ndrDash(o.x,o.y,tY.x,tY.y,v.c,1);\r\ndrDash(tY.x,tY.y,tip.x,tip.y,v.c,1);\r\ncx.fillStyle=v.c;\r\ncx.beginPath();cx.arc(tX.x,tX.y,3,0,Math.PI*2);cx.fill();\r\ncx.beginPath();cx.arc(tY.x,tY.y,3,0,Math.PI*2);cx.fill();\r\n});\r\n}\r\n\r\nfunction drCoords(){\r\nvar hr=CHM&&!SOLV;\r\nV.forEach(function(v){\r\nif(v.m<1e-9) return;\r\nvar tip=w2s(v.cx,v.cy);\r\ncx.font='10px \"SF Mono\",Consolas,monospace';\r\ncx.fillStyle=v.c;\r\ncx.textAlign='left';\r\ncx.textBaseline='top';\r\ncx.fillText('('+fm(v.cx)+', '+fm(v.cy)+')',tip.x+8,tip.y+4);\r\n});\r\nif(MT!=='ninguna'&&!hr){\r\nvar r=calcR();\r\nif(r.m>1e-9){\r\nvar tip=w2s(r.rx,r.ry);\r\ncx.font='10px \"SF Mono\",Consolas,monospace';\r\ncx.fillStyle=RCOL;\r\ncx.textAlign='left';\r\ncx.textBaseline='top';\r\ncx.fillText('('+fm(r.rx)+', '+fm(r.ry)+')',tip.x+8,tip.y+4);\r\n}\r\n}\r\n}\r\n\r\nfunction showASL(txt){aslEl.textContent=txt;aslEl.classList.add('vis')}\r\nfunction hideASL(){aslEl.classList.remove('vis')}\r\n\r\nfunction startAn(){\r\nif(MT==='paralelogramo'&&NV!==2){toast('El paralelogramo requiere 2 vectores','e');return}\r\nANM=true;ACP=false;AST=0;APR=0;ATM=performance.now();\r\ndocument.getElementById('ba').style.display='none';\r\ndocument.getElementById('bs').style.display='block';\r\nrequestAnimationFrame(anLoop);\r\n}\r\n\r\nfunction stopAn(){\r\nANM=false;ACP=true;hideASL();\r\ndocument.getElementById('ba').style.display='';\r\ndocument.getElementById('bs').style.display='none';\r\nrender();\r\n}\r\n\r\nfunction anLoop(ts){\r\nif(!ANM) return;\r\nvar el=ts-ATM,sd=700;\r\nvar tot=MT==='paralelogramo'?5:V.length+1;\r\nAST=Math.floor(el\/sd);\r\nAPR=ease((el%sd)\/sd);\r\nif(AST>=tot){stopAn();return}\r\nrender();\r\nrequestAnimationFrame(anLoop);\r\n}\r\n\r\nfunction gmp(e){\r\nvar r=cv.getBoundingClientRect();\r\nreturn{\r\nx:(e.touches?e.touches[0].clientX:e.clientX)-r.left,\r\ny:(e.touches?e.touches[0].clientY:e.clientY)-r.top\r\n};\r\n}\r\n\r\nfunction gvat(sx,sy){\r\nfor(var i=V.length-1;i>=0;i--){\r\nvar v=V[i];\r\nif(v.m<1e-9) continue;\r\nvar t=w2s(v.cx,v.cy);\r\nif(Math.hypot(sx-t.x,sy-t.y)<TR+4) return i;\r\n}\r\nreturn-1;\r\n}\r\n\r\nfunction onDown(e){\r\nif(ANM) return;\r\nvar p=gmp(e);\r\nif(e.button===2||e.button===1){\r\ne.preventDefault();PAN=true;LMX=p.x;LMY=p.y;\r\ncv.classList.add('grabbing');return;\r\n}\r\nvar idx=gvat(p.x,p.y);\r\nif(idx>=0){DRG=true;DI=idx;cv.classList.add('grabbing')}\r\nelse{PAN=true;LMX=p.x;LMY=p.y;cv.classList.add('grabbing')}\r\n}\r\n\r\nfunction onMove(e){\r\nvar p=gmp(e);\r\nif(DRG){\r\ne.preventDefault();\r\nvar w=s2w(p.x,p.y),v=V[DI];\r\nv.cx=w.x;v.cy=w.y;\r\nv.m=Math.hypot(v.cx,v.cy);\r\nv.a=nang(deg(Math.atan2(v.cy,v.cx)));\r\nif(v.m<1e-9){v.m=0;v.a=0}\r\nACP=false;\r\n\/* --- FIX: pasar -1 para que se actualicen TODOS los campos, incluyendo el vector arrastrado --- *\/\r\nupCardVals(-1);upAnal();upComp2();render();\r\nreturn;\r\n}\r\nif(PAN){\r\ne.preventDefault();\r\nPX+=p.x-LMX;PY+=p.y-LMY;\r\nLMX=p.x;LMY=p.y;render();return;\r\n}\r\nvar idx=gvat(p.x,p.y);\r\nif(idx!==HI){HI=idx;cv.classList.toggle('grab',idx>=0);render()}\r\n}\r\n\r\nfunction onUp(){DRG=false;DI=-1;PAN=false;cv.classList.remove('grabbing');cv.classList.remove('grab')}\r\n\r\nfunction onWh(e){\r\ne.preventDefault();\r\nvar p=gmp(e),w=s2w(p.x,p.y);\r\nvar f=e.deltaY<0?1.12:1\/1.12;\r\nZM=Math.max(.12,Math.min(8,ZM*f));\r\nPX=p.x-cw()\/2-w.x*GU*ZM;\r\nPY=p.y-ch()\/2+w.y*GU*ZM;\r\nupZI();render();\r\n}\r\n\r\nfunction upZI(){document.getElementById('zi').textContent='Zoom: '+Math.round(ZM*100)+'%'}\r\n\r\ncv.addEventListener('mousedown',onDown);\r\nwindow.addEventListener('mousemove',onMove);\r\nwindow.addEventListener('mouseup',onUp);\r\ncv.addEventListener('wheel',onWh,{passive:false});\r\ncv.addEventListener('contextmenu',function(e){e.preventDefault()});\r\ncv.addEventListener('touchstart',function(e){if(e.touches.length===1)onDown(e)},{passive:false});\r\ncv.addEventListener('touchmove',function(e){if(e.touches.length===1)onMove(e)},{passive:false});\r\ncv.addEventListener('touchend',onUp);\r\n\r\nwindow.addEventListener('keydown',function(e){\r\nif(e.target.tagName==='INPUT') return;\r\nvar s=20;\r\nswitch(e.key){\r\ncase'ArrowLeft':PX+=s;render();break;\r\ncase'ArrowRight':PX-=s;render();break;\r\ncase'ArrowUp':PY+=s;render();break;\r\ncase'ArrowDown':PY-=s;render();break;\r\ncase'+':case'=':ZM=Math.min(8,ZM*1.15);upZI();render();break;\r\ncase'-':ZM=Math.max(.12,ZM\/1.15);upZI();render();break;\r\ncase'r':case'R':ZM=1;PX=0;PY=0;upZI();render();break;\r\ncase'Escape':if(ANM)stopAn();break;\r\n}\r\n});\r\n\r\nfunction mkCards(){\r\nvar c=document.getElementById('vcc');\r\nc.innerHTML='';\r\nvar hc=CHM&&!SOLV;\r\nV.forEach(function(v,i){\r\nvar d=document.createElement('div');\r\nd.className='vc';\r\nd.style.borderLeftColor=v.c;\r\nd.innerHTML='<div class=\"vh\">'\r\n+'<button class=\"sb '+(v.s===1?'pos':'neg')+'\" data-i=\"'+i+'\">'+(v.s===1?'+':'−')+'<\/button>'\r\n+'<span class=\"vn\" style=\"color:'+v.c+'\">Vector '+v.n+'<\/span><\/div>'\r\n+'<div class=\"ir\"><div class=\"ig\"><label>|'+v.n+'|<\/label>'\r\n+'<input type=\"number\" step=\"0.01\" min=\"0\" id=\"vm'+i+'\" value=\"'+fm(v.m)+'\"><\/div>'\r\n+'<div class=\"ig\"><label>θ (°)<\/label>'\r\n+'<input type=\"number\" step=\"0.01\" id=\"va'+i+'\" value=\"'+fm(v.a)+'\"><\/div><\/div>'\r\n+'<div class=\"ir\"><div class=\"ig\"><label>'+v.n+'<sub>x<\/sub><\/label>'\r\n+'<input type=\"number\" step=\"0.01\" id=\"vx'+i+'\" value=\"'+(hc?'':fm(v.cx))+'\" class=\"'+(hc?'hv':'')+'\"><\/div>'\r\n+'<div class=\"ig\"><label>'+v.n+'<sub>y<\/sub><\/label>'\r\n+'<input type=\"number\" step=\"0.01\" id=\"vy'+i+'\" value=\"'+(hc?'':fm(v.cy))+'\" class=\"'+(hc?'hv':'')+'\"><\/div><\/div>';\r\nc.appendChild(d);\r\nd.querySelector('.sb').addEventListener('click',function(){togSign(i)});\r\nd.querySelector('#vm'+i).addEventListener('input',function(){onVI(i,'mag')});\r\nd.querySelector('#va'+i).addEventListener('input',function(){onVI(i,'ang')});\r\nd.querySelector('#vx'+i).addEventListener('input',function(){onVI(i,'cx')});\r\nd.querySelector('#vy'+i).addEventListener('input',function(){onVI(i,'cy')});\r\n});\r\n}\r\n\r\nfunction togSign(i){\r\nV[i].s=V[i].s===1?-1:1;\r\nACP=false;mkCards();upExpr();upAnal();upComp2();render();\r\n}\r\n\r\nfunction upCardVals(ci){\r\nvar hc=CHM&&!SOLV;\r\nV.forEach(function(v,i){\r\nvar me=document.getElementById('vm'+i),ae=document.getElementById('va'+i);\r\nvar xe=document.getElementById('vx'+i),ye=document.getElementById('vy'+i);\r\nif(!me) return;\r\n\/* Cuando ci===-1 se actualizan TODOS los campos (caso: arrastre desde canvas) *\/\r\nif(ci===-1||i!==ci) me.value=fm(v.m);\r\nif(ci===-1||i!==ci) ae.value=fm(v.a);\r\nif(hc){xe.value='';ye.value='';xe.classList.add('hv');ye.classList.add('hv')}\r\nelse{\r\nif(ci===-1||i!==ci) xe.value=fm(v.cx);\r\nif(ci===-1||i!==ci) ye.value=fm(v.cy);\r\nxe.classList.remove('hv');ye.classList.remove('hv');\r\n}\r\n});\r\n}\r\n\r\nfunction onVI(i,f){\r\nvar v=V[i];\r\nvar me=document.getElementById('vm'+i),ae=document.getElementById('va'+i);\r\nvar xe=document.getElementById('vx'+i),ye=document.getElementById('vy'+i);\r\nif(f==='mag'||f==='ang'){\r\nv.m=Math.max(0,parseFloat(me.value)||0);\r\nv.a=parseFloat(ae.value)||0;\r\nupPolar(i);\r\nxe.value=fm(v.cx);ye.value=fm(v.cy);\r\n}else{\r\nv.cx=parseFloat(xe.value)||0;\r\nv.cy=parseFloat(ye.value)||0;\r\nupComp(i);\r\nme.value=fm(v.m);ae.value=fm(v.a);\r\n}\r\nACP=false;upExpr();upAnal();upComp2();render();\r\n}\r\n\r\nfunction upMT(){\r\nvar rp=document.getElementById('rp'),cw2=document.getElementById('cw');\r\nvar pn=document.getElementById('pn2'),ml=document.getElementById('ml');\r\nvar baEl=document.getElementById('ba'),bsEl=document.getElementById('bs');\r\n\r\nif(MT==='ninguna'){\r\nml.textContent='SIN RESULTANTE';\r\nrp.classList.remove('dis');\r\ncw2.style.display='none';\r\npn.innerHTML='';\r\nbaEl.style.display='none';\r\nbsEl.style.display='none';\r\nif(ANM) stopAn();\r\n}else if(MT==='poligonal'){\r\nml.textContent='POLIGONAL';\r\nrp.classList.remove('dis');\r\ncw2.style.display='none';\r\npn.innerHTML='';\r\nbaEl.style.display='';\r\nbsEl.style.display='none';\r\n}else if(MT==='paralelogramo'){\r\nif(NV!==2){\r\nrp.classList.add('dis');cw2.style.display='none';\r\npn.innerHTML='<div class=\"pn\">El paralelogramo solo aplica con 2 vectores.<\/div>';\r\nMT='poligonal';\r\ndocument.querySelector('input[name=\"mt\"][value=\"poligonal\"]').checked=true;\r\nml.textContent='POLIGONAL';\r\nbaEl.style.display='';\r\nbsEl.style.display='none';\r\n}else{\r\nml.textContent='PARALELOGRAMO';\r\nrp.classList.remove('dis');\r\ncw2.style.display='flex';\r\npn.innerHTML='';\r\nbaEl.style.display='';\r\nbsEl.style.display='none';\r\n}\r\n}\r\nACP=false;upExpr();\r\n}\r\n\r\nfunction upExpr(){\r\nvar el=document.getElementById('el');\r\nvar parts=V.map(function(v,i){\r\nif(i===0) return(v.s===-1?'-':'')+v.n;\r\nreturn(v.s===-1?' - ':' + ')+v.n;\r\n});\r\nif(MT==='ninguna') el.textContent=parts.join('');\r\nelse el.textContent='R = '+parts.join('');\r\n}\r\n\r\nfunction upAnal(){\r\nvar s=document.getElementById('ans'),hr=CHM&&!SOLV;\r\nif(hr){s.innerHTML='<p class=\"it\">Componentes y resultante ocultos en modo desafio.<\/p>';return}\r\n\r\nif(MT==='ninguna'){\r\nvar h='<table class=\"at\"><tr><th>Vector<\/th><th>X<\/th><th>Y<\/th><\/tr>';\r\nV.forEach(function(v){\r\nvar lbl=v.s===-1?'-'+v.n:v.n;\r\nh+='<tr><td style=\"color:'+v.c+';font-weight:700\">'+lbl+'<\/td><td>'+fm(v.cx)+'<\/td><td>'+fm(v.cy)+'<\/td><\/tr>';\r\n});\r\nh+='<\/table><p class=\"it\">Selecciona un metodo grafico para calcular la resultante.<\/p>';\r\ns.innerHTML=h;return;\r\n}\r\n\r\nvar h='<table class=\"at\"><tr><th>Vector<\/th><th>Efectiva X<\/th><th>Efectiva Y<\/th><\/tr>';\r\nV.forEach(function(v){\r\nvar ex=v.s*v.cx,ey=v.s*v.cy;\r\nvar lbl=v.s===-1?'-'+v.n:v.n;\r\nh+='<tr><td style=\"color:'+v.c+';font-weight:700\">'+lbl+'<\/td><td>'+fm(ex)+'<\/td><td>'+fm(ey)+'<\/td><\/tr>';\r\n});\r\nvar r=calcR();\r\nh+='<tr class=\"sr\"><td>Σ<\/td><td>'+fm(r.rx)+'<\/td><td>'+fm(r.ry)+'<\/td><\/tr><\/table>';\r\nh+='<div class=\"fs\">';\r\nvar sxP=V.map(function(v){return fms(v.s*v.cx)}).join(' + ');\r\nh+='<div>ΣX = '+sxP+' = '+fm(r.rx)+'<\/div>';\r\nvar syP=V.map(function(v){return fms(v.s*v.cy)}).join(' + ');\r\nh+='<div>ΣY = '+syP+' = '+fm(r.ry)+'<\/div>';\r\nh+='<div class=\"sp\"><\/div>';\r\nvar rx2=(r.rx*r.rx).toFixed(2),ry2=(r.ry*r.ry).toFixed(2);\r\nvar sm=(r.rx*r.rx+r.ry*r.ry).toFixed(2);\r\nh+='<div>R = √('+fm(r.rx)+'² + '+fm(r.ry)+'²)<\/div>';\r\nh+='<div>R = √('+rx2+' + '+ry2+')<\/div>';\r\nh+='<div>R = √('+sm+')<\/div>';\r\nh+='<div class=\"rl2\">R = '+fm(r.m)+'<\/div>';\r\nh+='<div class=\"sp\"><\/div>';\r\nh+='<div>θ = atan2('+fm(r.ry)+', '+fm(r.rx)+')<\/div>';\r\nh+='<div class=\"rl2\">θ = '+fm(r.a)+'°<\/div><\/div>';\r\ns.innerHTML=h;\r\n}\r\n\r\nfunction upComp2(){\r\nvar s=document.getElementById('cps'),hr=CHM&&!SOLV,r=calcR();\r\nif(hr){s.innerHTML='<p class=\"it\">Disponible al mostrar la solucion.<\/p>';return}\r\nif(MT==='ninguna'){s.innerHTML='<p class=\"it\">Selecciona un metodo grafico para ver la comparacion.<\/p>';return}\r\nvar mn=MT==='poligonal'?'Poligonal':'Paralelogramo';\r\nvar h='<table class=\"ct\"><tr><th>Metodo<\/th><th>Modulo<\/th><th>Angulo<\/th><\/tr>';\r\nh+='<tr><td>Grafico ('+mn+')<\/td><td>'+fm(r.m)+'<\/td><td>'+fm(r.a)+'°<\/td><\/tr>';\r\nh+='<tr><td>Analitico<\/td><td>'+fm(r.m)+'<\/td><td>'+fm(r.a)+'°<\/td><\/tr><\/table>';\r\nh+='<div class=\"mm\">✓ Ambos metodos producen el mismo resultado.<\/div>';\r\ns.innerHTML=h;\r\n}\r\n\r\nfunction upAll(){upCardVals(-1);upExpr();upAnal();upComp2();render()}\r\n\r\nfunction genEx(){\r\nvar n=Math.floor(Math.random()*4)+1;\r\nNV=n;V=[];\r\nfor(var i=0;i<n;i++){\r\nvar m=Math.round((Math.random()*8+1.5)*100)\/100;\r\nvar a=Math.round(Math.random()*3600)\/10;\r\nvar s=Math.random()<.35?-1:1;\r\nV.push(mkVec(i,m,a,s));\r\n}\r\nACP=false;SOLV=!CHM;\r\ndocument.querySelectorAll('#nb button').forEach(function(b){b.classList.toggle('on',parseInt(b.dataset.n)===n)});\r\nupMT();mkCards();upAll();\r\ntoast('Ejercicio generado: '+n+' vector'+(n>1?'es':''),'i');\r\n}\r\n\r\nfunction showSol(){SOLV=true;mkCards();upAll();toast('Solucion revelada','i')}\r\n\r\nfunction verify(){\r\nvar im=parseFloat(document.getElementById('vm2').value);\r\nvar ia=parseFloat(document.getElementById('va2').value);\r\nvar re=document.getElementById('vres');\r\nif(isNaN(im)||isNaN(ia)){\r\nre.className='vr no';re.style.display='block';\r\nre.textContent='Ingresa ambos valores.';return;\r\n}\r\nvar r=calcR();\r\nvar me=r.m>1e-9?Math.abs(im-r.m)\/r.m*100:(Math.abs(im)>.01?100:0);\r\nvar ae=Math.abs(ia-r.a);if(ae>180) ae=360-ae;\r\nre.style.display='block';\r\nif(me<2&&ae<2){\r\nre.className='vr ok';\r\nre.innerHTML='✓ Correcto. Respuesta dentro del margen de tolerancia.';\r\ntoast('Respuesta correcta','s');\r\n}else{\r\nre.className='vr no';\r\nre.innerHTML='✗ Incorrecto.<br>Error modulo: '+me.toFixed(1)+'%<br>Error angulo: '+ae.toFixed(1)+'°';\r\ntoast('Respuesta incorrecta','e');\r\n}\r\n}\r\n\r\nfunction toast(msg,t){\r\nt=t||'i';\r\nvar d=document.createElement('div');\r\nd.className='toast toast-'+t;\r\nd.textContent=msg;\r\ndocument.getElementById('tc').appendChild(d);\r\nrequestAnimationFrame(function(){d.classList.add('show')});\r\nsetTimeout(function(){d.classList.remove('show');setTimeout(function(){d.remove()},300)},2800);\r\n}\r\n\r\nfunction tryInit(){\r\nrsz();\r\nvar p=cv.parentElement;\r\nif(p.clientWidth>10&&p.clientHeight>10){\r\nvar nb=document.getElementById('nb');\r\n[1,2,3,4].forEach(function(n){\r\nvar b=document.createElement('button');\r\nb.dataset=n;\r\nb.textContent=n;\r\nif(n===NV) b.classList.add('on');\r\nb.addEventListener('click',function(){\r\ndocument.querySelectorAll('#nb button').forEach(function(x){x.classList.remove('on')});\r\nb.classList.add('on');setNV(n);\r\n});\r\nnb.appendChild(b);\r\n});\r\n\r\ndocument.querySelectorAll('input[name=\"mt\"]').forEach(function(r){\r\nr.addEventListener('change',function(){MT=r.value;ACP=false;upMT();render()});\r\n});\r\n\r\ndocument.getElementById('cp').addEventListener('change',function(e){SHP=e.target.checked;render()});\r\ndocument.getElementById('cc').addEventListener('change',function(e){SHC=e.target.checked;render()});\r\ndocument.getElementById('cd').addEventListener('change',function(e){SHD=e.target.checked;render()});\r\ndocument.getElementById('ba').addEventListener('click',startAn);\r\ndocument.getElementById('bs').addEventListener('click',stopAn);\r\ndocument.getElementById('zin').addEventListener('click',function(){ZM=Math.min(8,ZM*1.25);upZI();render()});\r\ndocument.getElementById('zout').addEventListener('click',function(){ZM=Math.max(.12,ZM\/1.25);upZI();render()});\r\ndocument.getElementById('zrst').addEventListener('click',function(){ZM=1;PX=0;PY=0;upZI();render()});\r\ndocument.getElementById('bg').addEventListener('click',genEx);\r\ndocument.getElementById('bsol').addEventListener('click',showSol);\r\ndocument.getElementById('bv').addEventListener('click',verify);\r\ndocument.getElementById('chm').addEventListener('change',function(e){\r\nCHM=e.target.checked;SOLV=!CHM;\r\ndocument.getElementById('vsec').style.display=CHM?'block':'none';\r\ndocument.getElementById('vres').style.display='none';\r\nif(CHM){document.getElementById('vm2').value='';document.getElementById('va2').value=''}\r\nmkCards();upAll();\r\n});\r\n\r\ninitV();upZI();\r\nif(window.ResizeObserver) new ResizeObserver(function(){render()}).observe(cv.parentElement);\r\n}else{\r\nsetTimeout(tryInit,60);\r\n}\r\n}\r\n\r\nif(document.readyState==='complete') tryInit();\r\nelse window.addEventListener('load',tryInit);\r\n<\/script>\r\n\r\n<style>\r\n.btn-guia {\r\nposition: fixed;\r\nbottom: 24px;\r\nleft: 24px;\r\nz-index: 999;\r\nbackground: #3fb950;\r\ncolor: #0d1117;\r\nfont-family: 'Space Grotesk', sans-serif;\r\nfont-size: 0.82rem;\r\nfont-weight: 700;\r\nletter-spacing: 1px;\r\ntext-transform: uppercase;\r\npadding: 10px 18px;\r\nborder-radius: 8px;\r\nborder: none;\r\ncursor: pointer;\r\nbox-shadow: 0 4px 20px rgba(63,185,80,0.35);\r\ntransition: transform 0.2s, box-shadow 0.2s;\r\ndisplay: flex;\r\nalign-items: center;\r\ngap: 8px;\r\n}\r\n.btn-guia:hover {\r\ntransform: translateY(-2px);\r\nbox-shadow: 0 6px 24px rgba(63,185,80,0.5);\r\n}\r\n.btn-guia svg { width: 15px; height: 15px; flex-shrink: 0; }\r\n.guia-panel {\r\nposition: fixed;\r\nbottom: 72px;\r\nleft: 24px;\r\nwidth: 400px;\r\nmax-height: 70vh;\r\nz-index: 1000;\r\nbackground: #ffffff;\r\nborder: 1px solid #d0d7de;\r\nborder-radius: 12px;\r\nbox-shadow: 0 16px 48px rgba(0,0,0,0.4);\r\ndisplay: none;\r\nflex-direction: column;\r\noverflow: hidden;\r\nfont-family: 'Space Grotesk', sans-serif;\r\n}\r\n.guia-panel.visible { display: flex; }\r\n.guia-header {\r\ndisplay: flex;\r\njustify-content: space-between;\r\nalign-items: center;\r\npadding: 12px 16px;\r\nborder-bottom: 1px solid #d0d7de;\r\nflex-shrink: 0;\r\nbackground: #f6f8fa;\r\n}\r\n.guia-header-title {\r\ndisplay: flex;\r\nalign-items: center;\r\ngap: 8px;\r\nfont-size: 0.85rem;\r\nfont-weight: 700;\r\ncolor: #1f2328;\r\n}\r\n.guia-header-title svg { width: 15px; height: 15px; color: #3fb950; }\r\n.guia-close {\r\nbackground: none;\r\nborder: none;\r\ncolor: #636c76;\r\nfont-size: 1rem;\r\ncursor: pointer;\r\npadding: 2px 7px;\r\nborder-radius: 4px;\r\ntransition: color 0.2s, background 0.2s;\r\nline-height: 1;\r\n}\r\n.guia-close:hover { color: #1f2328; background: rgba(0,0,0,0.06); }\r\n.guia-body {\r\noverflow-y: auto;\r\npadding: 18px 18px 20px;\r\ncolor: #1f2328;\r\nfont-size: 0.83rem;\r\nline-height: 1.65;\r\nbackground: #ffffff;\r\n}\r\n.guia-body::-webkit-scrollbar { width: 5px; }\r\n.guia-body::-webkit-scrollbar-track { background: transparent; }\r\n.guia-body::-webkit-scrollbar-thumb { background: #d0d7de; border-radius: 3px; }\r\n.guia-section-title {\r\nfont-size: 1rem;\r\nfont-weight: 700;\r\ncolor: #1f2328;\r\nmargin: 0 0 12px 0;\r\npadding-bottom: 8px;\r\nborder-bottom: 1px solid #d0d7de;\r\n}\r\n.guia-block { margin-bottom: 14px; }\r\n.guia-label {\r\nfont-size: 0.72rem;\r\ntext-transform: uppercase;\r\nletter-spacing: 1px;\r\ncolor: #636c76;\r\nmargin-bottom: 4px;\r\n}\r\n.guia-text { color: #1f2328; }\r\n.guia-formula {\r\nbackground: #f6f8fa;\r\nborder: 1px solid #d0d7de;\r\nborder-radius: 6px;\r\npadding: 10px 14px;\r\ntext-align: center;\r\nfont-family: 'JetBrains Mono', monospace;\r\nfont-size: 0.88rem;\r\ncolor: #0550ae;\r\nmargin: 10px 0;\r\n}\r\n.guia-steps { list-style: none; margin: 0; padding: 0; counter-reset: steps; }\r\n.guia-steps li {\r\ncounter-increment: steps;\r\ndisplay: flex;\r\ngap: 10px;\r\nmargin-bottom: 8px;\r\nalign-items: flex-start;\r\ncolor: #1f2328;\r\n}\r\n.guia-steps li::before {\r\ncontent: counter(steps);\r\nbackground: #dafbe1;\r\ncolor: #1a7f37;\r\nfont-size: 0.72rem;\r\nfont-weight: 700;\r\nwidth: 20px;\r\nheight: 20px;\r\nborder-radius: 50%;\r\ndisplay: flex;\r\nalign-items: center;\r\njustify-content: center;\r\nflex-shrink: 0;\r\nmargin-top: 1px;\r\nborder: 1px solid #1a7f37;\r\n}\r\n.guia-result {\r\nbackground: #dafbe1;\r\nborder-left: 3px solid #1a7f37;\r\nborder-radius: 0 6px 6px 0;\r\npadding: 10px 14px;\r\ncolor: #1f2328;\r\nfont-size: 0.82rem;\r\nmargin-top: 10px;\r\n}\r\n.guia-params {\r\nbackground: #f6f8fa;\r\nborder: 1px solid #d0d7de;\r\nborder-radius: 6px;\r\npadding: 10px 14px;\r\nfont-size: 0.8rem;\r\ncolor: #1f2328;\r\n}\r\n.guia-params span { color: #0550ae; font-family: 'JetBrains Mono', monospace; }\r\n.var { font-family: 'JetBrains Mono', monospace; }\r\n.var.pos { color: #cf222e; }\r\n.var.neg { color: #0550ae; }\r\n.var.neu { color: #7d4e00; }\r\n.var.ok { color: #1a7f37; }\r\n<\/style>\r\n\r\n<div class=\"guia-panel\" id=\"guiaPanel\">\r\n<div class=\"guia-header\">\r\n<div class=\"guia-header-title\">\r\n<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\r\nGu\u00eda de uso\r\n<\/div>\r\n<button class=\"guia-close\" onclick=\"toggleGuia()\">✕<\/button>\r\n<\/div>\r\n<div class=\"guia-body\">\r\n<div style=\"font-family: Arial, sans-serif; line-height: 1.6; color: #333;\">\r\n<h3 style=\"color: #0056b3;\"><strong><span style=\"font-size: 16px; color: #000080;\"><\/span><\/strong><strong><span style=\"font-size: 16px; color: #ff0000;\"> <span style=\"color: #ff0000;\"><\/span><\/span><\/strong><\/h3>\r\n<strong>Objetivo:<\/strong> Comprender las magnitudes vectoriales mediante la representación gráfica y analítica de vectores en el plano bidimensional, operando de forma interactiva con la suma, resta y descomposición en componentes rectangulares.\r\n<strong>Descripción breve:<\/strong> Simulación interactiva que permite manipular vectores en un sistema de coordenadas cartesianas. Facilita la visualización del método gráfico del paralelogramo o de la poligonal (punta y cola) y la validación analítica mediante la suma de sus componentes algebraicas x e y:\r\n<div style=\"text-align: center; margin: 20px 0; background: #f0f4f8; padding: 10px; border-radius: 5px;\">R = A + B → Rx = Ax + Bx e Ry = Ay + By<\/div>\r\n<strong>Cómo usar (pasos):<\/strong>\r\n<ul style=\"margin-left: 20px;\">\r\n<li>Arrastrar los vectores desde el panel origen y modificar su longitud y dirección sobre la grilla cuadriculada. Los campos del panel se actualizan en tiempo real.<\/li>\r\n<li>Activar la casilla de \"Componentes\" para visualizar las proyecciones horizontales y verticales de cada vector individual.<\/li>\r\n<li>Seleccionar la operación deseada (Suma o Resta) en el panel de control para que el simulador genere automáticamente el vector resultante R.<\/li>\r\n<li>Habilitar la opción del \"Método del Paralelogramo\" para observar cómo se disponen gráficamente los vectores en el plano.<\/li>\r\n<li>Monitorear en la tabla dinámica de datos los valores de magnitud (módulo), ángulo de dirección (θ) y las coordenadas de cada componente.<\/li>\r\n<\/ul>\r\n<strong>Parámetros ajustables:<\/strong> Módulo y dirección de los vectores, tipo de operación (adición\/sustracción), visualización de componentes rectangulares, grilla de coordenadas y vectores resultantes.\r\n<p style=\"background-color: #f8f9fa; padding: 15px; border-left: 5px solid #0056b3;\"><strong>Resultados esperados \/ observaciones:<\/strong> Se comprueba que el vector resta A - B equivale a sumar al vector A el opuesto de B (invertido 180°). Asimismo, se verifica que el método analítico por componentes proporciona una precisión matemática exacta que coincide con la resolución del método geométrico implementado en la pantalla.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<button class=\"btn-guia\" onclick=\"toggleGuia()\">\r\n<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\r\nGuía de uso\r\n<\/button>\r\n\r\n<script>\r\nfunction toggleGuia() {\r\ndocument.getElementById('guiaPanel').classList.toggle('visible');\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Suma y Resta de Vectores \u2014 Fisica General Suma y Resta de Vectores Fisica Basica \u2014 Simulacion Interactiva Configuracion CANTIDAD DE VECTORES Vectores Metodo Grafico…<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-8305","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>suma_resta_vectores - F\u00edsica 2<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/suma_resta_vectores\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"suma_resta_vectores - F\u00edsica 2\" \/>\n<meta property=\"og:description\" content=\"Suma y Resta de Vectores \u2014 Fisica General Suma y Resta de Vectores Fisica Basica \u2014 Simulacion Interactiva Configuracion CANTIDAD DE VECTORES Vectores Metodo Grafico…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/suma_resta_vectores\/\" \/>\n<meta property=\"og:site_name\" content=\"F\u00edsica 2\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-21T14:49:38+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/suma_resta_vectores\\\/\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/suma_resta_vectores\\\/\",\"name\":\"suma_resta_vectores - F\u00edsica 2\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#website\"},\"datePublished\":\"2026-07-05T15:09:41+00:00\",\"dateModified\":\"2026-08-21T14:49:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/suma_resta_vectores\\\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/suma_resta_vectores\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/suma_resta_vectores\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"suma_resta_vectores\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#website\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\",\"name\":\"F\u00edsica 2\",\"description\":\"FICA - UNSL\",\"publisher\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-AR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#organization\",\"name\":\"SAC- Secretar\u00eda General FICA\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-AR\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/SG-Logo.png\",\"contentUrl\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/SG-Logo.png\",\"width\":4483,\"height\":1231,\"caption\":\"SAC- Secretar\u00eda General FICA\"},\"image\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"suma_resta_vectores - F\u00edsica 2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/suma_resta_vectores\/","og_locale":"es_ES","og_type":"article","og_title":"suma_resta_vectores - F\u00edsica 2","og_description":"Suma y Resta de Vectores \u2014 Fisica General Suma y Resta de Vectores Fisica Basica \u2014 Simulacion Interactiva Configuracion CANTIDAD DE VECTORES Vectores Metodo Grafico…","og_url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/suma_resta_vectores\/","og_site_name":"F\u00edsica 2","article_modified_time":"2026-08-21T14:49:38+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/suma_resta_vectores\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/suma_resta_vectores\/","name":"suma_resta_vectores - F\u00edsica 2","isPartOf":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website"},"datePublished":"2026-07-05T15:09:41+00:00","dateModified":"2026-08-21T14:49:38+00:00","breadcrumb":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/suma_resta_vectores\/#breadcrumb"},"inLanguage":"es-AR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/suma_resta_vectores\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/suma_resta_vectores\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/fisica2.fica.unsl.edu.ar\/"},{"@type":"ListItem","position":2,"name":"suma_resta_vectores"}]},{"@type":"WebSite","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website","url":"https:\/\/fisica2.fica.unsl.edu.ar\/","name":"F\u00edsica 2","description":"FICA - UNSL","publisher":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fisica2.fica.unsl.edu.ar\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-AR"},{"@type":"Organization","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#organization","name":"SAC- Secretar\u00eda General FICA","url":"https:\/\/fisica2.fica.unsl.edu.ar\/","logo":{"@type":"ImageObject","inLanguage":"es-AR","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png","contentUrl":"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png","width":4483,"height":1231,"caption":"SAC- Secretar\u00eda General FICA"},"image":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/8305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/comments?post=8305"}],"version-history":[{"count":28,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/8305\/revisions"}],"predecessor-version":[{"id":8764,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/8305\/revisions\/8764"}],"wp:attachment":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/media?parent=8305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nSuma y Resta de Vectores \u2014 Fisica General<\/title>\r\n<style>\r\n:root{\r\n--bg:#f0f1f3;--panel:#fff;--text:#1c1917;--muted:#78716c;\r\n--accent:#0d9488;--accent-l:#ccfbf1;--accent-h:#0f766e;\r\n--border:#e7e5e4;--input:#f8fafc;--danger:#dc2626;\r\n--success:#16a34a;--warn:#d97706;--r:8px;--rl:12px;\r\n--sh:0 1px 3px rgba(0,0,0,.07);--shl:0 4px 12px rgba(0,0,0,.08);\r\n--tr:.2s ease;\r\n}\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\r\nhtml,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:13px;line-height:1.5}\r\n#app{display:grid;grid-template-columns:340px 1fr;height:100vh;width:100vw}\r\n#panel{background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;z-index:10}\r\n.ph{padding:16px 20px 12px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#0d9488,#0f766e);color:#fff;flex-shrink:0}\r\n.ph h1{font-size:16px;font-weight:700;letter-spacing:-.3px}\r\n.ph p{font-size:11px;opacity:.85;margin-top:2px}\r\n.ps{flex:1;overflow-y:auto;padding:4px 0;scrollbar-width:thin;scrollbar-color:#d6d3d1 transparent}\r\n.ps::-webkit-scrollbar{width:5px}\r\n.ps::-webkit-scrollbar-thumb{background:#d6d3d1;border-radius:3px}\r\ndetails{border-bottom:1px solid var(--border)}\r\ndetails summary{padding:10px 20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;transition:color var(--tr);user-select:none}\r\ndetails summary::-webkit-details-marker{display:none}\r\ndetails summary::before{content:'';display:inline-block;width:0;height:0;border-left:4px solid currentColor;border-top:3px solid transparent;border-bottom:3px solid transparent;transition:transform var(--tr)}\r\ndetails[open] summary::before{transform:rotate(90deg)}\r\ndetails summary:hover{color:var(--accent)}\r\n.sc{padding:8px 20px 14px}\r\n.bg{display:flex;gap:6px}\r\n.bg button{flex:1;padding:7px 0;border:1.5px solid var(--border);border-radius:var(--r);background:var(--input);font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:all var(--tr)}\r\n.bg button:hover{border-color:var(--accent);color:var(--accent)}\r\n.bg button.on{background:var(--accent);color:#fff;border-color:var(--accent)}\r\n.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border:none;border-radius:var(--r);font-size:12px;font-weight:600;cursor:pointer;transition:all var(--tr);width:100%}\r\n.btn-p{background:var(--accent);color:#fff}.btn-p:hover{background:var(--accent-h)}\r\n.btn-s{background:var(--input);color:var(--text);border:1.5px solid var(--border)}.btn-s:hover{border-color:var(--accent);color:var(--accent)}\r\n.btn-d{background:#fef2f2;color:var(--danger);border:1.5px solid #fecaca}.btn-d:hover{background:#fee2e2}\r\n.btn:disabled{opacity:.4;cursor:not-allowed}\r\n.rg,.cg{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}\r\n.rl,.cl{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;padding:4px 0}\r\n.rl input,.cl input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}\r\n.rl.dis{opacity:.35;pointer-events:none}\r\n.vc{background:var(--input);border:1px solid var(--border);border-radius:var(--rl);padding:10px 12px;margin-bottom:8px;border-left:4px solid;transition:box-shadow var(--tr)}\r\n.vc:hover{box-shadow:var(--sh)}\r\n.vh{display:flex;align-items:center;gap:8px;margin-bottom:8px}\r\n.sb{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;cursor:pointer;transition:all var(--tr);border:none;flex-shrink:0}\r\n.sb.pos{background:#dcfce7;color:#16a34a;border:1.5px solid #86efac}\r\n.sb.neg{background:#fee2e2;color:#dc2626;border:1.5px solid #fca5a5}\r\n.sb:hover{transform:scale(1.15)}\r\n.vn{font-weight:700;font-size:13px}\r\n.ir{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:4px}\r\n.ig{display:flex;flex-direction:column;gap:2px}\r\n.ig label{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}\r\n.ig input{width:100%;padding:5px 7px;border:1.5px solid var(--border);border-radius:6px;font-size:13px;font-family:'SF Mono','Cascadia Code',Consolas,monospace;background:#fff;color:var(--text);transition:border-color var(--tr);outline:none}\r\n.ig input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(13,148,136,.12)}\r\n.ig input.hv{color:transparent;caret-color:var(--text)}\r\n.at,.ct{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:12px}\r\n.at th,.at td,.ct th,.ct td{padding:5px 8px;text-align:center;border:1px solid var(--border)}\r\n.at th,.ct th{background:var(--input);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}\r\n.at .sr{background:var(--accent-l);font-weight:700}\r\n.fs{font-family:'SF Mono','Cascadia Code',Consolas,monospace;font-size:11.5px;line-height:1.8;color:var(--text);background:var(--input);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px}\r\n.fs .rl2{color:var(--accent-h);font-weight:700}\r\n.fs .sp{border-top:1px dashed var(--border);margin:4px 0}\r\n.mm{text-align:center;font-size:12px;font-weight:600;color:var(--success);padding:6px;background:#f0fdf4;border-radius:var(--r);border:1px solid #bbf7d0}\r\n.eb{display:flex;gap:6px;margin-bottom:10px}\r\n.eb .btn{flex:1}\r\n.vs{background:var(--input);border:1px solid var(--border);border-radius:var(--rl);padding:12px;margin-top:10px}\r\n.vs h4{font-size:12px;font-weight:700;margin-bottom:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}\r\n.vi{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}\r\n.vr{font-size:12px;font-weight:600;padding:8px;border-radius:var(--r);text-align:center;margin-top:6px;display:none}\r\n.vr.ok{display:block;background:#f0fdf4;color:var(--success);border:1px solid #bbf7d0}\r\n.vr.no{display:block;background:#fef2f2;color:var(--danger);border:1px solid #fecaca}\r\n.pn{font-size:11px;color:var(--warn);background:#fffbeb;border:1px solid #fde68a;padding:6px 10px;border-radius:var(--r);margin-top:6px}\r\n.it{font-size:11px;color:var(--muted);font-style:italic;margin-top:4px}\r\n#ca{position:relative;overflow:hidden;background:#fefefe}\r\n#cv{position:absolute;top:0;left:0}\r\n#cv.grabbing{cursor:grabbing}\r\n#cv.grab{cursor:grab}\r\n#zl{position:absolute;bottom:16px;right:16px;display:flex;flex-direction:column;gap:4px}\r\n#zl button{width:36px;height:36px;border:1.5px solid var(--border);border-radius:var(--r);background:var(--panel);font-size:18px;font-weight:600;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh);transition:all var(--tr)}\r\n#zl button:hover{border-color:var(--accent);color:var(--accent)}\r\n#ml{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);padding:6px 12px;border-radius:var(--r);font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;box-shadow:var(--sh);pointer-events:none;border:1px solid var(--border)}\r\n#el{position:absolute;top:12px;left:140px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);padding:6px 12px;border-radius:var(--r);font-size:12px;font-weight:600;color:var(--text);box-shadow:var(--sh);pointer-events:none;border:1px solid var(--border);font-family:'SF Mono',Consolas,monospace}\r\n#asl{position:absolute;bottom:54px;left:50%;transform:translateX(-50%);background:rgba(13,148,136,.92);color:#fff;padding:6px 16px;border-radius:20px;font-size:12px;font-weight:600;pointer-events:none;opacity:0;transition:opacity .3s ease;white-space:nowrap}\r\n#asl.vis{opacity:1}\r\n#zi{position:absolute;bottom:16px;left:16px;font-size:11px;color:var(--muted);background:rgba(255,255,255,.85);padding:4px 8px;border-radius:6px;pointer-events:none}\r\n#tc{position:fixed;top:16px;right:16px;z-index:1000;display:flex;flex-direction:column;gap:8px}\r\n.toast{padding:10px 16px;border-radius:var(--r);font-size:13px;font-weight:500;box-shadow:var(--shl);transform:translateX(120%);transition:transform .3s ease;max-width:320px}\r\n.toast.show{transform:translateX(0)}\r\n.toast-s{background:#f0fdf4;color:var(--success);border:1px solid #bbf7d0}\r\n.toast-e{background:#fef2f2;color:var(--danger);border:1px solid #fecaca}\r\n.toast-i{background:#f0f9ff;color:#0369a1;border:1px solid #bae6fd}\r\n@media(max-width:900px){\r\n#app{grid-template-columns:1fr;grid-template-rows:55vh 45vh}\r\n#panel{border-right:none;border-top:1px solid var(--border)}\r\n.ph{padding:10px 16px 8px}.ph h1{font-size:14px}\r\n.sc{padding:6px 16px 10px}details summary{padding:8px 16px;font-size:11px}\r\n.vc{padding:8px 10px}#el{left:12px;top:42px}#asl{bottom:50px}\r\n}\r\n@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"app\">\r\n<aside id=\"panel\">\r\n<div class=\"ph\"><h1>Suma y Resta de Vectores<\/h1><p>Fisica Basica \u2014 Simulacion Interactiva<\/p>\r\n<a href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/FISAR_SIM\/\" target=\"_blank\">\r\n<img decoding=\"async\" src=\"FISAR_SIM_1\" alt=\"FISAR Sim\"\r\nstyle=\"height:32px; width:auto; margin-top:8px; display:block; max-width:100%;\">\r\n<\/a>\r\n<\/div>\r\n<div class=\"ps\">\r\n<details open><summary>Configuracion<\/summary><div class=\"sc\">\r\n<label style=\"font-size:11px;font-weight:600;color:var(--muted);display:block;margin-bottom:6px\">CANTIDAD DE VECTORES<\/label>\r\n<div class=\"bg\" id=\"nb\"><\/div>\r\n<\/div><\/details>\r\n<details open><summary>Vectores<\/summary><div class=\"sc\" id=\"vcc\"><\/div><\/details>\r\n<details open><summary>Metodo Grafico<\/summary><div class=\"sc\">\r\n<div class=\"rg\">\r\n<label class=\"rl\"><input type=\"radio\" name=\"mt\" value=\"ninguna\" checked>Sin resultante<\/label>\r\n<label class=\"rl\"><input type=\"radio\" name=\"mt\" value=\"poligonal\">Poligonal (punta con cola)<\/label>\r\n<label class=\"rl\" id=\"rp\"><input type=\"radio\" name=\"mt\" value=\"paralelogramo\">Paralelogramo<\/label>\r\n<\/div>\r\n<label class=\"cl\" id=\"cw\" style=\"display:none\"><input type=\"checkbox\" id=\"cp\">Mostrar paralelogramo<\/label>\r\n<div id=\"pn2\"><\/div>\r\n<button class=\"btn btn-s\" id=\"ba\" style=\"margin-top:8px;display:none\">Mostrar animacion<\/button>\r\n<button class=\"btn btn-d\" id=\"bs\" style=\"margin-top:6px;display:none\">Detener animacion<\/button>\r\n<\/div><\/details>\r\n<details><summary>Visualizacion<\/summary><div class=\"sc\">\r\n<div class=\"cg\">\r\n<label class=\"cl\"><input type=\"checkbox\" id=\"cc\">Mostrar componentes<\/label>\r\n<label class=\"cl\"><input type=\"checkbox\" id=\"cd\">Mostrar coordenadas<\/label>\r\n<\/div>\r\n<\/div><\/details>\r\n<details open><summary>Metodo Analitico<\/summary><div class=\"sc\" id=\"ans\"><\/div><\/details>\r\n<details><summary>Comparacion de Metodos<\/summary><div class=\"sc\" id=\"cps\"><\/div><\/details>\r\n<details><summary>Ejercicios<\/summary><div class=\"sc\">\r\n<div class=\"eb\">\r\n<button class=\"btn btn-p\" id=\"bg\">Generar ejercicio<\/button>\r\n<button class=\"btn btn-s\" id=\"bsol\">Mostrar solucion<\/button>\r\n<\/div>\r\n<label class=\"cl\" style=\"margin-bottom:6px\"><input type=\"checkbox\" id=\"chm\">Resolver sin ayuda<\/label>\r\n<div class=\"vs\" id=\"vsec\" style=\"display:none\">\r\n<h4>Verificar tu respuesta<\/h4>\r\n<div class=\"vi\">\r\n<div class=\"ig\"><label>Modulo |R|<\/label><input type=\"number\" step=\"0.01\" id=\"vm2\" placeholder=\"0.00\"><\/div>\r\n<div class=\"ig\"><label>Angulo (deg)<\/label><input type=\"number\" step=\"0.01\" id=\"va2\" placeholder=\"0.00\"><\/div>\r\n<\/div>\r\n<button class=\"btn btn-p\" id=\"bv\">Verificar respuesta<\/button>\r\n<div class=\"vr\" id=\"vres\"><\/div>\r\n<\/div>\r\n<\/div><\/details>\r\n<\/div>\r\n<\/aside>\r\n<main id=\"ca\">\r\n<canvas id=\"cv\"><\/canvas>\r\n<div id=\"ml\">SIN RESULTANTE<\/div>\r\n<div id=\"el\">A<\/div>\r\n<div id=\"asl\"><\/div>\r\n<div id=\"zi\">Zoom: 100%<\/div>\r\n<div id=\"zl\">\r\n<button id=\"zin\" title=\"Acercar\">+<\/button>\r\n<button id=\"zout\" title=\"Alejar\">−<\/button>\r\n<button id=\"zrst\" title=\"Restablecer\">↺<\/button>\r\n<\/div>\r\n<\/main>\r\n<\/div>\r\n<div id=\"tc\"><\/div>\r\n\r\n<script>\r\nvar COLS=['#1d4ed8','#15803d','#c2410c','#7e22ce'];\r\nvar NAMES=['A','B','C','D'];\r\nvar RCOL='#dc2626';\r\nvar GU=45;\r\nvar TR=12;\r\n\r\nvar V=[];\r\nvar NV=1;\r\nvar MT='ninguna';\r\nvar SHC=false,SHD=false,SHP=false;\r\nvar CHM=false,SOLV=true;\r\nvar ZM=1,PX=0,PY=0;\r\nvar DRG=false,DI=-1,PAN=false,LMX=0,LMY=0,HI=-1;\r\nvar ANM=false,AST=0,APR=0,ATM=0,ACP=false;\r\nvar _CW=800,_CH=600;\r\n\r\nvar cv=document.getElementById('cv');\r\nvar cx=cv.getContext('2d');\r\nvar aslEl=document.getElementById('asl');\r\n\r\nfunction rad(d){return d*Math.PI\/180}\r\nfunction deg(r){return r*180\/Math.PI}\r\nfunction nang(d){d=d%360;return d<0?d+360:d}\r\nfunction fm(n){return(Math.round(n*100)\/100).toFixed(2)}\r\nfunction fms(n){return n>=0?fm(n):'('+fm(n)+')'}\r\nfunction ease(t){return t<.5?4*t*t*t:1-Math.pow(-2*t+2,3)\/2}\r\n\r\nfunction cw(){return _CW}\r\nfunction ch(){return _CH}\r\nfunction w2s(wx,wy){return{x:cw()\/2+wx*GU*ZM+PX,y:ch()\/2-wy*GU*ZM+PY}}\r\nfunction s2w(sx,sy){return{x:(sx-cw()\/2-PX)\/(GU*ZM),y:-(sy-ch()\/2-PY)\/(GU*ZM)}}\r\n\r\nfunction mkVec(i,m,a,s){\r\ns=s||1;var r=rad(a);\r\nreturn{n:NAMES[i],c:COLS[i],m:m,a:a,cx:m*Math.cos(r),cy:m*Math.sin(r),s:s};\r\n}\r\n\r\nfunction initV(){\r\nvar df=[[5,30],[4,135],[3,220],[2.5,310]];\r\nV=[];\r\nfor(var i=0;i<NV;i++) V.push(mkVec(i,df[i][0],df[i][1],1));\r\nACP=false;\r\nmkCards();\r\nupAll();\r\n}\r\n\r\nfunction setNV(n){\r\nif(n===NV) return;\r\nvar old=V.slice();\r\nvar df=[[5,30],[4,135],[3,220],[2.5,310]];\r\nNV=n;\r\nV=[];\r\nfor(var i=0;i<n;i++) V.push(old[i]||mkVec(i,df[i][0],df[i][1],1));\r\nACP=false;\r\nmkCards();\r\nupMT();\r\nupAll();\r\n}\r\n\r\nfunction upPolar(i){\r\nvar v=V[i],r=rad(v.a);\r\nv.cx=v.m*Math.cos(r);\r\nv.cy=v.m*Math.sin(r);\r\n}\r\n\r\nfunction upComp(i){\r\nvar v=V[i];\r\nv.m=Math.hypot(v.cx,v.cy);\r\nvar a=deg(Math.atan2(v.cy,v.cx));\r\nv.a=nang(a);\r\nif(v.m<1e-9){v.m=0;v.a=0;v.cx=0;v.cy=0}\r\n}\r\n\r\nfunction calcR(){\r\nvar sx=0,sy=0;\r\nV.forEach(function(v){sx+=v.s*v.cx;sy+=v.s*v.cy});\r\nvar mg=Math.hypot(sx,sy);\r\nvar an=nang(deg(Math.atan2(sy,sx)));\r\nif(mg<1e-9) return{rx:0,ry:0,m:0,a:0};\r\nreturn{rx:sx,ry:sy,m:mg,a:an};\r\n}\r\n\r\nfunction rsz(){\r\nvar p=cv.parentElement;\r\nvar w=p.clientWidth,h=p.clientHeight;\r\nif(w<10) w=800;\r\nif(h<10) h=600;\r\nvar dpr=window.devicePixelRatio||1;\r\nvar bw=Math.round(w*dpr),bh=Math.round(h*dpr);\r\nif(cv.width!==bw||cv.height!==bh){\r\ncv.width=bw;\r\ncv.height=bh;\r\ncv.style.width=w+'px';\r\ncv.style.height=h+'px';\r\ncx.setTransform(dpr,0,0,dpr,0,0);\r\n}\r\n_CW=w;\r\n_CH=h;\r\n}\r\n\r\nfunction render(){\r\nrsz();\r\nvar w=cw(),h=ch();\r\ncx.clearRect(0,0,w,h);\r\ncx.fillStyle='#fefefe';\r\ncx.fillRect(0,0,w,h);\r\ndrGrid();\r\ndrAxes();\r\nvar hr=CHM&&!SOLV;\r\nif(MT==='ninguna'){\r\ndrOrig(1);\r\n}else if(MT==='poligonal'){\r\ndrPoly(hr);\r\n}else if(MT==='paralelogramo'){\r\ndrPara(hr);\r\n}\r\nif(SHC&&!ANM) drComps();\r\nif(SHD&&!ANM) drCoords();\r\n}\r\n\r\nfunction gStep(){\r\nvar p=GU*ZM;\r\nif(p<15) return 5;\r\nif(p<30) return 2;\r\nif(p>200) return .25;\r\nif(p>100) return .5;\r\nreturn 1;\r\n}\r\n\r\nfunction drGrid(){\r\nvar st=gStep();\r\nvar tl=s2w(0,0),br=s2w(cw(),ch());\r\ncx.strokeStyle='#eaeaea';\r\ncx.lineWidth=.5;\r\nvar x0=Math.floor(tl.x\/st)*st,x1=Math.ceil(br.x\/st)*st;\r\nfor(var x=x0;x<=x1;x+=st){\r\nif(Math.abs(x)<1e-9) continue;\r\nvar p=w2s(x,0);\r\ncx.beginPath();cx.moveTo(p.x,0);cx.lineTo(p.x,ch());cx.stroke();\r\n}\r\nvar y0=Math.floor(br.y\/st)*st,y1=Math.ceil(tl.y\/st)*st;\r\nfor(var y=y0;y<=y1;y+=st){\r\nif(Math.abs(y)<1e-9) continue;\r\nvar p=w2s(0,y);\r\ncx.beginPath();cx.moveTo(0,p.y);cx.lineTo(cw(),p.y);cx.stroke();\r\n}\r\n}\r\n\r\nfunction drAxes(){\r\nvar o=w2s(0,0),st=gStep(),tl=s2w(0,0),br=s2w(cw(),ch());\r\ncx.strokeStyle='#444';\r\ncx.lineWidth=1.5;\r\ncx.beginPath();cx.moveTo(0,o.y);cx.lineTo(cw(),o.y);cx.stroke();\r\ncx.beginPath();cx.moveTo(o.x,0);cx.lineTo(o.x,ch());cx.stroke();\r\ncx.fillStyle='#888';\r\ncx.font='10px -apple-system,sans-serif';\r\ncx.textAlign='center';\r\ncx.textBaseline='top';\r\nvar x0=Math.floor(tl.x\/st)*st,x1=Math.ceil(br.x\/st)*st;\r\nfor(var x=x0;x<=x1;x+=st){\r\nif(Math.abs(x)<1e-9) continue;\r\nvar p=w2s(x,0);\r\ncx.strokeStyle='#444';cx.lineWidth=1;\r\ncx.beginPath();cx.moveTo(p.x,o.y-3);cx.lineTo(p.x,o.y+3);cx.stroke();\r\ncx.fillText(Number.isInteger(x)?''+x:x.toFixed(1),p.x,o.y+6);\r\n}\r\ncx.textAlign='right';\r\ncx.textBaseline='middle';\r\nvar y0=Math.floor(br.y\/st)*st,y1=Math.ceil(tl.y\/st)*st;\r\nfor(var y=y0;y<=y1;y+=st){\r\nif(Math.abs(y)<1e-9) continue;\r\nvar p=w2s(0,y);\r\ncx.strokeStyle='#444';cx.lineWidth=1;\r\ncx.beginPath();cx.moveTo(o.x-3,p.y);cx.lineTo(o.x+3,p.y);cx.stroke();\r\ncx.fillText(Number.isInteger(y)?''+y:y.toFixed(1),o.x-7,p.y);\r\n}\r\ncx.textAlign='right';\r\ncx.textBaseline='top';\r\ncx.fillText('O',o.x-6,o.y+6);\r\ncx.fillStyle='#444';\r\nvar xp=w2s(br.x,0);\r\nif(xp.x>o.x+30){\r\ncx.beginPath();cx.moveTo(xp.x-2,o.y);cx.lineTo(xp.x-10,o.y-5);cx.lineTo(xp.x-10,o.y+5);cx.fill();\r\ncx.textAlign='right';cx.textBaseline='bottom';cx.fillText('X',xp.x-4,o.y-6);\r\n}\r\nvar yp=w2s(0,tl.y);\r\nif(yp.y<o.y-30){\r\ncx.beginPath();cx.moveTo(o.x,yp.y+2);cx.lineTo(o.x-5,yp.y+10);cx.lineTo(o.x+5,yp.y+10);cx.fill();\r\ncx.textAlign='left';cx.textBaseline='top';cx.fillText('Y',o.x+8,yp.y+4);\r\n}\r\n}\r\n\r\nfunction drArr(fx,fy,tx,ty,col,lw,hl){\r\nvar dx=tx-fx,dy=ty-fy,ln=Math.hypot(dx,dy);\r\nif(ln<2) return;\r\nvar an=Math.atan2(dy,dx);\r\nhl=hl||Math.min(14,ln*.3);\r\ncx.strokeStyle=col;\r\ncx.fillStyle=col;\r\ncx.lineWidth=lw||2;\r\ncx.lineCap='round';\r\ncx.lineJoin='round';\r\ncx.beginPath();\r\ncx.moveTo(fx,fy);\r\ncx.lineTo(tx-hl*.6*Math.cos(an),ty-hl*.6*Math.sin(an));\r\ncx.stroke();\r\ncx.beginPath();\r\ncx.moveTo(tx,ty);\r\ncx.lineTo(tx-hl*Math.cos(an-.45),ty-hl*Math.sin(an-.45));\r\ncx.lineTo(tx-hl*.55*Math.cos(an),ty-hl*.55*Math.sin(an));\r\ncx.lineTo(tx-hl*Math.cos(an+.45),ty-hl*Math.sin(an+.45));\r\ncx.closePath();\r\ncx.fill();\r\n}\r\n\r\nfunction drDashedArr(fx,fy,tx,ty,col,lw,hl){\r\nvar dx=tx-fx,dy=ty-fy,ln=Math.hypot(dx,dy);\r\nif(ln<2) return;\r\nvar an=Math.atan2(dy,dx);\r\nhl=hl||Math.min(14,ln*.3);\r\ncx.strokeStyle=col;\r\ncx.fillStyle=col;\r\ncx.lineWidth=lw||2;\r\ncx.lineCap='round';\r\ncx.lineJoin='round';\r\ncx.setLineDash([8,5]);\r\ncx.beginPath();\r\ncx.moveTo(fx,fy);\r\ncx.lineTo(tx-hl*.6*Math.cos(an),ty-hl*.6*Math.sin(an));\r\ncx.stroke();\r\ncx.setLineDash([]);\r\ncx.beginPath();\r\ncx.moveTo(tx,ty);\r\ncx.lineTo(tx-hl*Math.cos(an-.45),ty-hl*Math.sin(an-.45));\r\ncx.lineTo(tx-hl*.55*Math.cos(an),ty-hl*.55*Math.sin(an));\r\ncx.lineTo(tx-hl*Math.cos(an+.45),ty-hl*Math.sin(an+.45));\r\ncx.closePath();\r\ncx.fill();\r\n}\r\n\r\nfunction drDash(x1,y1,x2,y2,col,lw){\r\ncx.strokeStyle=col;\r\ncx.lineWidth=lw||1;\r\ncx.setLineDash([6,4]);\r\ncx.beginPath();cx.moveTo(x1,y1);cx.lineTo(x2,y2);cx.stroke();\r\ncx.setLineDash([]);\r\n}\r\n\r\nfunction drLbl(txt,x,y,col,sz,bd){\r\ncx.font=(bd?'bold ':'')+(sz||13)+'px -apple-system,sans-serif';\r\ncx.fillStyle=col||'#333';\r\ncx.textAlign='center';\r\ncx.textBaseline='middle';\r\ncx.fillText(txt,x,y);\r\n}\r\n\r\nfunction drOrig(al){\r\nvar o=w2s(0,0);\r\nV.forEach(function(v,i){\r\nif(v.m<1e-9) return;\r\nvar tip=w2s(v.cx,v.cy);\r\ncx.globalAlpha=al!==undefined?al:1;\r\nvar lw=(HI===i&&!ANM)?3:2.2;\r\ndrArr(o.x,o.y,tip.x,tip.y,v.c,lw);\r\ndrLbl(v.n,tip.x+14,tip.y-14,v.c,13,true);\r\ncx.globalAlpha=1;\r\n});\r\n}\r\n\r\nfunction drPoly(hr){\r\nvar o=w2s(0,0),anim=ANM,comp=ACP||!anim;\r\nif(comp||!anim) drOrig(.3);\r\n\r\nvar px=0,py=0;\r\nvar polyLabels=V.map(function(v){return 'Dibujando '+(v.s===-1?'-':'')+v.n});\r\npolyLabels.push('Trazando resultante R');\r\n\r\nfor(var i=0;i<V.length;i++){\r\nif(anim&&i>AST) break;\r\nvar v=V[i],ex=v.s*v.cx,ey=v.s*v.cy;\r\nvar t=1;\r\nif(anim&&i===AST) t=APR;\r\nvar from=w2s(px,py),toF=w2s(px+ex,py+ey);\r\nvar toX=from.x+(toF.x-from.x)*t,toY=from.y+(toF.y-from.y)*t;\r\nif(i>0&&(comp||(anim&&i<=AST))) drDash(o.x,o.y,from.x,from.y,'#bbb',.8);\r\nif(v.s===-1) drDashedArr(from.x,from.y,toX,toY,v.c,2.5);\r\nelse drArr(from.x,from.y,toX,toY,v.c,2.5);\r\nif(t>.5){\r\nvar mx=(from.x+toX)\/2,my=(from.y+toY)\/2;\r\nvar ddx=toX-from.x,ddy=toY-from.y,ll=Math.hypot(ddx,ddy);\r\nif(ll>20){\r\nvar nx=-ddy\/ll*16,ny=ddx\/ll*16;\r\ncx.globalAlpha=t;\r\ndrLbl((v.s===-1?'-':'')+v.n,mx+nx,my+ny,v.c,12,true);\r\ncx.globalAlpha=1;\r\n}\r\n}\r\npx+=ex*t;\r\npy+=ey*t;\r\n}\r\n\r\nvar canR=comp||(anim&&AST>=V.length);\r\nif(canR&&!hr){\r\nvar tR=1;\r\nif(anim&&AST===V.length) tR=APR;\r\nvar rE=w2s(px,py);\r\nvar rx=o.x+(rE.x-o.x)*tR,ry=o.y+(rE.y-o.y)*tR;\r\ndrArr(o.x,o.y,rx,ry,RCOL,3.5,16);\r\nif(tR>.5) drLbl('R',rx+16,ry-16,RCOL,15,true);\r\n}\r\n\r\nif(anim&&AST<V.length+1) showASL(polyLabels[AST]||'');\r\nelse if(anim) hideASL();\r\n}\r\n\r\nfunction drPara(hr){\r\nvar o=w2s(0,0),anim=ANM,comp=ACP||!anim;\r\nvar vA=V[0],vB=V[1];\r\nvar eAx=vA.s*vA.cx,eAy=vA.s*vA.cy;\r\nvar eBx=vB.s*vB.cx,eBy=vB.s*vB.cy;\r\nvar tA=w2s(eAx,eAy),tB=w2s(eBx,eBy),dg=w2s(eAx+eBx,eAy+eBy);\r\n\r\nvar paraLabels=[\r\n'Dibujando '+(vA.s===-1?'-':'')+vA.n,\r\n'Dibujando '+(vB.s===-1?'-':'')+vB.n,\r\n'Trazando paralela a '+(vB.s===-1?'-':'')+vB.n+' desde punta de '+(vA.s===-1?'-':'')+vA.n,\r\n'Trazando paralela a '+(vA.s===-1?'-':'')+vA.n+' desde punta de '+(vB.s===-1?'-':'')+vB.n,\r\n'Trazando diagonal resultante R'\r\n];\r\n\r\nif(!anim){\r\ndrOrig(1);\r\nif(SHP){\r\ncx.fillStyle='rgba(13,148,136,.07)';\r\ncx.beginPath();\r\ncx.moveTo(o.x,o.y);cx.lineTo(tA.x,tA.y);cx.lineTo(dg.x,dg.y);cx.lineTo(tB.x,tB.y);\r\ncx.closePath();cx.fill();\r\ndrDash(tA.x,tA.y,dg.x,dg.y,vB.c,1.5);\r\ndrDash(tB.x,tB.y,dg.x,dg.y,vA.c,1.5);\r\nif(vA.s===-1){drDashedArr(o.x,o.y,tA.x,tA.y,vA.c,2);drLbl('-'+vA.n,tA.x+14,tA.y-14,vA.c,12,true)}\r\nif(vB.s===-1){drDashedArr(o.x,o.y,tB.x,tB.y,vB.c,2);drLbl('-'+vB.n,tB.x+14,tB.y-14,vB.c,12,true)}\r\n}\r\nif(!hr) drRes();\r\nreturn;\r\n}\r\n\r\nvar step=AST,t=APR;\r\n\r\nif(step>=0){\r\nvar t0=step===0?t:1;\r\nvar ax=o.x+(tA.x-o.x)*t0,ay=o.y+(tA.y-o.y)*t0;\r\nif(vA.s===-1) drDashedArr(o.x,o.y,ax,ay,vA.c,2.5);\r\nelse drArr(o.x,o.y,ax,ay,vA.c,2.5);\r\nif(t0>.6) drLbl((vA.s===-1?'-':'')+vA.n,ax+14,ay-14,vA.c,12,true);\r\n}\r\nif(step>=1){\r\nvar t1=step===1?t:1;\r\nvar bx=o.x+(tB.x-o.x)*t1,by=o.y+(tB.y-o.y)*t1;\r\nif(vB.s===-1) drDashedArr(o.x,o.y,bx,by,vB.c,2.5);\r\nelse drArr(o.x,o.y,bx,by,vB.c,2.5);\r\nif(t1>.6) drLbl((vB.s===-1?'-':'')+vB.n,bx+14,by-14,vB.c,12,true);\r\n}\r\nif(step>=2){\r\nvar t2=step===2?t:1;\r\ncx.fillStyle='rgba(13,148,136,.07)';\r\ncx.beginPath();\r\ncx.moveTo(o.x,o.y);cx.lineTo(tA.x,tA.y);\r\ncx.lineTo(tA.x+(dg.x-tA.x)*t2,tA.y+(dg.y-tA.y)*t2);\r\ncx.lineTo(tA.x+(tB.x-o.x)*t2,tA.y+(tB.y-o.y)*t2);\r\ncx.closePath();cx.fill();\r\ndrDash(tA.x,tA.y,tA.x+(dg.x-tA.x)*t2,tA.y+(dg.y-tA.y)*t2,vB.c,1.5);\r\n}\r\nif(step>=3){\r\nvar t3=step===3?t:1;\r\ncx.fillStyle='rgba(13,148,136,.07)';\r\ncx.beginPath();\r\ncx.moveTo(o.x,o.y);cx.lineTo(tA.x,tA.y);cx.lineTo(dg.x,dg.y);\r\ncx.lineTo(tB.x+(dg.x-tB.x)*t3,tB.y+(dg.y-tB.y)*t3);\r\ncx.closePath();cx.fill();\r\ndrDash(tB.x,tB.y,tB.x+(dg.x-tB.x)*t3,tB.y+(dg.y-tB.y)*t3,vA.c,1.5);\r\n}\r\nif(step>=4){\r\nvar t4=step===4?t:1;\r\ncx.fillStyle='rgba(13,148,136,.07)';\r\ncx.beginPath();\r\ncx.moveTo(o.x,o.y);cx.lineTo(tA.x,tA.y);cx.lineTo(dg.x,dg.y);cx.lineTo(tB.x,tB.y);\r\ncx.closePath();cx.fill();\r\ndrDash(tA.x,tA.y,dg.x,dg.y,vB.c,1.5);\r\ndrDash(tB.x,tB.y,dg.x,dg.y,vA.c,1.5);\r\nif(!hr){\r\nvar rx=o.x+(dg.x-o.x)*t4,ry=o.y+(dg.y-o.y)*t4;\r\ndrArr(o.x,o.y,rx,ry,RCOL,3.5,16);\r\nif(t4>.5) drLbl('R',rx+16,ry-16,RCOL,15,true);\r\n}\r\n}\r\nif(step<5) showASL(paraLabels[step]||'');\r\nelse hideASL();\r\n}\r\n\r\nfunction drRes(){\r\nvar r=calcR();\r\nif(r.m<1e-9) return;\r\nvar o=w2s(0,0),tip=w2s(r.rx,r.ry);\r\ndrArr(o.x,o.y,tip.x,tip.y,RCOL,3.5,16);\r\ndrLbl('R',tip.x+16,tip.y-16,RCOL,15,true);\r\n}\r\n\r\nfunction drComps(){\r\nvar o=w2s(0,0);\r\nV.forEach(function(v){\r\nif(v.m<1e-9) return;\r\nvar tip=w2s(v.cx,v.cy),tX=w2s(v.cx,0),tY=w2s(0,v.cy);\r\ndrDash(o.x,o.y,tX.x,tX.y,v.c,1);\r\ndrDash(tX.x,tX.y,tip.x,tip.y,v.c,1);\r\ndrDash(o.x,o.y,tY.x,tY.y,v.c,1);\r\ndrDash(tY.x,tY.y,tip.x,tip.y,v.c,1);\r\ncx.fillStyle=v.c;\r\ncx.beginPath();cx.arc(tX.x,tX.y,3,0,Math.PI*2);cx.fill();\r\ncx.beginPath();cx.arc(tY.x,tY.y,3,0,Math.PI*2);cx.fill();\r\n});\r\n}\r\n\r\nfunction drCoords(){\r\nvar hr=CHM&&!SOLV;\r\nV.forEach(function(v){\r\nif(v.m<1e-9) return;\r\nvar tip=w2s(v.cx,v.cy);\r\ncx.font='10px \"SF Mono\",Consolas,monospace';\r\ncx.fillStyle=v.c;\r\ncx.textAlign='left';\r\ncx.textBaseline='top';\r\ncx.fillText('('+fm(v.cx)+', '+fm(v.cy)+')',tip.x+8,tip.y+4);\r\n});\r\nif(MT!=='ninguna'&&!hr){\r\nvar r=calcR();\r\nif(r.m>1e-9){\r\nvar tip=w2s(r.rx,r.ry);\r\ncx.font='10px \"SF Mono\",Consolas,monospace';\r\ncx.fillStyle=RCOL;\r\ncx.textAlign='left';\r\ncx.textBaseline='top';\r\ncx.fillText('('+fm(r.rx)+', '+fm(r.ry)+')',tip.x+8,tip.y+4);\r\n}\r\n}\r\n}\r\n\r\nfunction showASL(txt){aslEl.textContent=txt;aslEl.classList.add('vis')}\r\nfunction hideASL(){aslEl.classList.remove('vis')}\r\n\r\nfunction startAn(){\r\nif(MT==='paralelogramo'&&NV!==2){toast('El paralelogramo requiere 2 vectores','e');return}\r\nANM=true;ACP=false;AST=0;APR=0;ATM=performance.now();\r\ndocument.getElementById('ba').style.display='none';\r\ndocument.getElementById('bs').style.display='block';\r\nrequestAnimationFrame(anLoop);\r\n}\r\n\r\nfunction stopAn(){\r\nANM=false;ACP=true;hideASL();\r\ndocument.getElementById('ba').style.display='';\r\ndocument.getElementById('bs').style.display='none';\r\nrender();\r\n}\r\n\r\nfunction anLoop(ts){\r\nif(!ANM) return;\r\nvar el=ts-ATM,sd=700;\r\nvar tot=MT==='paralelogramo'?5:V.length+1;\r\nAST=Math.floor(el\/sd);\r\nAPR=ease((el%sd)\/sd);\r\nif(AST>=tot){stopAn();return}\r\nrender();\r\nrequestAnimationFrame(anLoop);\r\n}\r\n\r\nfunction gmp(e){\r\nvar r=cv.getBoundingClientRect();\r\nreturn{\r\nx:(e.touches?e.touches[0].clientX:e.clientX)-r.left,\r\ny:(e.touches?e.touches[0].clientY:e.clientY)-r.top\r\n};\r\n}\r\n\r\nfunction gvat(sx,sy){\r\nfor(var i=V.length-1;i>=0;i--){\r\nvar v=V[i];\r\nif(v.m<1e-9) continue;\r\nvar t=w2s(v.cx,v.cy);\r\nif(Math.hypot(sx-t.x,sy-t.y)<TR+4) return i;\r\n}\r\nreturn-1;\r\n}\r\n\r\nfunction onDown(e){\r\nif(ANM) return;\r\nvar p=gmp(e);\r\nif(e.button===2||e.button===1){\r\ne.preventDefault();PAN=true;LMX=p.x;LMY=p.y;\r\ncv.classList.add('grabbing');return;\r\n}\r\nvar idx=gvat(p.x,p.y);\r\nif(idx>=0){DRG=true;DI=idx;cv.classList.add('grabbing')}\r\nelse{PAN=true;LMX=p.x;LMY=p.y;cv.classList.add('grabbing')}\r\n}\r\n\r\nfunction onMove(e){\r\nvar p=gmp(e);\r\nif(DRG){\r\ne.preventDefault();\r\nvar w=s2w(p.x,p.y),v=V[DI];\r\nv.cx=w.x;v.cy=w.y;\r\nv.m=Math.hypot(v.cx,v.cy);\r\nv.a=nang(deg(Math.atan2(v.cy,v.cx)));\r\nif(v.m<1e-9){v.m=0;v.a=0}\r\nACP=false;\r\n\/* --- FIX: pasar -1 para que se actualicen TODOS los campos, incluyendo el vector arrastrado --- *\/\r\nupCardVals(-1);upAnal();upComp2();render();\r\nreturn;\r\n}\r\nif(PAN){\r\ne.preventDefault();\r\nPX+=p.x-LMX;PY+=p.y-LMY;\r\nLMX=p.x;LMY=p.y;render();return;\r\n}\r\nvar idx=gvat(p.x,p.y);\r\nif(idx!==HI){HI=idx;cv.classList.toggle('grab',idx>=0);render()}\r\n}\r\n\r\nfunction onUp(){DRG=false;DI=-1;PAN=false;cv.classList.remove('grabbing');cv.classList.remove('grab')}\r\n\r\nfunction onWh(e){\r\ne.preventDefault();\r\nvar p=gmp(e),w=s2w(p.x,p.y);\r\nvar f=e.deltaY<0?1.12:1\/1.12;\r\nZM=Math.max(.12,Math.min(8,ZM*f));\r\nPX=p.x-cw()\/2-w.x*GU*ZM;\r\nPY=p.y-ch()\/2+w.y*GU*ZM;\r\nupZI();render();\r\n}\r\n\r\nfunction upZI(){document.getElementById('zi').textContent='Zoom: '+Math.round(ZM*100)+'%'}\r\n\r\ncv.addEventListener('mousedown',onDown);\r\nwindow.addEventListener('mousemove',onMove);\r\nwindow.addEventListener('mouseup',onUp);\r\ncv.addEventListener('wheel',onWh,{passive:false});\r\ncv.addEventListener('contextmenu',function(e){e.preventDefault()});\r\ncv.addEventListener('touchstart',function(e){if(e.touches.length===1)onDown(e)},{passive:false});\r\ncv.addEventListener('touchmove',function(e){if(e.touches.length===1)onMove(e)},{passive:false});\r\ncv.addEventListener('touchend',onUp);\r\n\r\nwindow.addEventListener('keydown',function(e){\r\nif(e.target.tagName==='INPUT') return;\r\nvar s=20;\r\nswitch(e.key){\r\ncase'ArrowLeft':PX+=s;render();break;\r\ncase'ArrowRight':PX-=s;render();break;\r\ncase'ArrowUp':PY+=s;render();break;\r\ncase'ArrowDown':PY-=s;render();break;\r\ncase'+':case'=':ZM=Math.min(8,ZM*1.15);upZI();render();break;\r\ncase'-':ZM=Math.max(.12,ZM\/1.15);upZI();render();break;\r\ncase'r':case'R':ZM=1;PX=0;PY=0;upZI();render();break;\r\ncase'Escape':if(ANM)stopAn();break;\r\n}\r\n});\r\n\r\nfunction mkCards(){\r\nvar c=document.getElementById('vcc');\r\nc.innerHTML='';\r\nvar hc=CHM&&!SOLV;\r\nV.forEach(function(v,i){\r\nvar d=document.createElement('div');\r\nd.className='vc';\r\nd.style.borderLeftColor=v.c;\r\nd.innerHTML='<div class=\"vh\">'\r\n+'<button class=\"sb '+(v.s===1?'pos':'neg')+'\" data-i=\"'+i+'\">'+(v.s===1?'+':'−')+'<\/button>'\r\n+'<span class=\"vn\" style=\"color:'+v.c+'\">Vector '+v.n+'<\/span><\/div>'\r\n+'<div class=\"ir\"><div class=\"ig\"><label>|'+v.n+'|<\/label>'\r\n+'<input type=\"number\" step=\"0.01\" min=\"0\" id=\"vm'+i+'\" value=\"'+fm(v.m)+'\"><\/div>'\r\n+'<div class=\"ig\"><label>θ (°)<\/label>'\r\n+'<input type=\"number\" step=\"0.01\" id=\"va'+i+'\" value=\"'+fm(v.a)+'\"><\/div><\/div>'\r\n+'<div class=\"ir\"><div class=\"ig\"><label>'+v.n+'<sub>x<\/sub><\/label>'\r\n+'<input type=\"number\" step=\"0.01\" id=\"vx'+i+'\" value=\"'+(hc?'':fm(v.cx))+'\" class=\"'+(hc?'hv':'')+'\"><\/div>'\r\n+'<div class=\"ig\"><label>'+v.n+'<sub>y<\/sub><\/label>'\r\n+'<input type=\"number\" step=\"0.01\" id=\"vy'+i+'\" value=\"'+(hc?'':fm(v.cy))+'\" class=\"'+(hc?'hv':'')+'\"><\/div><\/div>';\r\nc.appendChild(d);\r\nd.querySelector('.sb').addEventListener('click',function(){togSign(i)});\r\nd.querySelector('#vm'+i).addEventListener('input',function(){onVI(i,'mag')});\r\nd.querySelector('#va'+i).addEventListener('input',function(){onVI(i,'ang')});\r\nd.querySelector('#vx'+i).addEventListener('input',function(){onVI(i,'cx')});\r\nd.querySelector('#vy'+i).addEventListener('input',function(){onVI(i,'cy')});\r\n});\r\n}\r\n\r\nfunction togSign(i){\r\nV[i].s=V[i].s===1?-1:1;\r\nACP=false;mkCards();upExpr();upAnal();upComp2();render();\r\n}\r\n\r\nfunction upCardVals(ci){\r\nvar hc=CHM&&!SOLV;\r\nV.forEach(function(v,i){\r\nvar me=document.getElementById('vm'+i),ae=document.getElementById('va'+i);\r\nvar xe=document.getElementById('vx'+i),ye=document.getElementById('vy'+i);\r\nif(!me) return;\r\n\/* Cuando ci===-1 se actualizan TODOS los campos (caso: arrastre desde canvas) *\/\r\nif(ci===-1||i!==ci) me.value=fm(v.m);\r\nif(ci===-1||i!==ci) ae.value=fm(v.a);\r\nif(hc){xe.value='';ye.value='';xe.classList.add('hv');ye.classList.add('hv')}\r\nelse{\r\nif(ci===-1||i!==ci) xe.value=fm(v.cx);\r\nif(ci===-1||i!==ci) ye.value=fm(v.cy);\r\nxe.classList.remove('hv');ye.classList.remove('hv');\r\n}\r\n});\r\n}\r\n\r\nfunction onVI(i,f){\r\nvar v=V[i];\r\nvar me=document.getElementById('vm'+i),ae=document.getElementById('va'+i);\r\nvar xe=document.getElementById('vx'+i),ye=document.getElementById('vy'+i);\r\nif(f==='mag'||f==='ang'){\r\nv.m=Math.max(0,parseFloat(me.value)||0);\r\nv.a=parseFloat(ae.value)||0;\r\nupPolar(i);\r\nxe.value=fm(v.cx);ye.value=fm(v.cy);\r\n}else{\r\nv.cx=parseFloat(xe.value)||0;\r\nv.cy=parseFloat(ye.value)||0;\r\nupComp(i);\r\nme.value=fm(v.m);ae.value=fm(v.a);\r\n}\r\nACP=false;upExpr();upAnal();upComp2();render();\r\n}\r\n\r\nfunction upMT(){\r\nvar rp=document.getElementById('rp'),cw2=document.getElementById('cw');\r\nvar pn=document.getElementById('pn2'),ml=document.getElementById('ml');\r\nvar baEl=document.getElementById('ba'),bsEl=document.getElementById('bs');\r\n\r\nif(MT==='ninguna'){\r\nml.textContent='SIN RESULTANTE';\r\nrp.classList.remove('dis');\r\ncw2.style.display='none';\r\npn.innerHTML='';\r\nbaEl.style.display='none';\r\nbsEl.style.display='none';\r\nif(ANM) stopAn();\r\n}else if(MT==='poligonal'){\r\nml.textContent='POLIGONAL';\r\nrp.classList.remove('dis');\r\ncw2.style.display='none';\r\npn.innerHTML='';\r\nbaEl.style.display='';\r\nbsEl.style.display='none';\r\n}else if(MT==='paralelogramo'){\r\nif(NV!==2){\r\nrp.classList.add('dis');cw2.style.display='none';\r\npn.innerHTML='<div class=\"pn\">El paralelogramo solo aplica con 2 vectores.<\/div>';\r\nMT='poligonal';\r\ndocument.querySelector('input[name=\"mt\"][value=\"poligonal\"]').checked=true;\r\nml.textContent='POLIGONAL';\r\nbaEl.style.display='';\r\nbsEl.style.display='none';\r\n}else{\r\nml.textContent='PARALELOGRAMO';\r\nrp.classList.remove('dis');\r\ncw2.style.display='flex';\r\npn.innerHTML='';\r\nbaEl.style.display='';\r\nbsEl.style.display='none';\r\n}\r\n}\r\nACP=false;upExpr();\r\n}\r\n\r\nfunction upExpr(){\r\nvar el=document.getElementById('el');\r\nvar parts=V.map(function(v,i){\r\nif(i===0) return(v.s===-1?'-':'')+v.n;\r\nreturn(v.s===-1?' - ':' + ')+v.n;\r\n});\r\nif(MT==='ninguna') el.textContent=parts.join('');\r\nelse el.textContent='R = '+parts.join('');\r\n}\r\n\r\nfunction upAnal(){\r\nvar s=document.getElementById('ans'),hr=CHM&&!SOLV;\r\nif(hr){s.innerHTML='<p class=\"it\">Componentes y resultante ocultos en modo desafio.<\/p>';return}\r\n\r\nif(MT==='ninguna'){\r\nvar h='<table class=\"at\"><tr><th>Vector<\/th><th>X<\/th><th>Y<\/th><\/tr>';\r\nV.forEach(function(v){\r\nvar lbl=v.s===-1?'-'+v.n:v.n;\r\nh+='<tr><td style=\"color:'+v.c+';font-weight:700\">'+lbl+'<\/td><td>'+fm(v.cx)+'<\/td><td>'+fm(v.cy)+'<\/td><\/tr>';\r\n});\r\nh+='<\/table><p class=\"it\">Selecciona un metodo grafico para calcular la resultante.<\/p>';\r\ns.innerHTML=h;return;\r\n}\r\n\r\nvar h='<table class=\"at\"><tr><th>Vector<\/th><th>Efectiva X<\/th><th>Efectiva Y<\/th><\/tr>';\r\nV.forEach(function(v){\r\nvar ex=v.s*v.cx,ey=v.s*v.cy;\r\nvar lbl=v.s===-1?'-'+v.n:v.n;\r\nh+='<tr><td style=\"color:'+v.c+';font-weight:700\">'+lbl+'<\/td><td>'+fm(ex)+'<\/td><td>'+fm(ey)+'<\/td><\/tr>';\r\n});\r\nvar r=calcR();\r\nh+='<tr class=\"sr\"><td>Σ<\/td><td>'+fm(r.rx)+'<\/td><td>'+fm(r.ry)+'<\/td><\/tr><\/table>';\r\nh+='<div class=\"fs\">';\r\nvar sxP=V.map(function(v){return fms(v.s*v.cx)}).join(' + ');\r\nh+='<div>ΣX = '+sxP+' = '+fm(r.rx)+'<\/div>';\r\nvar syP=V.map(function(v){return fms(v.s*v.cy)}).join(' + ');\r\nh+='<div>ΣY = '+syP+' = '+fm(r.ry)+'<\/div>';\r\nh+='<div class=\"sp\"><\/div>';\r\nvar rx2=(r.rx*r.rx).toFixed(2),ry2=(r.ry*r.ry).toFixed(2);\r\nvar sm=(r.rx*r.rx+r.ry*r.ry).toFixed(2);\r\nh+='<div>R = √('+fm(r.rx)+'² + '+fm(r.ry)+'²)<\/div>';\r\nh+='<div>R = √('+rx2+' + '+ry2+')<\/div>';\r\nh+='<div>R = √('+sm+')<\/div>';\r\nh+='<div class=\"rl2\">R = '+fm(r.m)+'<\/div>';\r\nh+='<div class=\"sp\"><\/div>';\r\nh+='<div>θ = atan2('+fm(r.ry)+', '+fm(r.rx)+')<\/div>';\r\nh+='<div class=\"rl2\">θ = '+fm(r.a)+'°<\/div><\/div>';\r\ns.innerHTML=h;\r\n}\r\n\r\nfunction upComp2(){\r\nvar s=document.getElementById('cps'),hr=CHM&&!SOLV,r=calcR();\r\nif(hr){s.innerHTML='<p class=\"it\">Disponible al mostrar la solucion.<\/p>';return}\r\nif(MT==='ninguna'){s.innerHTML='<p class=\"it\">Selecciona un metodo grafico para ver la comparacion.<\/p>';return}\r\nvar mn=MT==='poligonal'?'Poligonal':'Paralelogramo';\r\nvar h='<table class=\"ct\"><tr><th>Metodo<\/th><th>Modulo<\/th><th>Angulo<\/th><\/tr>';\r\nh+='<tr><td>Grafico ('+mn+')<\/td><td>'+fm(r.m)+'<\/td><td>'+fm(r.a)+'°<\/td><\/tr>';\r\nh+='<tr><td>Analitico<\/td><td>'+fm(r.m)+'<\/td><td>'+fm(r.a)+'°<\/td><\/tr><\/table>';\r\nh+='<div class=\"mm\">✓ Ambos metodos producen el mismo resultado.<\/div>';\r\ns.innerHTML=h;\r\n}\r\n\r\nfunction upAll(){upCardVals(-1);upExpr();upAnal();upComp2();render()}\r\n\r\nfunction genEx(){\r\nvar n=Math.floor(Math.random()*4)+1;\r\nNV=n;V=[];\r\nfor(var i=0;i<n;i++){\r\nvar m=Math.round((Math.random()*8+1.5)*100)\/100;\r\nvar a=Math.round(Math.random()*3600)\/10;\r\nvar s=Math.random()<.35?-1:1;\r\nV.push(mkVec(i,m,a,s));\r\n}\r\nACP=false;SOLV=!CHM;\r\ndocument.querySelectorAll('#nb button').forEach(function(b){b.classList.toggle('on',parseInt(b.dataset.n)===n)});\r\nupMT();mkCards();upAll();\r\ntoast('Ejercicio generado: '+n+' vector'+(n>1?'es':''),'i');\r\n}\r\n\r\nfunction showSol(){SOLV=true;mkCards();upAll();toast('Solucion revelada','i')}\r\n\r\nfunction verify(){\r\nvar im=parseFloat(document.getElementById('vm2').value);\r\nvar ia=parseFloat(document.getElementById('va2').value);\r\nvar re=document.getElementById('vres');\r\nif(isNaN(im)||isNaN(ia)){\r\nre.className='vr no';re.style.display='block';\r\nre.textContent='Ingresa ambos valores.';return;\r\n}\r\nvar r=calcR();\r\nvar me=r.m>1e-9?Math.abs(im-r.m)\/r.m*100:(Math.abs(im)>.01?100:0);\r\nvar ae=Math.abs(ia-r.a);if(ae>180) ae=360-ae;\r\nre.style.display='block';\r\nif(me<2&&ae<2){\r\nre.className='vr ok';\r\nre.innerHTML='✓ Correcto. Respuesta dentro del margen de tolerancia.';\r\ntoast('Respuesta correcta','s');\r\n}else{\r\nre.className='vr no';\r\nre.innerHTML='✗ Incorrecto.<br>Error modulo: '+me.toFixed(1)+'%<br>Error angulo: '+ae.toFixed(1)+'°';\r\ntoast('Respuesta incorrecta','e');\r\n}\r\n}\r\n\r\nfunction toast(msg,t){\r\nt=t||'i';\r\nvar d=document.createElement('div');\r\nd.className='toast toast-'+t;\r\nd.textContent=msg;\r\ndocument.getElementById('tc').appendChild(d);\r\nrequestAnimationFrame(function(){d.classList.add('show')});\r\nsetTimeout(function(){d.classList.remove('show');setTimeout(function(){d.remove()},300)},2800);\r\n}\r\n\r\nfunction tryInit(){\r\nrsz();\r\nvar p=cv.parentElement;\r\nif(p.clientWidth>10&&p.clientHeight>10){\r\nvar nb=document.getElementById('nb');\r\n[1,2,3,4].forEach(function(n){\r\nvar b=document.createElement('button');\r\nb.dataset=n;\r\nb.textContent=n;\r\nif(n===NV) b.classList.add('on');\r\nb.addEventListener('click',function(){\r\ndocument.querySelectorAll('#nb button').forEach(function(x){x.classList.remove('on')});\r\nb.classList.add('on');setNV(n);\r\n});\r\nnb.appendChild(b);\r\n});\r\n\r\ndocument.querySelectorAll('input[name=\"mt\"]').forEach(function(r){\r\nr.addEventListener('change',function(){MT=r.value;ACP=false;upMT();render()});\r\n});\r\n\r\ndocument.getElementById('cp').addEventListener('change',function(e){SHP=e.target.checked;render()});\r\ndocument.getElementById('cc').addEventListener('change',function(e){SHC=e.target.checked;render()});\r\ndocument.getElementById('cd').addEventListener('change',function(e){SHD=e.target.checked;render()});\r\ndocument.getElementById('ba').addEventListener('click',startAn);\r\ndocument.getElementById('bs').addEventListener('click',stopAn);\r\ndocument.getElementById('zin').addEventListener('click',function(){ZM=Math.min(8,ZM*1.25);upZI();render()});\r\ndocument.getElementById('zout').addEventListener('click',function(){ZM=Math.max(.12,ZM\/1.25);upZI();render()});\r\ndocument.getElementById('zrst').addEventListener('click',function(){ZM=1;PX=0;PY=0;upZI();render()});\r\ndocument.getElementById('bg').addEventListener('click',genEx);\r\ndocument.getElementById('bsol').addEventListener('click',showSol);\r\ndocument.getElementById('bv').addEventListener('click',verify);\r\ndocument.getElementById('chm').addEventListener('change',function(e){\r\nCHM=e.target.checked;SOLV=!CHM;\r\ndocument.getElementById('vsec').style.display=CHM?'block':'none';\r\ndocument.getElementById('vres').style.display='none';\r\nif(CHM){document.getElementById('vm2').value='';document.getElementById('va2').value=''}\r\nmkCards();upAll();\r\n});\r\n\r\ninitV();upZI();\r\nif(window.ResizeObserver) new ResizeObserver(function(){render()}).observe(cv.parentElement);\r\n}else{\r\nsetTimeout(tryInit,60);\r\n}\r\n}\r\n\r\nif(document.readyState==='complete') tryInit();\r\nelse window.addEventListener('load',tryInit);\r\n<\/script>\r\n\r\n<style>\r\n.btn-guia {\r\nposition: fixed;\r\nbottom: 24px;\r\nleft: 24px;\r\nz-index: 999;\r\nbackground: #3fb950;\r\ncolor: #0d1117;\r\nfont-family: 'Space Grotesk', sans-serif;\r\nfont-size: 0.82rem;\r\nfont-weight: 700;\r\nletter-spacing: 1px;\r\ntext-transform: uppercase;\r\npadding: 10px 18px;\r\nborder-radius: 8px;\r\nborder: none;\r\ncursor: pointer;\r\nbox-shadow: 0 4px 20px rgba(63,185,80,0.35);\r\ntransition: transform 0.2s, box-shadow 0.2s;\r\ndisplay: flex;\r\nalign-items: center;\r\ngap: 8px;\r\n}\r\n.btn-guia:hover {\r\ntransform: translateY(-2px);\r\nbox-shadow: 0 6px 24px rgba(63,185,80,0.5);\r\n}\r\n.btn-guia svg { width: 15px; height: 15px; flex-shrink: 0; }\r\n.guia-panel {\r\nposition: fixed;\r\nbottom: 72px;\r\nleft: 24px;\r\nwidth: 400px;\r\nmax-height: 70vh;\r\nz-index: 1000;\r\nbackground: #ffffff;\r\nborder: 1px solid #d0d7de;\r\nborder-radius: 12px;\r\nbox-shadow: 0 16px 48px rgba(0,0,0,0.4);\r\ndisplay: none;\r\nflex-direction: column;\r\noverflow: hidden;\r\nfont-family: 'Space Grotesk', sans-serif;\r\n}\r\n.guia-panel.visible { display: flex; }\r\n.guia-header {\r\ndisplay: flex;\r\njustify-content: space-between;\r\nalign-items: center;\r\npadding: 12px 16px;\r\nborder-bottom: 1px solid #d0d7de;\r\nflex-shrink: 0;\r\nbackground: #f6f8fa;\r\n}\r\n.guia-header-title {\r\ndisplay: flex;\r\nalign-items: center;\r\ngap: 8px;\r\nfont-size: 0.85rem;\r\nfont-weight: 700;\r\ncolor: #1f2328;\r\n}\r\n.guia-header-title svg { width: 15px; height: 15px; color: #3fb950; }\r\n.guia-close {\r\nbackground: none;\r\nborder: none;\r\ncolor: #636c76;\r\nfont-size: 1rem;\r\ncursor: pointer;\r\npadding: 2px 7px;\r\nborder-radius: 4px;\r\ntransition: color 0.2s, background 0.2s;\r\nline-height: 1;\r\n}\r\n.guia-close:hover { color: #1f2328; background: rgba(0,0,0,0.06); }\r\n.guia-body {\r\noverflow-y: auto;\r\npadding: 18px 18px 20px;\r\ncolor: #1f2328;\r\nfont-size: 0.83rem;\r\nline-height: 1.65;\r\nbackground: #ffffff;\r\n}\r\n.guia-body::-webkit-scrollbar { width: 5px; }\r\n.guia-body::-webkit-scrollbar-track { background: transparent; }\r\n.guia-body::-webkit-scrollbar-thumb { background: #d0d7de; border-radius: 3px; }\r\n.guia-section-title {\r\nfont-size: 1rem;\r\nfont-weight: 700;\r\ncolor: #1f2328;\r\nmargin: 0 0 12px 0;\r\npadding-bottom: 8px;\r\nborder-bottom: 1px solid #d0d7de;\r\n}\r\n.guia-block { margin-bottom: 14px; }\r\n.guia-label {\r\nfont-size: 0.72rem;\r\ntext-transform: uppercase;\r\nletter-spacing: 1px;\r\ncolor: #636c76;\r\nmargin-bottom: 4px;\r\n}\r\n.guia-text { color: #1f2328; }\r\n.guia-formula {\r\nbackground: #f6f8fa;\r\nborder: 1px solid #d0d7de;\r\nborder-radius: 6px;\r\npadding: 10px 14px;\r\ntext-align: center;\r\nfont-family: 'JetBrains Mono', monospace;\r\nfont-size: 0.88rem;\r\ncolor: #0550ae;\r\nmargin: 10px 0;\r\n}\r\n.guia-steps { list-style: none; margin: 0; padding: 0; counter-reset: steps; }\r\n.guia-steps li {\r\ncounter-increment: steps;\r\ndisplay: flex;\r\ngap: 10px;\r\nmargin-bottom: 8px;\r\nalign-items: flex-start;\r\ncolor: #1f2328;\r\n}\r\n.guia-steps li::before {\r\ncontent: counter(steps);\r\nbackground: #dafbe1;\r\ncolor: #1a7f37;\r\nfont-size: 0.72rem;\r\nfont-weight: 700;\r\nwidth: 20px;\r\nheight: 20px;\r\nborder-radius: 50%;\r\ndisplay: flex;\r\nalign-items: center;\r\njustify-content: center;\r\nflex-shrink: 0;\r\nmargin-top: 1px;\r\nborder: 1px solid #1a7f37;\r\n}\r\n.guia-result {\r\nbackground: #dafbe1;\r\nborder-left: 3px solid #1a7f37;\r\nborder-radius: 0 6px 6px 0;\r\npadding: 10px 14px;\r\ncolor: #1f2328;\r\nfont-size: 0.82rem;\r\nmargin-top: 10px;\r\n}\r\n.guia-params {\r\nbackground: #f6f8fa;\r\nborder: 1px solid #d0d7de;\r\nborder-radius: 6px;\r\npadding: 10px 14px;\r\nfont-size: 0.8rem;\r\ncolor: #1f2328;\r\n}\r\n.guia-params span { color: #0550ae; font-family: 'JetBrains Mono', monospace; }\r\n.var { font-family: 'JetBrains Mono', monospace; }\r\n.var.pos { color: #cf222e; }\r\n.var.neg { color: #0550ae; }\r\n.var.neu { color: #7d4e00; }\r\n.var.ok { color: #1a7f37; }\r\n<\/style>\r\n\r\n<div class=\"guia-panel\" id=\"guiaPanel\">\r\n<div class=\"guia-header\">\r\n<div class=\"guia-header-title\">\r\n<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\r\nGu\u00eda de uso\r\n<\/div>\r\n<button class=\"guia-close\" onclick=\"toggleGuia()\">✕<\/button>\r\n<\/div>\r\n<div class=\"guia-body\">\r\n<div style=\"font-family: Arial, sans-serif; line-height: 1.6; color: #333;\">\r\n<h3 style=\"color: #0056b3;\"><strong><span style=\"font-size: 16px; color: #000080;\"><\/span><\/strong><strong><span style=\"font-size: 16px; color: #ff0000;\"> <span style=\"color: #ff0000;\"><\/span><\/span><\/strong><\/h3>\r\n<strong>Objetivo:<\/strong> Comprender las magnitudes vectoriales mediante la representación gráfica y analítica de vectores en el plano bidimensional, operando de forma interactiva con la suma, resta y descomposición en componentes rectangulares.\r\n<strong>Descripción breve:<\/strong> Simulación interactiva que permite manipular vectores en un sistema de coordenadas cartesianas. Facilita la visualización del método gráfico del paralelogramo o de la poligonal (punta y cola) y la validación analítica mediante la suma de sus componentes algebraicas x e y:\r\n<div style=\"text-align: center; margin: 20px 0; background: #f0f4f8; padding: 10px; border-radius: 5px;\">R = A + B → Rx = Ax + Bx e Ry = Ay + By<\/div>\r\n<strong>Cómo usar (pasos):<\/strong>\r\n<ul style=\"margin-left: 20px;\">\r\n<li>Arrastrar los vectores desde el panel origen y modificar su longitud y dirección sobre la grilla cuadriculada. Los campos del panel se actualizan en tiempo real.<\/li>\r\n<li>Activar la casilla de \"Componentes\" para visualizar las proyecciones horizontales y verticales de cada vector individual.<\/li>\r\n<li>Seleccionar la operación deseada (Suma o Resta) en el panel de control para que el simulador genere automáticamente el vector resultante R.<\/li>\r\n<li>Habilitar la opción del \"Método del Paralelogramo\" para observar cómo se disponen gráficamente los vectores en el plano.<\/li>\r\n<li>Monitorear en la tabla dinámica de datos los valores de magnitud (módulo), ángulo de dirección (θ) y las coordenadas de cada componente.<\/li>\r\n<\/ul>\r\n<strong>Parámetros ajustables:<\/strong> Módulo y dirección de los vectores, tipo de operación (adición\/sustracción), visualización de componentes rectangulares, grilla de coordenadas y vectores resultantes.\r\n<p style=\"background-color: #f8f9fa; padding: 15px; border-left: 5px solid #0056b3;\"><strong>Resultados esperados \/ observaciones:<\/strong> Se comprueba que el vector resta A - B equivale a sumar al vector A el opuesto de B (invertido 180°). Asimismo, se verifica que el método analítico por componentes proporciona una precisión matemática exacta que coincide con la resolución del método geométrico implementado en la pantalla.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<button class=\"btn-guia\" onclick=\"toggleGuia()\">\r\n<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\r\nGuía de uso\r\n<\/button>\r\n\r\n<script>\r\nfunction toggleGuia() {\r\ndocument.getElementById('guiaPanel').classList.toggle('visible');\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Suma y Resta de Vectores \u2014 Fisica General Suma y Resta de Vectores Fisica Basica \u2014 Simulacion Interactiva Configuracion CANTIDAD DE VECTORES Vectores Metodo Grafico…<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-8305","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>suma_resta_vectores - F\u00edsica 2<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/suma_resta_vectores\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"suma_resta_vectores - F\u00edsica 2\" \/>\n<meta property=\"og:description\" content=\"Suma y Resta de Vectores \u2014 Fisica General Suma y Resta de Vectores Fisica Basica \u2014 Simulacion Interactiva Configuracion CANTIDAD DE VECTORES Vectores Metodo Grafico…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/suma_resta_vectores\/\" \/>\n<meta property=\"og:site_name\" content=\"F\u00edsica 2\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-21T14:49:38+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/suma_resta_vectores\\\/\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/suma_resta_vectores\\\/\",\"name\":\"suma_resta_vectores - F\u00edsica 2\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#website\"},\"datePublished\":\"2026-07-05T15:09:41+00:00\",\"dateModified\":\"2026-08-21T14:49:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/suma_resta_vectores\\\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/suma_resta_vectores\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/index.php\\\/suma_resta_vectores\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"suma_resta_vectores\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#website\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\",\"name\":\"F\u00edsica 2\",\"description\":\"FICA - UNSL\",\"publisher\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-AR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#organization\",\"name\":\"SAC- Secretar\u00eda General FICA\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-AR\",\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/SG-Logo.png\",\"contentUrl\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/SG-Logo.png\",\"width\":4483,\"height\":1231,\"caption\":\"SAC- Secretar\u00eda General FICA\"},\"image\":{\"@id\":\"https:\\\/\\\/fisica2.fica.unsl.edu.ar\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"suma_resta_vectores - F\u00edsica 2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/suma_resta_vectores\/","og_locale":"es_ES","og_type":"article","og_title":"suma_resta_vectores - F\u00edsica 2","og_description":"Suma y Resta de Vectores \u2014 Fisica General Suma y Resta de Vectores Fisica Basica \u2014 Simulacion Interactiva Configuracion CANTIDAD DE VECTORES Vectores Metodo Grafico…","og_url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/suma_resta_vectores\/","og_site_name":"F\u00edsica 2","article_modified_time":"2026-08-21T14:49:38+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/suma_resta_vectores\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/suma_resta_vectores\/","name":"suma_resta_vectores - F\u00edsica 2","isPartOf":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website"},"datePublished":"2026-07-05T15:09:41+00:00","dateModified":"2026-08-21T14:49:38+00:00","breadcrumb":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/suma_resta_vectores\/#breadcrumb"},"inLanguage":"es-AR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/suma_resta_vectores\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/suma_resta_vectores\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/fisica2.fica.unsl.edu.ar\/"},{"@type":"ListItem","position":2,"name":"suma_resta_vectores"}]},{"@type":"WebSite","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#website","url":"https:\/\/fisica2.fica.unsl.edu.ar\/","name":"F\u00edsica 2","description":"FICA - UNSL","publisher":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fisica2.fica.unsl.edu.ar\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-AR"},{"@type":"Organization","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#organization","name":"SAC- Secretar\u00eda General FICA","url":"https:\/\/fisica2.fica.unsl.edu.ar\/","logo":{"@type":"ImageObject","inLanguage":"es-AR","@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/","url":"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png","contentUrl":"https:\/\/fisica2.fica.unsl.edu.ar\/wp-content\/uploads\/2021\/11\/SG-Logo.png","width":4483,"height":1231,"caption":"SAC- Secretar\u00eda General FICA"},"image":{"@id":"https:\/\/fisica2.fica.unsl.edu.ar\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/8305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/comments?post=8305"}],"version-history":[{"count":28,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/8305\/revisions"}],"predecessor-version":[{"id":8764,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/8305\/revisions\/8764"}],"wp:attachment":[{"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/media?parent=8305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}