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 B\u00e1sica \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\n style=\"height:32px; width:auto; margin-top:8px; display:block; max-width:100%;\">\r\n<\/a>\r\n \r\n \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\n s=s||1;var r=rad(a);\r\n return{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\n var df=[[5,30],[4,135],[3,220],[2.5,310]];\r\n V=[];\r\n for(var i=0;i<NV;i++) V.push(mkVec(i,df[i][0],df[i][1],1));\r\n ACP=false;\r\n mkCards();\r\n upAll();\r\n}\r\n\r\nfunction setNV(n){\r\n if(n===NV) return;\r\n var old=V.slice();\r\n var df=[[5,30],[4,135],[3,220],[2.5,310]];\r\n NV=n;\r\n V=[];\r\n for(var i=0;i<n;i++) V.push(old[i]||mkVec(i,df[i][0],df[i][1],1));\r\n ACP=false;\r\n mkCards();\r\n upMT();\r\n upAll();\r\n}\r\n\r\nfunction upPolar(i){\r\n var v=V[i],r=rad(v.a);\r\n v.cx=v.m*Math.cos(r);\r\n v.cy=v.m*Math.sin(r);\r\n}\r\n\r\nfunction upComp(i){\r\n var v=V[i];\r\n v.m=Math.hypot(v.cx,v.cy);\r\n var a=deg(Math.atan2(v.cy,v.cx));\r\n v.a=nang(a);\r\n if(v.m<1e-9){v.m=0;v.a=0;v.cx=0;v.cy=0}\r\n}\r\n\r\nfunction calcR(){\r\n var sx=0,sy=0;\r\n V.forEach(function(v){sx+=v.s*v.cx;sy+=v.s*v.cy});\r\n var mg=Math.hypot(sx,sy);\r\n var an=nang(deg(Math.atan2(sy,sx)));\r\n if(mg<1e-9) return{rx:0,ry:0,m:0,a:0};\r\n return{rx:sx,ry:sy,m:mg,a:an};\r\n}\r\n\r\nfunction rsz(){\r\n var p=cv.parentElement;\r\n var w=p.clientWidth,h=p.clientHeight;\r\n if(w<10) w=800;\r\n if(h<10) h=600;\r\n var dpr=window.devicePixelRatio||1;\r\n var bw=Math.round(w*dpr),bh=Math.round(h*dpr);\r\n if(cv.width!==bw||cv.height!==bh){\r\n cv.width=bw;\r\n cv.height=bh;\r\n cv.style.width=w+'px';\r\n cv.style.height=h+'px';\r\n cx.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\n rsz();\r\n var w=cw(),h=ch();\r\n cx.clearRect(0,0,w,h);\r\n cx.fillStyle='#fefefe';\r\n cx.fillRect(0,0,w,h);\r\n drGrid();\r\n drAxes();\r\n var hr=CHM&&!SOLV;\r\n if(MT==='ninguna'){\r\n drOrig(1);\r\n }else if(MT==='poligonal'){\r\n drPoly(hr);\r\n }else if(MT==='paralelogramo'){\r\n drPara(hr);\r\n }\r\n if(SHC&&!ANM) drComps();\r\n if(SHD&&!ANM) drCoords();\r\n}\r\n\r\nfunction gStep(){\r\n var p=GU*ZM;\r\n if(p<15) return 5;\r\n if(p<30) return 2;\r\n if(p>200) return .25;\r\n if(p>100) return .5;\r\n return 1;\r\n}\r\n\r\nfunction drGrid(){\r\n var st=gStep();\r\n var tl=s2w(0,0),br=s2w(cw(),ch());\r\n cx.strokeStyle='#eaeaea';\r\n cx.lineWidth=.5;\r\n var x0=Math.floor(tl.x\/st)*st,x1=Math.ceil(br.x\/st)*st;\r\n for(var x=x0;x<=x1;x+=st){\r\n if(Math.abs(x)<1e-9) continue;\r\n var p=w2s(x,0);\r\n cx.beginPath();cx.moveTo(p.x,0);cx.lineTo(p.x,ch());cx.stroke();\r\n }\r\n var y0=Math.floor(br.y\/st)*st,y1=Math.ceil(tl.y\/st)*st;\r\n for(var y=y0;y<=y1;y+=st){\r\n if(Math.abs(y)<1e-9) continue;\r\n var p=w2s(0,y);\r\n cx.beginPath();cx.moveTo(0,p.y);cx.lineTo(cw(),p.y);cx.stroke();\r\n }\r\n}\r\n\r\nfunction drAxes(){\r\n var o=w2s(0,0),st=gStep(),tl=s2w(0,0),br=s2w(cw(),ch());\r\n cx.strokeStyle='#444';\r\n cx.lineWidth=1.5;\r\n cx.beginPath();cx.moveTo(0,o.y);cx.lineTo(cw(),o.y);cx.stroke();\r\n cx.beginPath();cx.moveTo(o.x,0);cx.lineTo(o.x,ch());cx.stroke();\r\n cx.fillStyle='#888';\r\n cx.font='10px -apple-system,sans-serif';\r\n cx.textAlign='center';\r\n cx.textBaseline='top';\r\n var x0=Math.floor(tl.x\/st)*st,x1=Math.ceil(br.x\/st)*st;\r\n for(var x=x0;x<=x1;x+=st){\r\n if(Math.abs(x)<1e-9) continue;\r\n var p=w2s(x,0);\r\n cx.strokeStyle='#444';cx.lineWidth=1;\r\n cx.beginPath();cx.moveTo(p.x,o.y-3);cx.lineTo(p.x,o.y+3);cx.stroke();\r\n cx.fillText(Number.isInteger(x)?''+x:x.toFixed(1),p.x,o.y+6);\r\n }\r\n cx.textAlign='right';\r\n cx.textBaseline='middle';\r\n var y0=Math.floor(br.y\/st)*st,y1=Math.ceil(tl.y\/st)*st;\r\n for(var y=y0;y<=y1;y+=st){\r\n if(Math.abs(y)<1e-9) continue;\r\n var p=w2s(0,y);\r\n cx.strokeStyle='#444';cx.lineWidth=1;\r\n cx.beginPath();cx.moveTo(o.x-3,p.y);cx.lineTo(o.x+3,p.y);cx.stroke();\r\n cx.fillText(Number.isInteger(y)?''+y:y.toFixed(1),o.x-7,p.y);\r\n }\r\n cx.textAlign='right';\r\n cx.textBaseline='top';\r\n cx.fillText('O',o.x-6,o.y+6);\r\n cx.fillStyle='#444';\r\n var xp=w2s(br.x,0);\r\n if(xp.x>o.x+30){\r\n cx.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\n cx.textAlign='right';cx.textBaseline='bottom';cx.fillText('X',xp.x-4,o.y-6);\r\n }\r\n var yp=w2s(0,tl.y);\r\n if(yp.y<o.y-30){\r\n cx.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\n cx.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\n var dx=tx-fx,dy=ty-fy,ln=Math.hypot(dx,dy);\r\n if(ln<2) return;\r\n var an=Math.atan2(dy,dx);\r\n hl=hl||Math.min(14,ln*.3);\r\n cx.strokeStyle=col;\r\n cx.fillStyle=col;\r\n cx.lineWidth=lw||2;\r\n cx.lineCap='round';\r\n cx.lineJoin='round';\r\n cx.beginPath();\r\n cx.moveTo(fx,fy);\r\n cx.lineTo(tx-hl*.6*Math.cos(an),ty-hl*.6*Math.sin(an));\r\n cx.stroke();\r\n cx.beginPath();\r\n cx.moveTo(tx,ty);\r\n cx.lineTo(tx-hl*Math.cos(an-.45),ty-hl*Math.sin(an-.45));\r\n cx.lineTo(tx-hl*.55*Math.cos(an),ty-hl*.55*Math.sin(an));\r\n cx.lineTo(tx-hl*Math.cos(an+.45),ty-hl*Math.sin(an+.45));\r\n cx.closePath();\r\n cx.fill();\r\n}\r\n\r\nfunction drDashedArr(fx,fy,tx,ty,col,lw,hl){\r\n var dx=tx-fx,dy=ty-fy,ln=Math.hypot(dx,dy);\r\n if(ln<2) return;\r\n var an=Math.atan2(dy,dx);\r\n hl=hl||Math.min(14,ln*.3);\r\n cx.strokeStyle=col;\r\n cx.fillStyle=col;\r\n cx.lineWidth=lw||2;\r\n cx.lineCap='round';\r\n cx.lineJoin='round';\r\n cx.setLineDash([8,5]);\r\n cx.beginPath();\r\n cx.moveTo(fx,fy);\r\n cx.lineTo(tx-hl*.6*Math.cos(an),ty-hl*.6*Math.sin(an));\r\n cx.stroke();\r\n cx.setLineDash([]);\r\n cx.beginPath();\r\n cx.moveTo(tx,ty);\r\n cx.lineTo(tx-hl*Math.cos(an-.45),ty-hl*Math.sin(an-.45));\r\n cx.lineTo(tx-hl*.55*Math.cos(an),ty-hl*.55*Math.sin(an));\r\n cx.lineTo(tx-hl*Math.cos(an+.45),ty-hl*Math.sin(an+.45));\r\n cx.closePath();\r\n cx.fill();\r\n}\r\n\r\nfunction drDash(x1,y1,x2,y2,col,lw){\r\n cx.strokeStyle=col;\r\n cx.lineWidth=lw||1;\r\n cx.setLineDash([6,4]);\r\n cx.beginPath();cx.moveTo(x1,y1);cx.lineTo(x2,y2);cx.stroke();\r\n cx.setLineDash([]);\r\n}\r\n\r\nfunction drLbl(txt,x,y,col,sz,bd){\r\n cx.font=(bd?'bold ':'')+(sz||13)+'px -apple-system,sans-serif';\r\n cx.fillStyle=col||'#333';\r\n cx.textAlign='center';\r\n cx.textBaseline='middle';\r\n cx.fillText(txt,x,y);\r\n}\r\n\r\nfunction drOrig(al){\r\n var o=w2s(0,0);\r\n V.forEach(function(v,i){\r\n if(v.m<1e-9) return;\r\n var tip=w2s(v.cx,v.cy);\r\n cx.globalAlpha=al!==undefined?al:1;\r\n var lw=(HI===i&&!ANM)?3:2.2;\r\n drArr(o.x,o.y,tip.x,tip.y,v.c,lw);\r\n drLbl(v.n,tip.x+14,tip.y-14,v.c,13,true);\r\n cx.globalAlpha=1;\r\n });\r\n}\r\n\r\nfunction drPoly(hr){\r\n var o=w2s(0,0),anim=ANM,comp=ACP||!anim;\r\n if(comp||!anim) drOrig(.3);\r\n\r\n var px=0,py=0;\r\n var polyLabels=V.map(function(v){return 'Dibujando '+(v.s===-1?'-':'')+v.n});\r\n polyLabels.push('Trazando resultante R');\r\n\r\n for(var i=0;i<V.length;i++){\r\n if(anim&&i>AST) break;\r\n var v=V[i],ex=v.s*v.cx,ey=v.s*v.cy;\r\n var t=1;\r\n if(anim&&i===AST) t=APR;\r\n var from=w2s(px,py),toF=w2s(px+ex,py+ey);\r\n var toX=from.x+(toF.x-from.x)*t,toY=from.y+(toF.y-from.y)*t;\r\n if(i>0&&(comp||(anim&&i<=AST))) drDash(o.x,o.y,from.x,from.y,'#bbb',.8);\r\n if(v.s===-1) drDashedArr(from.x,from.y,toX,toY,v.c,2.5);\r\n else drArr(from.x,from.y,toX,toY,v.c,2.5);\r\n if(t>.5){\r\n var mx=(from.x+toX)\/2,my=(from.y+toY)\/2;\r\n var ddx=toX-from.x,ddy=toY-from.y,ll=Math.hypot(ddx,ddy);\r\n if(ll>20){\r\n var nx=-ddy\/ll*16,ny=ddx\/ll*16;\r\n cx.globalAlpha=t;\r\n drLbl((v.s===-1?'-':'')+v.n,mx+nx,my+ny,v.c,12,true);\r\n cx.globalAlpha=1;\r\n }\r\n }\r\n px+=ex*t;\r\n py+=ey*t;\r\n }\r\n\r\n var canR=comp||(anim&&AST>=V.length);\r\n if(canR&&!hr){\r\n var tR=1;\r\n if(anim&&AST===V.length) tR=APR;\r\n var rE=w2s(px,py);\r\n var rx=o.x+(rE.x-o.x)*tR,ry=o.y+(rE.y-o.y)*tR;\r\n drArr(o.x,o.y,rx,ry,RCOL,3.5,16);\r\n if(tR>.5) drLbl('R',rx+16,ry-16,RCOL,15,true);\r\n }\r\n\r\n if(anim&&AST<V.length+1) showASL(polyLabels[AST]||'');\r\n else if(anim) hideASL();\r\n}\r\n\r\nfunction drPara(hr){\r\n var o=w2s(0,0),anim=ANM,comp=ACP||!anim;\r\n var vA=V[0],vB=V[1];\r\n var eAx=vA.s*vA.cx,eAy=vA.s*vA.cy;\r\n var eBx=vB.s*vB.cx,eBy=vB.s*vB.cy;\r\n var tA=w2s(eAx,eAy),tB=w2s(eBx,eBy),dg=w2s(eAx+eBx,eAy+eBy);\r\n\r\n var 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\n if(!anim){\r\n drOrig(1);\r\n if(SHP){\r\n cx.fillStyle='rgba(13,148,136,.07)';\r\n cx.beginPath();\r\n cx.moveTo(o.x,o.y);cx.lineTo(tA.x,tA.y);cx.lineTo(dg.x,dg.y);cx.lineTo(tB.x,tB.y);\r\n cx.closePath();cx.fill();\r\n drDash(tA.x,tA.y,dg.x,dg.y,vB.c,1.5);\r\n drDash(tB.x,tB.y,dg.x,dg.y,vA.c,1.5);\r\n if(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\n if(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\n if(!hr) drRes();\r\n return;\r\n }\r\n\r\n var step=AST,t=APR;\r\n\r\n if(step>=0){\r\n var t0=step===0?t:1;\r\n var ax=o.x+(tA.x-o.x)*t0,ay=o.y+(tA.y-o.y)*t0;\r\n if(vA.s===-1) drDashedArr(o.x,o.y,ax,ay,vA.c,2.5);\r\n else drArr(o.x,o.y,ax,ay,vA.c,2.5);\r\n if(t0>.6) drLbl((vA.s===-1?'-':'')+vA.n,ax+14,ay-14,vA.c,12,true);\r\n }\r\n if(step>=1){\r\n var t1=step===1?t:1;\r\n var bx=o.x+(tB.x-o.x)*t1,by=o.y+(tB.y-o.y)*t1;\r\n if(vB.s===-1) drDashedArr(o.x,o.y,bx,by,vB.c,2.5);\r\n else drArr(o.x,o.y,bx,by,vB.c,2.5);\r\n if(t1>.6) drLbl((vB.s===-1?'-':'')+vB.n,bx+14,by-14,vB.c,12,true);\r\n }\r\n if(step>=2){\r\n var t2=step===2?t:1;\r\n cx.fillStyle='rgba(13,148,136,.07)';\r\n cx.beginPath();\r\n cx.moveTo(o.x,o.y);cx.lineTo(tA.x,tA.y);\r\n cx.lineTo(tA.x+(dg.x-tA.x)*t2,tA.y+(dg.y-tA.y)*t2);\r\n cx.lineTo(tA.x+(tB.x-o.x)*t2,tA.y+(tB.y-o.y)*t2);\r\n cx.closePath();cx.fill();\r\n drDash(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\n if(step>=3){\r\n var t3=step===3?t:1;\r\n cx.fillStyle='rgba(13,148,136,.07)';\r\n cx.beginPath();\r\n cx.moveTo(o.x,o.y);cx.lineTo(tA.x,tA.y);cx.lineTo(dg.x,dg.y);\r\n cx.lineTo(tB.x+(dg.x-tB.x)*t3,tB.y+(dg.y-tB.y)*t3);\r\n cx.closePath();cx.fill();\r\n drDash(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\n if(step>=4){\r\n var t4=step===4?t:1;\r\n cx.fillStyle='rgba(13,148,136,.07)';\r\n cx.beginPath();\r\n cx.moveTo(o.x,o.y);cx.lineTo(tA.x,tA.y);cx.lineTo(dg.x,dg.y);cx.lineTo(tB.x,tB.y);\r\n cx.closePath();cx.fill();\r\n drDash(tA.x,tA.y,dg.x,dg.y,vB.c,1.5);\r\n drDash(tB.x,tB.y,dg.x,dg.y,vA.c,1.5);\r\n if(!hr){\r\n var rx=o.x+(dg.x-o.x)*t4,ry=o.y+(dg.y-o.y)*t4;\r\n drArr(o.x,o.y,rx,ry,RCOL,3.5,16);\r\n if(t4>.5) drLbl('R',rx+16,ry-16,RCOL,15,true);\r\n }\r\n }\r\n if(step<5) showASL(paraLabels[step]||'');\r\n else hideASL();\r\n}\r\n\r\nfunction drRes(){\r\n var r=calcR();\r\n if(r.m<1e-9) return;\r\n var o=w2s(0,0),tip=w2s(r.rx,r.ry);\r\n drArr(o.x,o.y,tip.x,tip.y,RCOL,3.5,16);\r\n drLbl('R',tip.x+16,tip.y-16,RCOL,15,true);\r\n}\r\n\r\nfunction drComps(){\r\n var o=w2s(0,0);\r\n V.forEach(function(v){\r\n if(v.m<1e-9) return;\r\n var tip=w2s(v.cx,v.cy),tX=w2s(v.cx,0),tY=w2s(0,v.cy);\r\n drDash(o.x,o.y,tX.x,tX.y,v.c,1);\r\n drDash(tX.x,tX.y,tip.x,tip.y,v.c,1);\r\n drDash(o.x,o.y,tY.x,tY.y,v.c,1);\r\n drDash(tY.x,tY.y,tip.x,tip.y,v.c,1);\r\n cx.fillStyle=v.c;\r\n cx.beginPath();cx.arc(tX.x,tX.y,3,0,Math.PI*2);cx.fill();\r\n cx.beginPath();cx.arc(tY.x,tY.y,3,0,Math.PI*2);cx.fill();\r\n });\r\n}\r\n\r\nfunction drCoords(){\r\n var hr=CHM&&!SOLV;\r\n V.forEach(function(v){\r\n if(v.m<1e-9) return;\r\n var tip=w2s(v.cx,v.cy);\r\n cx.font='10px \"SF Mono\",Consolas,monospace';\r\n cx.fillStyle=v.c;\r\n cx.textAlign='left';\r\n cx.textBaseline='top';\r\n cx.fillText('('+fm(v.cx)+', '+fm(v.cy)+')',tip.x+8,tip.y+4);\r\n });\r\n if(MT!=='ninguna'&&!hr){\r\n var r=calcR();\r\n if(r.m>1e-9){\r\n var tip=w2s(r.rx,r.ry);\r\n cx.font='10px \"SF Mono\",Consolas,monospace';\r\n cx.fillStyle=RCOL;\r\n cx.textAlign='left';\r\n cx.textBaseline='top';\r\n cx.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\n if(MT==='paralelogramo'&&NV!==2){toast('El paralelogramo requiere 2 vectores','e');return}\r\n ANM=true;ACP=false;AST=0;APR=0;ATM=performance.now();\r\n document.getElementById('ba').style.display='none';\r\n document.getElementById('bs').style.display='block';\r\n requestAnimationFrame(anLoop);\r\n}\r\n\r\nfunction stopAn(){\r\n ANM=false;ACP=true;hideASL();\r\n document.getElementById('ba').style.display='';\r\n document.getElementById('bs').style.display='none';\r\n render();\r\n}\r\n\r\nfunction anLoop(ts){\r\n if(!ANM) return;\r\n var el=ts-ATM,sd=700;\r\n var tot=MT==='paralelogramo'?5:V.length+1;\r\n AST=Math.floor(el\/sd);\r\n APR=ease((el%sd)\/sd);\r\n if(AST>=tot){stopAn();return}\r\n render();\r\n requestAnimationFrame(anLoop);\r\n}\r\n\r\nfunction gmp(e){\r\n var r=cv.getBoundingClientRect();\r\n return{\r\n x:(e.touches?e.touches[0].clientX:e.clientX)-r.left,\r\n y:(e.touches?e.touches[0].clientY:e.clientY)-r.top\r\n };\r\n}\r\n\r\nfunction gvat(sx,sy){\r\n for(var i=V.length-1;i>=0;i--){\r\n var v=V[i];\r\n if(v.m<1e-9) continue;\r\n var t=w2s(v.cx,v.cy);\r\n if(Math.hypot(sx-t.x,sy-t.y)<TR+4) return i;\r\n }\r\n return-1;\r\n}\r\n\r\nfunction onDown(e){\r\n if(ANM) return;\r\n var p=gmp(e);\r\n if(e.button===2||e.button===1){\r\n e.preventDefault();PAN=true;LMX=p.x;LMY=p.y;\r\n cv.classList.add('grabbing');return;\r\n }\r\n var idx=gvat(p.x,p.y);\r\n if(idx>=0){DRG=true;DI=idx;cv.classList.add('grabbing')}\r\n else{PAN=true;LMX=p.x;LMY=p.y;cv.classList.add('grabbing')}\r\n}\r\n\r\nfunction onMove(e){\r\n var p=gmp(e);\r\n if(DRG){\r\n e.preventDefault();\r\n var w=s2w(p.x,p.y),v=V[DI];\r\n v.cx=w.x;v.cy=w.y;\r\n v.m=Math.hypot(v.cx,v.cy);\r\n v.a=nang(deg(Math.atan2(v.cy,v.cx)));\r\n if(v.m<1e-9){v.m=0;v.a=0}\r\n ACP=false;\r\n upCardVals(DI);upAnal();upComp2();render();\r\n return;\r\n }\r\n if(PAN){\r\n e.preventDefault();\r\n PX+=p.x-LMX;PY+=p.y-LMY;\r\n LMX=p.x;LMY=p.y;render();return;\r\n }\r\n var idx=gvat(p.x,p.y);\r\n if(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\n e.preventDefault();\r\n var p=gmp(e),w=s2w(p.x,p.y);\r\n var f=e.deltaY<0?1.12:1\/1.12;\r\n ZM=Math.max(.12,Math.min(8,ZM*f));\r\n PX=p.x-cw()\/2-w.x*GU*ZM;\r\n PY=p.y-ch()\/2+w.y*GU*ZM;\r\n upZI();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\n if(e.target.tagName==='INPUT') return;\r\n var s=20;\r\n switch(e.key){\r\n case'ArrowLeft':PX+=s;render();break;\r\n case'ArrowRight':PX-=s;render();break;\r\n case'ArrowUp':PY+=s;render();break;\r\n case'ArrowDown':PY-=s;render();break;\r\n case'+':case'=':ZM=Math.min(8,ZM*1.15);upZI();render();break;\r\n case'-':ZM=Math.max(.12,ZM\/1.15);upZI();render();break;\r\n case'r':case'R':ZM=1;PX=0;PY=0;upZI();render();break;\r\n case'Escape':if(ANM)stopAn();break;\r\n }\r\n});\r\n\r\nfunction mkCards(){\r\n var c=document.getElementById('vcc');\r\n c.innerHTML='';\r\n var hc=CHM&&!SOLV;\r\n V.forEach(function(v,i){\r\n var d=document.createElement('div');\r\n d.className='vc';\r\n d.style.borderLeftColor=v.c;\r\n d.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\n c.appendChild(d);\r\n d.querySelector('.sb').addEventListener('click',function(){togSign(i)});\r\n d.querySelector('#vm'+i).addEventListener('input',function(){onVI(i,'mag')});\r\n d.querySelector('#va'+i).addEventListener('input',function(){onVI(i,'ang')});\r\n d.querySelector('#vx'+i).addEventListener('input',function(){onVI(i,'cx')});\r\n d.querySelector('#vy'+i).addEventListener('input',function(){onVI(i,'cy')});\r\n });\r\n}\r\n\r\nfunction togSign(i){\r\n V[i].s=V[i].s===1?-1:1;\r\n ACP=false;mkCards();upExpr();upAnal();upComp2();render();\r\n}\r\n\r\nfunction upCardVals(ci){\r\n var hc=CHM&&!SOLV;\r\n V.forEach(function(v,i){\r\n var me=document.getElementById('vm'+i),ae=document.getElementById('va'+i);\r\n var xe=document.getElementById('vx'+i),ye=document.getElementById('vy'+i);\r\n if(!me) return;\r\n if(i!==ci) me.value=fm(v.m);\r\n if(i!==ci) ae.value=fm(v.a);\r\n if(hc){xe.value='';ye.value='';xe.classList.add('hv');ye.classList.add('hv')}\r\n else{\r\n if(i!==ci) xe.value=fm(v.cx);\r\n if(i!==ci) ye.value=fm(v.cy);\r\n xe.classList.remove('hv');ye.classList.remove('hv');\r\n }\r\n });\r\n}\r\n\r\nfunction onVI(i,f){\r\n var v=V[i];\r\n var me=document.getElementById('vm'+i),ae=document.getElementById('va'+i);\r\n var xe=document.getElementById('vx'+i),ye=document.getElementById('vy'+i);\r\n if(f==='mag'||f==='ang'){\r\n v.m=Math.max(0,parseFloat(me.value)||0);\r\n v.a=parseFloat(ae.value)||0;\r\n upPolar(i);\r\n xe.value=fm(v.cx);ye.value=fm(v.cy);\r\n }else{\r\n v.cx=parseFloat(xe.value)||0;\r\n v.cy=parseFloat(ye.value)||0;\r\n upComp(i);\r\n me.value=fm(v.m);ae.value=fm(v.a);\r\n }\r\n ACP=false;upExpr();upAnal();upComp2();render();\r\n}\r\n\r\nfunction upMT(){\r\n var rp=document.getElementById('rp'),cw2=document.getElementById('cw');\r\n var pn=document.getElementById('pn2'),ml=document.getElementById('ml');\r\n var baEl=document.getElementById('ba'),bsEl=document.getElementById('bs');\r\n\r\n if(MT==='ninguna'){\r\n ml.textContent='SIN RESULTANTE';\r\n rp.classList.remove('dis');\r\n cw2.style.display='none';\r\n pn.innerHTML='';\r\n baEl.style.display='none';\r\n bsEl.style.display='none';\r\n if(ANM) stopAn();\r\n }else if(MT==='poligonal'){\r\n ml.textContent='POLIGONAL';\r\n rp.classList.remove('dis');\r\n cw2.style.display='none';\r\n pn.innerHTML='';\r\n baEl.style.display='';\r\n bsEl.style.display='none';\r\n }else if(MT==='paralelogramo'){\r\n if(NV!==2){\r\n rp.classList.add('dis');cw2.style.display='none';\r\n pn.innerHTML='<div class=\"pn\">El paralelogramo solo aplica con 2 vectores.<\/div>';\r\n MT='poligonal';\r\n document.querySelector('input[name=\"mt\"][value=\"poligonal\"]').checked=true;\r\n ml.textContent='POLIGONAL';\r\n baEl.style.display='';\r\n bsEl.style.display='none';\r\n }else{\r\n ml.textContent='PARALELOGRAMO';\r\n rp.classList.remove('dis');\r\n cw2.style.display='flex';\r\n pn.innerHTML='';\r\n baEl.style.display='';\r\n bsEl.style.display='none';\r\n }\r\n }\r\n ACP=false;upExpr();\r\n}\r\n\r\nfunction upExpr(){\r\n var el=document.getElementById('el');\r\n var parts=V.map(function(v,i){\r\n if(i===0) return(v.s===-1?'-':'')+v.n;\r\n return(v.s===-1?' - ':' + ')+v.n;\r\n });\r\n if(MT==='ninguna') el.textContent=parts.join('');\r\n else el.textContent='R = '+parts.join('');\r\n}\r\n\r\nfunction upAnal(){\r\n var s=document.getElementById('ans'),hr=CHM&&!SOLV;\r\n if(hr){s.innerHTML='<p class=\"it\">Componentes y resultante ocultos en modo desafio.<\/p>';return}\r\n\r\n if(MT==='ninguna'){\r\n var h='<table class=\"at\"><tr><th>Vector<\/th><th>X<\/th><th>Y<\/th><\/tr>';\r\n V.forEach(function(v){\r\n var lbl=v.s===-1?'-'+v.n:v.n;\r\n h+='<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\n h+='<\/table><p class=\"it\">Selecciona un metodo grafico para calcular la resultante.<\/p>';\r\n s.innerHTML=h;return;\r\n }\r\n\r\n var h='<table class=\"at\"><tr><th>Vector<\/th><th>Efectiva X<\/th><th>Efectiva Y<\/th><\/tr>';\r\n V.forEach(function(v){\r\n var ex=v.s*v.cx,ey=v.s*v.cy;\r\n var lbl=v.s===-1?'-'+v.n:v.n;\r\n h+='<tr><td style=\"color:'+v.c+';font-weight:700\">'+lbl+'<\/td><td>'+fm(ex)+'<\/td><td>'+fm(ey)+'<\/td><\/tr>';\r\n });\r\n var r=calcR();\r\n h+='<tr class=\"sr\"><td>Σ<\/td><td>'+fm(r.rx)+'<\/td><td>'+fm(r.ry)+'<\/td><\/tr><\/table>';\r\n h+='<div class=\"fs\">';\r\n var sxP=V.map(function(v){return fms(v.s*v.cx)}).join(' + ');\r\n h+='<div>ΣX = '+sxP+' = '+fm(r.rx)+'<\/div>';\r\n var syP=V.map(function(v){return fms(v.s*v.cy)}).join(' + ');\r\n h+='<div>ΣY = '+syP+' = '+fm(r.ry)+'<\/div>';\r\n h+='<div class=\"sp\"><\/div>';\r\n var rx2=(r.rx*r.rx).toFixed(2),ry2=(r.ry*r.ry).toFixed(2);\r\n var sm=(r.rx*r.rx+r.ry*r.ry).toFixed(2);\r\n h+='<div>R = √('+fm(r.rx)+'² + '+fm(r.ry)+'²)<\/div>';\r\n h+='<div>R = √('+rx2+' + '+ry2+')<\/div>';\r\n h+='<div>R = √('+sm+')<\/div>';\r\n h+='<div class=\"rl2\">R = '+fm(r.m)+'<\/div>';\r\n h+='<div class=\"sp\"><\/div>';\r\n h+='<div>θ = atan2('+fm(r.ry)+', '+fm(r.rx)+')<\/div>';\r\n h+='<div class=\"rl2\">θ = '+fm(r.a)+'°<\/div><\/div>';\r\n s.innerHTML=h;\r\n}\r\n\r\nfunction upComp2(){\r\n var s=document.getElementById('cps'),hr=CHM&&!SOLV,r=calcR();\r\n if(hr){s.innerHTML='<p class=\"it\">Disponible al mostrar la solucion.<\/p>';return}\r\n if(MT==='ninguna'){s.innerHTML='<p class=\"it\">Selecciona un metodo grafico para ver la comparacion.<\/p>';return}\r\n var mn=MT==='poligonal'?'Poligonal':'Paralelogramo';\r\n var h='<table class=\"ct\"><tr><th>Metodo<\/th><th>Modulo<\/th><th>Angulo<\/th><\/tr>';\r\n h+='<tr><td>Grafico ('+mn+')<\/td><td>'+fm(r.m)+'<\/td><td>'+fm(r.a)+'°<\/td><\/tr>';\r\n h+='<tr><td>Analitico<\/td><td>'+fm(r.m)+'<\/td><td>'+fm(r.a)+'°<\/td><\/tr><\/table>';\r\n h+='<div class=\"mm\">✓ Ambos metodos producen el mismo resultado.<\/div>';\r\n s.innerHTML=h;\r\n}\r\n\r\nfunction upAll(){upCardVals(-1);upExpr();upAnal();upComp2();render()}\r\n\r\nfunction genEx(){\r\n var n=Math.floor(Math.random()*4)+1;\r\n NV=n;V=[];\r\n for(var i=0;i<n;i++){\r\n var m=Math.round((Math.random()*8+1.5)*100)\/100;\r\n var a=Math.round(Math.random()*3600)\/10;\r\n var s=Math.random()<.35?-1:1;\r\n V.push(mkVec(i,m,a,s));\r\n }\r\n ACP=false;SOLV=!CHM;\r\n document.querySelectorAll('#nb button').forEach(function(b){b.classList.toggle('on',parseInt(b.dataset.n)===n)});\r\n upMT();mkCards();upAll();\r\n toast('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\n var im=parseFloat(document.getElementById('vm2').value);\r\n var ia=parseFloat(document.getElementById('va2').value);\r\n var re=document.getElementById('vres');\r\n if(isNaN(im)||isNaN(ia)){\r\n re.className='vr no';re.style.display='block';\r\n re.textContent='Ingresa ambos valores.';return;\r\n }\r\n var r=calcR();\r\n var me=r.m>1e-9?Math.abs(im-r.m)\/r.m*100:(Math.abs(im)>.01?100:0);\r\n var ae=Math.abs(ia-r.a);if(ae>180) ae=360-ae;\r\n re.style.display='block';\r\n if(me<2&&ae<2){\r\n re.className='vr ok';\r\n re.innerHTML='✓ Correcto. Respuesta dentro del margen de tolerancia.';\r\n toast('Respuesta correcta','s');\r\n }else{\r\n re.className='vr no';\r\n re.innerHTML='✗ Incorrecto.<br>Error modulo: '+me.toFixed(1)+'%<br>Error angulo: '+ae.toFixed(1)+'°';\r\n toast('Respuesta incorrecta','e');\r\n }\r\n}\r\n\r\nfunction toast(msg,t){\r\n t=t||'i';\r\n var d=document.createElement('div');\r\n d.className='toast toast-'+t;\r\n d.textContent=msg;\r\n document.getElementById('tc').appendChild(d);\r\n requestAnimationFrame(function(){d.classList.add('show')});\r\n setTimeout(function(){d.classList.remove('show');setTimeout(function(){d.remove()},300)},2800);\r\n}\r\n\r\nfunction tryInit(){\r\n rsz();\r\n var p=cv.parentElement;\r\n if(p.clientWidth>10&&p.clientHeight>10){\r\n var nb=document.getElementById('nb');\r\n [1,2,3,4].forEach(function(n){\r\n var b=document.createElement('button');\r\n b.dataset=n;\r\n b.textContent=n;\r\n if(n===NV) b.classList.add('on');\r\n b.addEventListener('click',function(){\r\n document.querySelectorAll('#nb button').forEach(function(x){x.classList.remove('on')});\r\n b.classList.add('on');setNV(n);\r\n });\r\n nb.appendChild(b);\r\n });\r\n\r\n document.querySelectorAll('input[name=\"mt\"]').forEach(function(r){\r\n r.addEventListener('change',function(){MT=r.value;ACP=false;upMT();render()});\r\n });\r\n\r\n document.getElementById('cp').addEventListener('change',function(e){SHP=e.target.checked;render()});\r\n document.getElementById('cc').addEventListener('change',function(e){SHC=e.target.checked;render()});\r\n document.getElementById('cd').addEventListener('change',function(e){SHD=e.target.checked;render()});\r\n document.getElementById('ba').addEventListener('click',startAn);\r\n document.getElementById('bs').addEventListener('click',stopAn);\r\n document.getElementById('zin').addEventListener('click',function(){ZM=Math.min(8,ZM*1.25);upZI();render()});\r\n document.getElementById('zout').addEventListener('click',function(){ZM=Math.max(.12,ZM\/1.25);upZI();render()});\r\n document.getElementById('zrst').addEventListener('click',function(){ZM=1;PX=0;PY=0;upZI();render()});\r\n document.getElementById('bg').addEventListener('click',genEx);\r\n document.getElementById('bsol').addEventListener('click',showSol);\r\n document.getElementById('bv').addEventListener('click',verify);\r\n document.getElementById('chm').addEventListener('change',function(e){\r\n CHM=e.target.checked;SOLV=!CHM;\r\n document.getElementById('vsec').style.display=CHM?'block':'none';\r\n document.getElementById('vres').style.display='none';\r\n if(CHM){document.getElementById('vm2').value='';document.getElementById('va2').value=''}\r\n mkCards();upAll();\r\n });\r\n\r\n initV();upZI();\r\n if(window.ResizeObserver) new ResizeObserver(function(){render()}).observe(cv.parentElement);\r\n }else{\r\n setTimeout(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\n position: fixed;\r\n bottom: 24px;\r\n left: 24px;\r\n z-index: 999;\r\n background: #3fb950;\r\n color: #0d1117;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 0.82rem;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n padding: 10px 18px;\r\n border-radius: 8px;\r\n border: none;\r\n cursor: pointer;\r\n box-shadow: 0 4px 20px rgba(63,185,80,0.35);\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .btn-guia:hover {\r\n transform: translateY(-2px);\r\n box-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\n position: fixed;\r\n bottom: 72px;\r\n left: 24px;\r\n width: 400px;\r\n max-height: 70vh;\r\n z-index: 1000;\r\n background: #ffffff;\r\n border: 1px solid #d0d7de;\r\n border-radius: 12px;\r\n box-shadow: 0 16px 48px rgba(0,0,0,0.4);\r\n display: none;\r\n flex-direction: column;\r\n overflow: hidden;\r\n font-family: 'Space Grotesk', sans-serif;\r\n }\r\n .guia-panel.visible { display: flex; }\r\n .guia-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 12px 16px;\r\n border-bottom: 1px solid #d0d7de;\r\n flex-shrink: 0;\r\n background: #f6f8fa;\r\n }\r\n .guia-header-title {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n color: #1f2328;\r\n }\r\n .guia-header-title svg { width: 15px; height: 15px; color: #3fb950; }\r\n .guia-close {\r\n background: none;\r\n border: none;\r\n color: #636c76;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n padding: 2px 7px;\r\n border-radius: 4px;\r\n transition: color 0.2s, background 0.2s;\r\n line-height: 1;\r\n }\r\n .guia-close:hover { color: #1f2328; background: rgba(0,0,0,0.06); }\r\n .guia-body {\r\n overflow-y: auto;\r\n padding: 18px 18px 20px;\r\n color: #1f2328;\r\n font-size: 0.83rem;\r\n line-height: 1.65;\r\n background: #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\n font-size: 1rem;\r\n font-weight: 700;\r\n color: #1f2328;\r\n margin: 0 0 12px 0;\r\n padding-bottom: 8px;\r\n border-bottom: 1px solid #d0d7de;\r\n }\r\n .guia-block { margin-bottom: 14px; }\r\n .guia-label {\r\n font-size: 0.72rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n color: #636c76;\r\n margin-bottom: 4px;\r\n }\r\n .guia-text { color: #1f2328; }\r\n .guia-formula {\r\n background: #f6f8fa;\r\n border: 1px solid #d0d7de;\r\n border-radius: 6px;\r\n padding: 10px 14px;\r\n text-align: center;\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 0.88rem;\r\n color: #0550ae;\r\n margin: 10px 0;\r\n }\r\n .guia-steps { list-style: none; margin: 0; padding: 0; counter-reset: steps; }\r\n .guia-steps li {\r\n counter-increment: steps;\r\n display: flex;\r\n gap: 10px;\r\n margin-bottom: 8px;\r\n align-items: flex-start;\r\n color: #1f2328;\r\n }\r\n .guia-steps li::before {\r\n content: counter(steps);\r\n background: #dafbe1;\r\n color: #1a7f37;\r\n font-size: 0.72rem;\r\n font-weight: 700;\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n margin-top: 1px;\r\n border: 1px solid #1a7f37;\r\n }\r\n .guia-result {\r\n background: #dafbe1;\r\n border-left: 3px solid #1a7f37;\r\n border-radius: 0 6px 6px 0;\r\n padding: 10px 14px;\r\n color: #1f2328;\r\n font-size: 0.82rem;\r\n margin-top: 10px;\r\n }\r\n .guia-params {\r\n background: #f6f8fa;\r\n border: 1px solid #d0d7de;\r\n border-radius: 6px;\r\n padding: 10px 14px;\r\n font-size: 0.8rem;\r\n color: #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\n Gu\u00eda de uso\r\n <\/div>\r\n <button class=\"guia-close\" onclick=\"toggleGuia()\">\u2715<\/button>\r\n <\/div>\r\n\r\n <div class=\"guia-body\">\r\n\r\n \r\n\r\n\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;\"> \r\n<\/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\u00f3n gr\u00e1fica y anal\u00edtica de vectores en el plano bidimensional, operando de forma interactiva con la suma, resta y descomposici\u00f3n en componentes rectangulares.\r\n\r\n<strong>Descripci\u00f3n breve:<\/strong> Simulaci\u00f3n interactiva que permite manipular vectores en un sistema de coordenadas cartesianas. Facilita la visualizaci\u00f3n del m\u00e9todo gr\u00e1fico del paralelogramo o de la poligonal (punta y cola) y la validaci\u00f3n anal\u00edtica 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;\">\\( \\vec{R} = \\vec{A} + \\vec{B} \\quad \\rightarrow \\quad R_x = A_x + B_x \\quad \\text{e} \\quad R_y = A_y + B_y \\)<\/div>\r\n<strong>C\u00f3mo usar (pasos):<\/strong>\r\n<ul style=\"margin-left: 20px;\">\r\n \t<li>Arrastrar los vectores desde el panel origen y modificar su longitud y direcci\u00f3n sobre la grilla cuadriculada.<\/li>\r\n \t<li>Activar la casilla de \"Componentes\" para visualizar las proyecciones horizontales y verticales de cada vector individual.<\/li>\r\n \t<li>Seleccionar la operaci\u00f3n deseada (Suma o Resta) en el panel de control para que el simulador genere autom\u00e1ticamente el vector resultante \\(\\vec{R}\\).<\/li>\r\n \t<li>Habilitar la opci\u00f3n del \"M\u00e9todo del Paralelogramo\" para observar c\u00f3mo se disponen gr\u00e1ficamente los vectores en el plano.<\/li>\r\n \t<li>Monitorear en la tabla din\u00e1mica de datos los valores de magnitud (m\u00f3dulo), \u00e1ngulo de direcci\u00f3n (\\(\\theta\\)) y las coordenadas de cada componente.<\/li>\r\n<\/ul>\r\n<strong>Par\u00e1metros ajustables:<\/strong> M\u00f3dulo y direcci\u00f3n de los vectores, tipo de operaci\u00f3n (adici\u00f3n\/sustracci\u00f3n), visualizaci\u00f3n 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 \\(\\vec{A} - \\vec{B}\\) equivale a sumar al vector \\(\\vec{A}\\) el opuesto de \\(\\vec{B}\\) (invertido \\(180^\\circ\\)). Asimismo, se verifica que el m\u00e9todo anal\u00edtico por componentes proporciona una precisi\u00f3n matem\u00e1tica exacta que coincide con la resoluci\u00f3n del m\u00e9todo geom\u00e9trico implementado en la pantalla.<\/p>\r\n\r\n<\/div>\r\n\r\n \r\n\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\n Gu\u00eda de uso\r\n<\/button>\r\n\r\n<script>\r\n function toggleGuia() {\r\n document.getElementById('guiaPanel').classList.toggle('visible');\r\n }\r\n<\/script>\r\n\r\n\r\n\r\n\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 B\u00e1sica \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 B\u00e1sica \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-07-06T22:31:47+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\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-07-06T22:31:47+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 B\u00e1sica \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-07-06T22:31:47+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"1 minuto"},"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-07-06T22:31:47+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":25,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/8305\/revisions"}],"predecessor-version":[{"id":8344,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/8305\/revisions\/8344"}],"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 B\u00e1sica \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\n style=\"height:32px; width:auto; margin-top:8px; display:block; max-width:100%;\">\r\n<\/a>\r\n \r\n \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\n s=s||1;var r=rad(a);\r\n return{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\n var df=[[5,30],[4,135],[3,220],[2.5,310]];\r\n V=[];\r\n for(var i=0;i<NV;i++) V.push(mkVec(i,df[i][0],df[i][1],1));\r\n ACP=false;\r\n mkCards();\r\n upAll();\r\n}\r\n\r\nfunction setNV(n){\r\n if(n===NV) return;\r\n var old=V.slice();\r\n var df=[[5,30],[4,135],[3,220],[2.5,310]];\r\n NV=n;\r\n V=[];\r\n for(var i=0;i<n;i++) V.push(old[i]||mkVec(i,df[i][0],df[i][1],1));\r\n ACP=false;\r\n mkCards();\r\n upMT();\r\n upAll();\r\n}\r\n\r\nfunction upPolar(i){\r\n var v=V[i],r=rad(v.a);\r\n v.cx=v.m*Math.cos(r);\r\n v.cy=v.m*Math.sin(r);\r\n}\r\n\r\nfunction upComp(i){\r\n var v=V[i];\r\n v.m=Math.hypot(v.cx,v.cy);\r\n var a=deg(Math.atan2(v.cy,v.cx));\r\n v.a=nang(a);\r\n if(v.m<1e-9){v.m=0;v.a=0;v.cx=0;v.cy=0}\r\n}\r\n\r\nfunction calcR(){\r\n var sx=0,sy=0;\r\n V.forEach(function(v){sx+=v.s*v.cx;sy+=v.s*v.cy});\r\n var mg=Math.hypot(sx,sy);\r\n var an=nang(deg(Math.atan2(sy,sx)));\r\n if(mg<1e-9) return{rx:0,ry:0,m:0,a:0};\r\n return{rx:sx,ry:sy,m:mg,a:an};\r\n}\r\n\r\nfunction rsz(){\r\n var p=cv.parentElement;\r\n var w=p.clientWidth,h=p.clientHeight;\r\n if(w<10) w=800;\r\n if(h<10) h=600;\r\n var dpr=window.devicePixelRatio||1;\r\n var bw=Math.round(w*dpr),bh=Math.round(h*dpr);\r\n if(cv.width!==bw||cv.height!==bh){\r\n cv.width=bw;\r\n cv.height=bh;\r\n cv.style.width=w+'px';\r\n cv.style.height=h+'px';\r\n cx.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\n rsz();\r\n var w=cw(),h=ch();\r\n cx.clearRect(0,0,w,h);\r\n cx.fillStyle='#fefefe';\r\n cx.fillRect(0,0,w,h);\r\n drGrid();\r\n drAxes();\r\n var hr=CHM&&!SOLV;\r\n if(MT==='ninguna'){\r\n drOrig(1);\r\n }else if(MT==='poligonal'){\r\n drPoly(hr);\r\n }else if(MT==='paralelogramo'){\r\n drPara(hr);\r\n }\r\n if(SHC&&!ANM) drComps();\r\n if(SHD&&!ANM) drCoords();\r\n}\r\n\r\nfunction gStep(){\r\n var p=GU*ZM;\r\n if(p<15) return 5;\r\n if(p<30) return 2;\r\n if(p>200) return .25;\r\n if(p>100) return .5;\r\n return 1;\r\n}\r\n\r\nfunction drGrid(){\r\n var st=gStep();\r\n var tl=s2w(0,0),br=s2w(cw(),ch());\r\n cx.strokeStyle='#eaeaea';\r\n cx.lineWidth=.5;\r\n var x0=Math.floor(tl.x\/st)*st,x1=Math.ceil(br.x\/st)*st;\r\n for(var x=x0;x<=x1;x+=st){\r\n if(Math.abs(x)<1e-9) continue;\r\n var p=w2s(x,0);\r\n cx.beginPath();cx.moveTo(p.x,0);cx.lineTo(p.x,ch());cx.stroke();\r\n }\r\n var y0=Math.floor(br.y\/st)*st,y1=Math.ceil(tl.y\/st)*st;\r\n for(var y=y0;y<=y1;y+=st){\r\n if(Math.abs(y)<1e-9) continue;\r\n var p=w2s(0,y);\r\n cx.beginPath();cx.moveTo(0,p.y);cx.lineTo(cw(),p.y);cx.stroke();\r\n }\r\n}\r\n\r\nfunction drAxes(){\r\n var o=w2s(0,0),st=gStep(),tl=s2w(0,0),br=s2w(cw(),ch());\r\n cx.strokeStyle='#444';\r\n cx.lineWidth=1.5;\r\n cx.beginPath();cx.moveTo(0,o.y);cx.lineTo(cw(),o.y);cx.stroke();\r\n cx.beginPath();cx.moveTo(o.x,0);cx.lineTo(o.x,ch());cx.stroke();\r\n cx.fillStyle='#888';\r\n cx.font='10px -apple-system,sans-serif';\r\n cx.textAlign='center';\r\n cx.textBaseline='top';\r\n var x0=Math.floor(tl.x\/st)*st,x1=Math.ceil(br.x\/st)*st;\r\n for(var x=x0;x<=x1;x+=st){\r\n if(Math.abs(x)<1e-9) continue;\r\n var p=w2s(x,0);\r\n cx.strokeStyle='#444';cx.lineWidth=1;\r\n cx.beginPath();cx.moveTo(p.x,o.y-3);cx.lineTo(p.x,o.y+3);cx.stroke();\r\n cx.fillText(Number.isInteger(x)?''+x:x.toFixed(1),p.x,o.y+6);\r\n }\r\n cx.textAlign='right';\r\n cx.textBaseline='middle';\r\n var y0=Math.floor(br.y\/st)*st,y1=Math.ceil(tl.y\/st)*st;\r\n for(var y=y0;y<=y1;y+=st){\r\n if(Math.abs(y)<1e-9) continue;\r\n var p=w2s(0,y);\r\n cx.strokeStyle='#444';cx.lineWidth=1;\r\n cx.beginPath();cx.moveTo(o.x-3,p.y);cx.lineTo(o.x+3,p.y);cx.stroke();\r\n cx.fillText(Number.isInteger(y)?''+y:y.toFixed(1),o.x-7,p.y);\r\n }\r\n cx.textAlign='right';\r\n cx.textBaseline='top';\r\n cx.fillText('O',o.x-6,o.y+6);\r\n cx.fillStyle='#444';\r\n var xp=w2s(br.x,0);\r\n if(xp.x>o.x+30){\r\n cx.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\n cx.textAlign='right';cx.textBaseline='bottom';cx.fillText('X',xp.x-4,o.y-6);\r\n }\r\n var yp=w2s(0,tl.y);\r\n if(yp.y<o.y-30){\r\n cx.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\n cx.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\n var dx=tx-fx,dy=ty-fy,ln=Math.hypot(dx,dy);\r\n if(ln<2) return;\r\n var an=Math.atan2(dy,dx);\r\n hl=hl||Math.min(14,ln*.3);\r\n cx.strokeStyle=col;\r\n cx.fillStyle=col;\r\n cx.lineWidth=lw||2;\r\n cx.lineCap='round';\r\n cx.lineJoin='round';\r\n cx.beginPath();\r\n cx.moveTo(fx,fy);\r\n cx.lineTo(tx-hl*.6*Math.cos(an),ty-hl*.6*Math.sin(an));\r\n cx.stroke();\r\n cx.beginPath();\r\n cx.moveTo(tx,ty);\r\n cx.lineTo(tx-hl*Math.cos(an-.45),ty-hl*Math.sin(an-.45));\r\n cx.lineTo(tx-hl*.55*Math.cos(an),ty-hl*.55*Math.sin(an));\r\n cx.lineTo(tx-hl*Math.cos(an+.45),ty-hl*Math.sin(an+.45));\r\n cx.closePath();\r\n cx.fill();\r\n}\r\n\r\nfunction drDashedArr(fx,fy,tx,ty,col,lw,hl){\r\n var dx=tx-fx,dy=ty-fy,ln=Math.hypot(dx,dy);\r\n if(ln<2) return;\r\n var an=Math.atan2(dy,dx);\r\n hl=hl||Math.min(14,ln*.3);\r\n cx.strokeStyle=col;\r\n cx.fillStyle=col;\r\n cx.lineWidth=lw||2;\r\n cx.lineCap='round';\r\n cx.lineJoin='round';\r\n cx.setLineDash([8,5]);\r\n cx.beginPath();\r\n cx.moveTo(fx,fy);\r\n cx.lineTo(tx-hl*.6*Math.cos(an),ty-hl*.6*Math.sin(an));\r\n cx.stroke();\r\n cx.setLineDash([]);\r\n cx.beginPath();\r\n cx.moveTo(tx,ty);\r\n cx.lineTo(tx-hl*Math.cos(an-.45),ty-hl*Math.sin(an-.45));\r\n cx.lineTo(tx-hl*.55*Math.cos(an),ty-hl*.55*Math.sin(an));\r\n cx.lineTo(tx-hl*Math.cos(an+.45),ty-hl*Math.sin(an+.45));\r\n cx.closePath();\r\n cx.fill();\r\n}\r\n\r\nfunction drDash(x1,y1,x2,y2,col,lw){\r\n cx.strokeStyle=col;\r\n cx.lineWidth=lw||1;\r\n cx.setLineDash([6,4]);\r\n cx.beginPath();cx.moveTo(x1,y1);cx.lineTo(x2,y2);cx.stroke();\r\n cx.setLineDash([]);\r\n}\r\n\r\nfunction drLbl(txt,x,y,col,sz,bd){\r\n cx.font=(bd?'bold ':'')+(sz||13)+'px -apple-system,sans-serif';\r\n cx.fillStyle=col||'#333';\r\n cx.textAlign='center';\r\n cx.textBaseline='middle';\r\n cx.fillText(txt,x,y);\r\n}\r\n\r\nfunction drOrig(al){\r\n var o=w2s(0,0);\r\n V.forEach(function(v,i){\r\n if(v.m<1e-9) return;\r\n var tip=w2s(v.cx,v.cy);\r\n cx.globalAlpha=al!==undefined?al:1;\r\n var lw=(HI===i&&!ANM)?3:2.2;\r\n drArr(o.x,o.y,tip.x,tip.y,v.c,lw);\r\n drLbl(v.n,tip.x+14,tip.y-14,v.c,13,true);\r\n cx.globalAlpha=1;\r\n });\r\n}\r\n\r\nfunction drPoly(hr){\r\n var o=w2s(0,0),anim=ANM,comp=ACP||!anim;\r\n if(comp||!anim) drOrig(.3);\r\n\r\n var px=0,py=0;\r\n var polyLabels=V.map(function(v){return 'Dibujando '+(v.s===-1?'-':'')+v.n});\r\n polyLabels.push('Trazando resultante R');\r\n\r\n for(var i=0;i<V.length;i++){\r\n if(anim&&i>AST) break;\r\n var v=V[i],ex=v.s*v.cx,ey=v.s*v.cy;\r\n var t=1;\r\n if(anim&&i===AST) t=APR;\r\n var from=w2s(px,py),toF=w2s(px+ex,py+ey);\r\n var toX=from.x+(toF.x-from.x)*t,toY=from.y+(toF.y-from.y)*t;\r\n if(i>0&&(comp||(anim&&i<=AST))) drDash(o.x,o.y,from.x,from.y,'#bbb',.8);\r\n if(v.s===-1) drDashedArr(from.x,from.y,toX,toY,v.c,2.5);\r\n else drArr(from.x,from.y,toX,toY,v.c,2.5);\r\n if(t>.5){\r\n var mx=(from.x+toX)\/2,my=(from.y+toY)\/2;\r\n var ddx=toX-from.x,ddy=toY-from.y,ll=Math.hypot(ddx,ddy);\r\n if(ll>20){\r\n var nx=-ddy\/ll*16,ny=ddx\/ll*16;\r\n cx.globalAlpha=t;\r\n drLbl((v.s===-1?'-':'')+v.n,mx+nx,my+ny,v.c,12,true);\r\n cx.globalAlpha=1;\r\n }\r\n }\r\n px+=ex*t;\r\n py+=ey*t;\r\n }\r\n\r\n var canR=comp||(anim&&AST>=V.length);\r\n if(canR&&!hr){\r\n var tR=1;\r\n if(anim&&AST===V.length) tR=APR;\r\n var rE=w2s(px,py);\r\n var rx=o.x+(rE.x-o.x)*tR,ry=o.y+(rE.y-o.y)*tR;\r\n drArr(o.x,o.y,rx,ry,RCOL,3.5,16);\r\n if(tR>.5) drLbl('R',rx+16,ry-16,RCOL,15,true);\r\n }\r\n\r\n if(anim&&AST<V.length+1) showASL(polyLabels[AST]||'');\r\n else if(anim) hideASL();\r\n}\r\n\r\nfunction drPara(hr){\r\n var o=w2s(0,0),anim=ANM,comp=ACP||!anim;\r\n var vA=V[0],vB=V[1];\r\n var eAx=vA.s*vA.cx,eAy=vA.s*vA.cy;\r\n var eBx=vB.s*vB.cx,eBy=vB.s*vB.cy;\r\n var tA=w2s(eAx,eAy),tB=w2s(eBx,eBy),dg=w2s(eAx+eBx,eAy+eBy);\r\n\r\n var 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\n if(!anim){\r\n drOrig(1);\r\n if(SHP){\r\n cx.fillStyle='rgba(13,148,136,.07)';\r\n cx.beginPath();\r\n cx.moveTo(o.x,o.y);cx.lineTo(tA.x,tA.y);cx.lineTo(dg.x,dg.y);cx.lineTo(tB.x,tB.y);\r\n cx.closePath();cx.fill();\r\n drDash(tA.x,tA.y,dg.x,dg.y,vB.c,1.5);\r\n drDash(tB.x,tB.y,dg.x,dg.y,vA.c,1.5);\r\n if(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\n if(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\n if(!hr) drRes();\r\n return;\r\n }\r\n\r\n var step=AST,t=APR;\r\n\r\n if(step>=0){\r\n var t0=step===0?t:1;\r\n var ax=o.x+(tA.x-o.x)*t0,ay=o.y+(tA.y-o.y)*t0;\r\n if(vA.s===-1) drDashedArr(o.x,o.y,ax,ay,vA.c,2.5);\r\n else drArr(o.x,o.y,ax,ay,vA.c,2.5);\r\n if(t0>.6) drLbl((vA.s===-1?'-':'')+vA.n,ax+14,ay-14,vA.c,12,true);\r\n }\r\n if(step>=1){\r\n var t1=step===1?t:1;\r\n var bx=o.x+(tB.x-o.x)*t1,by=o.y+(tB.y-o.y)*t1;\r\n if(vB.s===-1) drDashedArr(o.x,o.y,bx,by,vB.c,2.5);\r\n else drArr(o.x,o.y,bx,by,vB.c,2.5);\r\n if(t1>.6) drLbl((vB.s===-1?'-':'')+vB.n,bx+14,by-14,vB.c,12,true);\r\n }\r\n if(step>=2){\r\n var t2=step===2?t:1;\r\n cx.fillStyle='rgba(13,148,136,.07)';\r\n cx.beginPath();\r\n cx.moveTo(o.x,o.y);cx.lineTo(tA.x,tA.y);\r\n cx.lineTo(tA.x+(dg.x-tA.x)*t2,tA.y+(dg.y-tA.y)*t2);\r\n cx.lineTo(tA.x+(tB.x-o.x)*t2,tA.y+(tB.y-o.y)*t2);\r\n cx.closePath();cx.fill();\r\n drDash(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\n if(step>=3){\r\n var t3=step===3?t:1;\r\n cx.fillStyle='rgba(13,148,136,.07)';\r\n cx.beginPath();\r\n cx.moveTo(o.x,o.y);cx.lineTo(tA.x,tA.y);cx.lineTo(dg.x,dg.y);\r\n cx.lineTo(tB.x+(dg.x-tB.x)*t3,tB.y+(dg.y-tB.y)*t3);\r\n cx.closePath();cx.fill();\r\n drDash(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\n if(step>=4){\r\n var t4=step===4?t:1;\r\n cx.fillStyle='rgba(13,148,136,.07)';\r\n cx.beginPath();\r\n cx.moveTo(o.x,o.y);cx.lineTo(tA.x,tA.y);cx.lineTo(dg.x,dg.y);cx.lineTo(tB.x,tB.y);\r\n cx.closePath();cx.fill();\r\n drDash(tA.x,tA.y,dg.x,dg.y,vB.c,1.5);\r\n drDash(tB.x,tB.y,dg.x,dg.y,vA.c,1.5);\r\n if(!hr){\r\n var rx=o.x+(dg.x-o.x)*t4,ry=o.y+(dg.y-o.y)*t4;\r\n drArr(o.x,o.y,rx,ry,RCOL,3.5,16);\r\n if(t4>.5) drLbl('R',rx+16,ry-16,RCOL,15,true);\r\n }\r\n }\r\n if(step<5) showASL(paraLabels[step]||'');\r\n else hideASL();\r\n}\r\n\r\nfunction drRes(){\r\n var r=calcR();\r\n if(r.m<1e-9) return;\r\n var o=w2s(0,0),tip=w2s(r.rx,r.ry);\r\n drArr(o.x,o.y,tip.x,tip.y,RCOL,3.5,16);\r\n drLbl('R',tip.x+16,tip.y-16,RCOL,15,true);\r\n}\r\n\r\nfunction drComps(){\r\n var o=w2s(0,0);\r\n V.forEach(function(v){\r\n if(v.m<1e-9) return;\r\n var tip=w2s(v.cx,v.cy),tX=w2s(v.cx,0),tY=w2s(0,v.cy);\r\n drDash(o.x,o.y,tX.x,tX.y,v.c,1);\r\n drDash(tX.x,tX.y,tip.x,tip.y,v.c,1);\r\n drDash(o.x,o.y,tY.x,tY.y,v.c,1);\r\n drDash(tY.x,tY.y,tip.x,tip.y,v.c,1);\r\n cx.fillStyle=v.c;\r\n cx.beginPath();cx.arc(tX.x,tX.y,3,0,Math.PI*2);cx.fill();\r\n cx.beginPath();cx.arc(tY.x,tY.y,3,0,Math.PI*2);cx.fill();\r\n });\r\n}\r\n\r\nfunction drCoords(){\r\n var hr=CHM&&!SOLV;\r\n V.forEach(function(v){\r\n if(v.m<1e-9) return;\r\n var tip=w2s(v.cx,v.cy);\r\n cx.font='10px \"SF Mono\",Consolas,monospace';\r\n cx.fillStyle=v.c;\r\n cx.textAlign='left';\r\n cx.textBaseline='top';\r\n cx.fillText('('+fm(v.cx)+', '+fm(v.cy)+')',tip.x+8,tip.y+4);\r\n });\r\n if(MT!=='ninguna'&&!hr){\r\n var r=calcR();\r\n if(r.m>1e-9){\r\n var tip=w2s(r.rx,r.ry);\r\n cx.font='10px \"SF Mono\",Consolas,monospace';\r\n cx.fillStyle=RCOL;\r\n cx.textAlign='left';\r\n cx.textBaseline='top';\r\n cx.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\n if(MT==='paralelogramo'&&NV!==2){toast('El paralelogramo requiere 2 vectores','e');return}\r\n ANM=true;ACP=false;AST=0;APR=0;ATM=performance.now();\r\n document.getElementById('ba').style.display='none';\r\n document.getElementById('bs').style.display='block';\r\n requestAnimationFrame(anLoop);\r\n}\r\n\r\nfunction stopAn(){\r\n ANM=false;ACP=true;hideASL();\r\n document.getElementById('ba').style.display='';\r\n document.getElementById('bs').style.display='none';\r\n render();\r\n}\r\n\r\nfunction anLoop(ts){\r\n if(!ANM) return;\r\n var el=ts-ATM,sd=700;\r\n var tot=MT==='paralelogramo'?5:V.length+1;\r\n AST=Math.floor(el\/sd);\r\n APR=ease((el%sd)\/sd);\r\n if(AST>=tot){stopAn();return}\r\n render();\r\n requestAnimationFrame(anLoop);\r\n}\r\n\r\nfunction gmp(e){\r\n var r=cv.getBoundingClientRect();\r\n return{\r\n x:(e.touches?e.touches[0].clientX:e.clientX)-r.left,\r\n y:(e.touches?e.touches[0].clientY:e.clientY)-r.top\r\n };\r\n}\r\n\r\nfunction gvat(sx,sy){\r\n for(var i=V.length-1;i>=0;i--){\r\n var v=V[i];\r\n if(v.m<1e-9) continue;\r\n var t=w2s(v.cx,v.cy);\r\n if(Math.hypot(sx-t.x,sy-t.y)<TR+4) return i;\r\n }\r\n return-1;\r\n}\r\n\r\nfunction onDown(e){\r\n if(ANM) return;\r\n var p=gmp(e);\r\n if(e.button===2||e.button===1){\r\n e.preventDefault();PAN=true;LMX=p.x;LMY=p.y;\r\n cv.classList.add('grabbing');return;\r\n }\r\n var idx=gvat(p.x,p.y);\r\n if(idx>=0){DRG=true;DI=idx;cv.classList.add('grabbing')}\r\n else{PAN=true;LMX=p.x;LMY=p.y;cv.classList.add('grabbing')}\r\n}\r\n\r\nfunction onMove(e){\r\n var p=gmp(e);\r\n if(DRG){\r\n e.preventDefault();\r\n var w=s2w(p.x,p.y),v=V[DI];\r\n v.cx=w.x;v.cy=w.y;\r\n v.m=Math.hypot(v.cx,v.cy);\r\n v.a=nang(deg(Math.atan2(v.cy,v.cx)));\r\n if(v.m<1e-9){v.m=0;v.a=0}\r\n ACP=false;\r\n upCardVals(DI);upAnal();upComp2();render();\r\n return;\r\n }\r\n if(PAN){\r\n e.preventDefault();\r\n PX+=p.x-LMX;PY+=p.y-LMY;\r\n LMX=p.x;LMY=p.y;render();return;\r\n }\r\n var idx=gvat(p.x,p.y);\r\n if(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\n e.preventDefault();\r\n var p=gmp(e),w=s2w(p.x,p.y);\r\n var f=e.deltaY<0?1.12:1\/1.12;\r\n ZM=Math.max(.12,Math.min(8,ZM*f));\r\n PX=p.x-cw()\/2-w.x*GU*ZM;\r\n PY=p.y-ch()\/2+w.y*GU*ZM;\r\n upZI();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\n if(e.target.tagName==='INPUT') return;\r\n var s=20;\r\n switch(e.key){\r\n case'ArrowLeft':PX+=s;render();break;\r\n case'ArrowRight':PX-=s;render();break;\r\n case'ArrowUp':PY+=s;render();break;\r\n case'ArrowDown':PY-=s;render();break;\r\n case'+':case'=':ZM=Math.min(8,ZM*1.15);upZI();render();break;\r\n case'-':ZM=Math.max(.12,ZM\/1.15);upZI();render();break;\r\n case'r':case'R':ZM=1;PX=0;PY=0;upZI();render();break;\r\n case'Escape':if(ANM)stopAn();break;\r\n }\r\n});\r\n\r\nfunction mkCards(){\r\n var c=document.getElementById('vcc');\r\n c.innerHTML='';\r\n var hc=CHM&&!SOLV;\r\n V.forEach(function(v,i){\r\n var d=document.createElement('div');\r\n d.className='vc';\r\n d.style.borderLeftColor=v.c;\r\n d.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\n c.appendChild(d);\r\n d.querySelector('.sb').addEventListener('click',function(){togSign(i)});\r\n d.querySelector('#vm'+i).addEventListener('input',function(){onVI(i,'mag')});\r\n d.querySelector('#va'+i).addEventListener('input',function(){onVI(i,'ang')});\r\n d.querySelector('#vx'+i).addEventListener('input',function(){onVI(i,'cx')});\r\n d.querySelector('#vy'+i).addEventListener('input',function(){onVI(i,'cy')});\r\n });\r\n}\r\n\r\nfunction togSign(i){\r\n V[i].s=V[i].s===1?-1:1;\r\n ACP=false;mkCards();upExpr();upAnal();upComp2();render();\r\n}\r\n\r\nfunction upCardVals(ci){\r\n var hc=CHM&&!SOLV;\r\n V.forEach(function(v,i){\r\n var me=document.getElementById('vm'+i),ae=document.getElementById('va'+i);\r\n var xe=document.getElementById('vx'+i),ye=document.getElementById('vy'+i);\r\n if(!me) return;\r\n if(i!==ci) me.value=fm(v.m);\r\n if(i!==ci) ae.value=fm(v.a);\r\n if(hc){xe.value='';ye.value='';xe.classList.add('hv');ye.classList.add('hv')}\r\n else{\r\n if(i!==ci) xe.value=fm(v.cx);\r\n if(i!==ci) ye.value=fm(v.cy);\r\n xe.classList.remove('hv');ye.classList.remove('hv');\r\n }\r\n });\r\n}\r\n\r\nfunction onVI(i,f){\r\n var v=V[i];\r\n var me=document.getElementById('vm'+i),ae=document.getElementById('va'+i);\r\n var xe=document.getElementById('vx'+i),ye=document.getElementById('vy'+i);\r\n if(f==='mag'||f==='ang'){\r\n v.m=Math.max(0,parseFloat(me.value)||0);\r\n v.a=parseFloat(ae.value)||0;\r\n upPolar(i);\r\n xe.value=fm(v.cx);ye.value=fm(v.cy);\r\n }else{\r\n v.cx=parseFloat(xe.value)||0;\r\n v.cy=parseFloat(ye.value)||0;\r\n upComp(i);\r\n me.value=fm(v.m);ae.value=fm(v.a);\r\n }\r\n ACP=false;upExpr();upAnal();upComp2();render();\r\n}\r\n\r\nfunction upMT(){\r\n var rp=document.getElementById('rp'),cw2=document.getElementById('cw');\r\n var pn=document.getElementById('pn2'),ml=document.getElementById('ml');\r\n var baEl=document.getElementById('ba'),bsEl=document.getElementById('bs');\r\n\r\n if(MT==='ninguna'){\r\n ml.textContent='SIN RESULTANTE';\r\n rp.classList.remove('dis');\r\n cw2.style.display='none';\r\n pn.innerHTML='';\r\n baEl.style.display='none';\r\n bsEl.style.display='none';\r\n if(ANM) stopAn();\r\n }else if(MT==='poligonal'){\r\n ml.textContent='POLIGONAL';\r\n rp.classList.remove('dis');\r\n cw2.style.display='none';\r\n pn.innerHTML='';\r\n baEl.style.display='';\r\n bsEl.style.display='none';\r\n }else if(MT==='paralelogramo'){\r\n if(NV!==2){\r\n rp.classList.add('dis');cw2.style.display='none';\r\n pn.innerHTML='<div class=\"pn\">El paralelogramo solo aplica con 2 vectores.<\/div>';\r\n MT='poligonal';\r\n document.querySelector('input[name=\"mt\"][value=\"poligonal\"]').checked=true;\r\n ml.textContent='POLIGONAL';\r\n baEl.style.display='';\r\n bsEl.style.display='none';\r\n }else{\r\n ml.textContent='PARALELOGRAMO';\r\n rp.classList.remove('dis');\r\n cw2.style.display='flex';\r\n pn.innerHTML='';\r\n baEl.style.display='';\r\n bsEl.style.display='none';\r\n }\r\n }\r\n ACP=false;upExpr();\r\n}\r\n\r\nfunction upExpr(){\r\n var el=document.getElementById('el');\r\n var parts=V.map(function(v,i){\r\n if(i===0) return(v.s===-1?'-':'')+v.n;\r\n return(v.s===-1?' - ':' + ')+v.n;\r\n });\r\n if(MT==='ninguna') el.textContent=parts.join('');\r\n else el.textContent='R = '+parts.join('');\r\n}\r\n\r\nfunction upAnal(){\r\n var s=document.getElementById('ans'),hr=CHM&&!SOLV;\r\n if(hr){s.innerHTML='<p class=\"it\">Componentes y resultante ocultos en modo desafio.<\/p>';return}\r\n\r\n if(MT==='ninguna'){\r\n var h='<table class=\"at\"><tr><th>Vector<\/th><th>X<\/th><th>Y<\/th><\/tr>';\r\n V.forEach(function(v){\r\n var lbl=v.s===-1?'-'+v.n:v.n;\r\n h+='<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\n h+='<\/table><p class=\"it\">Selecciona un metodo grafico para calcular la resultante.<\/p>';\r\n s.innerHTML=h;return;\r\n }\r\n\r\n var h='<table class=\"at\"><tr><th>Vector<\/th><th>Efectiva X<\/th><th>Efectiva Y<\/th><\/tr>';\r\n V.forEach(function(v){\r\n var ex=v.s*v.cx,ey=v.s*v.cy;\r\n var lbl=v.s===-1?'-'+v.n:v.n;\r\n h+='<tr><td style=\"color:'+v.c+';font-weight:700\">'+lbl+'<\/td><td>'+fm(ex)+'<\/td><td>'+fm(ey)+'<\/td><\/tr>';\r\n });\r\n var r=calcR();\r\n h+='<tr class=\"sr\"><td>Σ<\/td><td>'+fm(r.rx)+'<\/td><td>'+fm(r.ry)+'<\/td><\/tr><\/table>';\r\n h+='<div class=\"fs\">';\r\n var sxP=V.map(function(v){return fms(v.s*v.cx)}).join(' + ');\r\n h+='<div>ΣX = '+sxP+' = '+fm(r.rx)+'<\/div>';\r\n var syP=V.map(function(v){return fms(v.s*v.cy)}).join(' + ');\r\n h+='<div>ΣY = '+syP+' = '+fm(r.ry)+'<\/div>';\r\n h+='<div class=\"sp\"><\/div>';\r\n var rx2=(r.rx*r.rx).toFixed(2),ry2=(r.ry*r.ry).toFixed(2);\r\n var sm=(r.rx*r.rx+r.ry*r.ry).toFixed(2);\r\n h+='<div>R = √('+fm(r.rx)+'² + '+fm(r.ry)+'²)<\/div>';\r\n h+='<div>R = √('+rx2+' + '+ry2+')<\/div>';\r\n h+='<div>R = √('+sm+')<\/div>';\r\n h+='<div class=\"rl2\">R = '+fm(r.m)+'<\/div>';\r\n h+='<div class=\"sp\"><\/div>';\r\n h+='<div>θ = atan2('+fm(r.ry)+', '+fm(r.rx)+')<\/div>';\r\n h+='<div class=\"rl2\">θ = '+fm(r.a)+'°<\/div><\/div>';\r\n s.innerHTML=h;\r\n}\r\n\r\nfunction upComp2(){\r\n var s=document.getElementById('cps'),hr=CHM&&!SOLV,r=calcR();\r\n if(hr){s.innerHTML='<p class=\"it\">Disponible al mostrar la solucion.<\/p>';return}\r\n if(MT==='ninguna'){s.innerHTML='<p class=\"it\">Selecciona un metodo grafico para ver la comparacion.<\/p>';return}\r\n var mn=MT==='poligonal'?'Poligonal':'Paralelogramo';\r\n var h='<table class=\"ct\"><tr><th>Metodo<\/th><th>Modulo<\/th><th>Angulo<\/th><\/tr>';\r\n h+='<tr><td>Grafico ('+mn+')<\/td><td>'+fm(r.m)+'<\/td><td>'+fm(r.a)+'°<\/td><\/tr>';\r\n h+='<tr><td>Analitico<\/td><td>'+fm(r.m)+'<\/td><td>'+fm(r.a)+'°<\/td><\/tr><\/table>';\r\n h+='<div class=\"mm\">✓ Ambos metodos producen el mismo resultado.<\/div>';\r\n s.innerHTML=h;\r\n}\r\n\r\nfunction upAll(){upCardVals(-1);upExpr();upAnal();upComp2();render()}\r\n\r\nfunction genEx(){\r\n var n=Math.floor(Math.random()*4)+1;\r\n NV=n;V=[];\r\n for(var i=0;i<n;i++){\r\n var m=Math.round((Math.random()*8+1.5)*100)\/100;\r\n var a=Math.round(Math.random()*3600)\/10;\r\n var s=Math.random()<.35?-1:1;\r\n V.push(mkVec(i,m,a,s));\r\n }\r\n ACP=false;SOLV=!CHM;\r\n document.querySelectorAll('#nb button').forEach(function(b){b.classList.toggle('on',parseInt(b.dataset.n)===n)});\r\n upMT();mkCards();upAll();\r\n toast('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\n var im=parseFloat(document.getElementById('vm2').value);\r\n var ia=parseFloat(document.getElementById('va2').value);\r\n var re=document.getElementById('vres');\r\n if(isNaN(im)||isNaN(ia)){\r\n re.className='vr no';re.style.display='block';\r\n re.textContent='Ingresa ambos valores.';return;\r\n }\r\n var r=calcR();\r\n var me=r.m>1e-9?Math.abs(im-r.m)\/r.m*100:(Math.abs(im)>.01?100:0);\r\n var ae=Math.abs(ia-r.a);if(ae>180) ae=360-ae;\r\n re.style.display='block';\r\n if(me<2&&ae<2){\r\n re.className='vr ok';\r\n re.innerHTML='✓ Correcto. Respuesta dentro del margen de tolerancia.';\r\n toast('Respuesta correcta','s');\r\n }else{\r\n re.className='vr no';\r\n re.innerHTML='✗ Incorrecto.<br>Error modulo: '+me.toFixed(1)+'%<br>Error angulo: '+ae.toFixed(1)+'°';\r\n toast('Respuesta incorrecta','e');\r\n }\r\n}\r\n\r\nfunction toast(msg,t){\r\n t=t||'i';\r\n var d=document.createElement('div');\r\n d.className='toast toast-'+t;\r\n d.textContent=msg;\r\n document.getElementById('tc').appendChild(d);\r\n requestAnimationFrame(function(){d.classList.add('show')});\r\n setTimeout(function(){d.classList.remove('show');setTimeout(function(){d.remove()},300)},2800);\r\n}\r\n\r\nfunction tryInit(){\r\n rsz();\r\n var p=cv.parentElement;\r\n if(p.clientWidth>10&&p.clientHeight>10){\r\n var nb=document.getElementById('nb');\r\n [1,2,3,4].forEach(function(n){\r\n var b=document.createElement('button');\r\n b.dataset=n;\r\n b.textContent=n;\r\n if(n===NV) b.classList.add('on');\r\n b.addEventListener('click',function(){\r\n document.querySelectorAll('#nb button').forEach(function(x){x.classList.remove('on')});\r\n b.classList.add('on');setNV(n);\r\n });\r\n nb.appendChild(b);\r\n });\r\n\r\n document.querySelectorAll('input[name=\"mt\"]').forEach(function(r){\r\n r.addEventListener('change',function(){MT=r.value;ACP=false;upMT();render()});\r\n });\r\n\r\n document.getElementById('cp').addEventListener('change',function(e){SHP=e.target.checked;render()});\r\n document.getElementById('cc').addEventListener('change',function(e){SHC=e.target.checked;render()});\r\n document.getElementById('cd').addEventListener('change',function(e){SHD=e.target.checked;render()});\r\n document.getElementById('ba').addEventListener('click',startAn);\r\n document.getElementById('bs').addEventListener('click',stopAn);\r\n document.getElementById('zin').addEventListener('click',function(){ZM=Math.min(8,ZM*1.25);upZI();render()});\r\n document.getElementById('zout').addEventListener('click',function(){ZM=Math.max(.12,ZM\/1.25);upZI();render()});\r\n document.getElementById('zrst').addEventListener('click',function(){ZM=1;PX=0;PY=0;upZI();render()});\r\n document.getElementById('bg').addEventListener('click',genEx);\r\n document.getElementById('bsol').addEventListener('click',showSol);\r\n document.getElementById('bv').addEventListener('click',verify);\r\n document.getElementById('chm').addEventListener('change',function(e){\r\n CHM=e.target.checked;SOLV=!CHM;\r\n document.getElementById('vsec').style.display=CHM?'block':'none';\r\n document.getElementById('vres').style.display='none';\r\n if(CHM){document.getElementById('vm2').value='';document.getElementById('va2').value=''}\r\n mkCards();upAll();\r\n });\r\n\r\n initV();upZI();\r\n if(window.ResizeObserver) new ResizeObserver(function(){render()}).observe(cv.parentElement);\r\n }else{\r\n setTimeout(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\n position: fixed;\r\n bottom: 24px;\r\n left: 24px;\r\n z-index: 999;\r\n background: #3fb950;\r\n color: #0d1117;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 0.82rem;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n padding: 10px 18px;\r\n border-radius: 8px;\r\n border: none;\r\n cursor: pointer;\r\n box-shadow: 0 4px 20px rgba(63,185,80,0.35);\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .btn-guia:hover {\r\n transform: translateY(-2px);\r\n box-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\n position: fixed;\r\n bottom: 72px;\r\n left: 24px;\r\n width: 400px;\r\n max-height: 70vh;\r\n z-index: 1000;\r\n background: #ffffff;\r\n border: 1px solid #d0d7de;\r\n border-radius: 12px;\r\n box-shadow: 0 16px 48px rgba(0,0,0,0.4);\r\n display: none;\r\n flex-direction: column;\r\n overflow: hidden;\r\n font-family: 'Space Grotesk', sans-serif;\r\n }\r\n .guia-panel.visible { display: flex; }\r\n .guia-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 12px 16px;\r\n border-bottom: 1px solid #d0d7de;\r\n flex-shrink: 0;\r\n background: #f6f8fa;\r\n }\r\n .guia-header-title {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n color: #1f2328;\r\n }\r\n .guia-header-title svg { width: 15px; height: 15px; color: #3fb950; }\r\n .guia-close {\r\n background: none;\r\n border: none;\r\n color: #636c76;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n padding: 2px 7px;\r\n border-radius: 4px;\r\n transition: color 0.2s, background 0.2s;\r\n line-height: 1;\r\n }\r\n .guia-close:hover { color: #1f2328; background: rgba(0,0,0,0.06); }\r\n .guia-body {\r\n overflow-y: auto;\r\n padding: 18px 18px 20px;\r\n color: #1f2328;\r\n font-size: 0.83rem;\r\n line-height: 1.65;\r\n background: #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\n font-size: 1rem;\r\n font-weight: 700;\r\n color: #1f2328;\r\n margin: 0 0 12px 0;\r\n padding-bottom: 8px;\r\n border-bottom: 1px solid #d0d7de;\r\n }\r\n .guia-block { margin-bottom: 14px; }\r\n .guia-label {\r\n font-size: 0.72rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n color: #636c76;\r\n margin-bottom: 4px;\r\n }\r\n .guia-text { color: #1f2328; }\r\n .guia-formula {\r\n background: #f6f8fa;\r\n border: 1px solid #d0d7de;\r\n border-radius: 6px;\r\n padding: 10px 14px;\r\n text-align: center;\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 0.88rem;\r\n color: #0550ae;\r\n margin: 10px 0;\r\n }\r\n .guia-steps { list-style: none; margin: 0; padding: 0; counter-reset: steps; }\r\n .guia-steps li {\r\n counter-increment: steps;\r\n display: flex;\r\n gap: 10px;\r\n margin-bottom: 8px;\r\n align-items: flex-start;\r\n color: #1f2328;\r\n }\r\n .guia-steps li::before {\r\n content: counter(steps);\r\n background: #dafbe1;\r\n color: #1a7f37;\r\n font-size: 0.72rem;\r\n font-weight: 700;\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n margin-top: 1px;\r\n border: 1px solid #1a7f37;\r\n }\r\n .guia-result {\r\n background: #dafbe1;\r\n border-left: 3px solid #1a7f37;\r\n border-radius: 0 6px 6px 0;\r\n padding: 10px 14px;\r\n color: #1f2328;\r\n font-size: 0.82rem;\r\n margin-top: 10px;\r\n }\r\n .guia-params {\r\n background: #f6f8fa;\r\n border: 1px solid #d0d7de;\r\n border-radius: 6px;\r\n padding: 10px 14px;\r\n font-size: 0.8rem;\r\n color: #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\n Gu\u00eda de uso\r\n <\/div>\r\n <button class=\"guia-close\" onclick=\"toggleGuia()\">\u2715<\/button>\r\n <\/div>\r\n\r\n <div class=\"guia-body\">\r\n\r\n \r\n\r\n\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;\"> \r\n<\/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\u00f3n gr\u00e1fica y anal\u00edtica de vectores en el plano bidimensional, operando de forma interactiva con la suma, resta y descomposici\u00f3n en componentes rectangulares.\r\n\r\n<strong>Descripci\u00f3n breve:<\/strong> Simulaci\u00f3n interactiva que permite manipular vectores en un sistema de coordenadas cartesianas. Facilita la visualizaci\u00f3n del m\u00e9todo gr\u00e1fico del paralelogramo o de la poligonal (punta y cola) y la validaci\u00f3n anal\u00edtica 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;\">\\( \\vec{R} = \\vec{A} + \\vec{B} \\quad \\rightarrow \\quad R_x = A_x + B_x \\quad \\text{e} \\quad R_y = A_y + B_y \\)<\/div>\r\n<strong>C\u00f3mo usar (pasos):<\/strong>\r\n<ul style=\"margin-left: 20px;\">\r\n \t<li>Arrastrar los vectores desde el panel origen y modificar su longitud y direcci\u00f3n sobre la grilla cuadriculada.<\/li>\r\n \t<li>Activar la casilla de \"Componentes\" para visualizar las proyecciones horizontales y verticales de cada vector individual.<\/li>\r\n \t<li>Seleccionar la operaci\u00f3n deseada (Suma o Resta) en el panel de control para que el simulador genere autom\u00e1ticamente el vector resultante \\(\\vec{R}\\).<\/li>\r\n \t<li>Habilitar la opci\u00f3n del \"M\u00e9todo del Paralelogramo\" para observar c\u00f3mo se disponen gr\u00e1ficamente los vectores en el plano.<\/li>\r\n \t<li>Monitorear en la tabla din\u00e1mica de datos los valores de magnitud (m\u00f3dulo), \u00e1ngulo de direcci\u00f3n (\\(\\theta\\)) y las coordenadas de cada componente.<\/li>\r\n<\/ul>\r\n<strong>Par\u00e1metros ajustables:<\/strong> M\u00f3dulo y direcci\u00f3n de los vectores, tipo de operaci\u00f3n (adici\u00f3n\/sustracci\u00f3n), visualizaci\u00f3n 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 \\(\\vec{A} - \\vec{B}\\) equivale a sumar al vector \\(\\vec{A}\\) el opuesto de \\(\\vec{B}\\) (invertido \\(180^\\circ\\)). Asimismo, se verifica que el m\u00e9todo anal\u00edtico por componentes proporciona una precisi\u00f3n matem\u00e1tica exacta que coincide con la resoluci\u00f3n del m\u00e9todo geom\u00e9trico implementado en la pantalla.<\/p>\r\n\r\n<\/div>\r\n\r\n \r\n\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\n Gu\u00eda de uso\r\n<\/button>\r\n\r\n<script>\r\n function toggleGuia() {\r\n document.getElementById('guiaPanel').classList.toggle('visible');\r\n }\r\n<\/script>\r\n\r\n\r\n\r\n\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 B\u00e1sica \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 B\u00e1sica \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-07-06T22:31:47+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\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-07-06T22:31:47+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 B\u00e1sica \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-07-06T22:31:47+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"1 minuto"},"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-07-06T22:31:47+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":25,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/8305\/revisions"}],"predecessor-version":[{"id":8344,"href":"https:\/\/fisica2.fica.unsl.edu.ar\/index.php\/wp-json\/wp\/v2\/pages\/8305\/revisions\/8344"}],"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}]}}