Engineering Playground<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@600;700;800;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n background-color: #f4f8fc;\r\n background-image: \r\n linear-gradient(rgba(0, 119, 255, 0.05) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(0, 119, 255, 0.05) 1px, transparent 1px);\r\n background-size: 30px 30px;\r\n font-family: 'Inter', sans-serif;\r\n color: #1e293b;\r\n padding: 50px 20px;\r\n min-height: 100vh;\r\n }\r\n\r\n .playground-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* Header *\/\r\n .playground-header {\r\n margin-bottom: 35px;\r\n }\r\n\r\n .playground-title {\r\n font-family: 'Orbitron', sans-serif;\r\n font-size: 34px;\r\n font-weight: 800;\r\n color: #0f172a;\r\n letter-spacing: -0.5px;\r\n margin-bottom: 6px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .playground-subtitle {\r\n font-family: 'Space Mono', monospace;\r\n color: #64748b;\r\n font-size: 14px;\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n \/* Grid Layout *\/\r\n .cards-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n .playground-card {\r\n background: #ffffff;\r\n border: 1px solid #e2e8f0;\r\n border-radius: 16px;\r\n padding: 28px 24px;\r\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.03);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n min-height: 480px;\r\n position: relative;\r\n }\r\n\r\n .card-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .card-dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n }\r\n\r\n .card-title {\r\n font-family: 'Orbitron', sans-serif;\r\n font-size: 16px;\r\n font-weight: 700;\r\n color: #0f172a;\r\n }\r\n\r\n .visual-area {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 20px 0;\r\n position: relative;\r\n }\r\n\r\n \/* --- Card 1: Gear Train --- *\/\r\n .dot-blue { background-color: #2563eb; }\r\n\r\n .gears-wrapper {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n margin-bottom: 20px;\r\n height: 90px;\r\n }\r\n\r\n .gear-svg {\r\n transform-origin: center;\r\n will-change: transform;\r\n }\r\n\r\n .rpm-badge {\r\n font-family: 'Space Mono', monospace;\r\n font-size: 11px;\r\n font-weight: 700;\r\n color: #2563eb;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n \/* --- Card 2: Motor Controller --- *\/\r\n .dot-gray { background-color: #94a3b8; }\r\n\r\n .motor-circle-outer {\r\n width: 110px;\r\n height: 110px;\r\n border-radius: 50%;\r\n border: 3px solid #bfdbfe;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n box-shadow: 0 0 0 8px #eff6ff;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .motor-circle-inner {\r\n width: 76px;\r\n height: 76px;\r\n border-radius: 50%;\r\n border: 3px solid #2563eb;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #2563eb;\r\n font-size: 32px;\r\n font-weight: 300;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .motor-circle-outer::after {\r\n content: '';\r\n position: absolute;\r\n right: -18px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 14px;\r\n height: 4px;\r\n background-color: #cbd5e1;\r\n border-radius: 2px;\r\n }\r\n\r\n .status-badge {\r\n font-family: 'Space Mono', monospace;\r\n font-size: 11px;\r\n color: #64748b;\r\n background-color: #f1f5f9;\r\n padding: 4px 16px;\r\n border-radius: 20px;\r\n margin-top: 20px;\r\n text-transform: uppercase;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .motor-info {\r\n font-family: 'Space Mono', monospace;\r\n font-size: 11px;\r\n color: #06b6d4;\r\n text-align: center;\r\n margin-top: 10px;\r\n height: 32px;\r\n visibility: hidden;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .motor-info.active {\r\n visibility: visible;\r\n opacity: 1;\r\n }\r\n\r\n .motor-btn {\r\n width: 100%;\r\n background: #2563eb;\r\n color: #ffffff;\r\n border: none;\r\n padding: 14px 0;\r\n border-radius: 10px;\r\n font-family: 'Orbitron', sans-serif;\r\n font-size: 13px;\r\n font-weight: 700;\r\n cursor: pointer;\r\n box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);\r\n transition: all 0.2s;\r\n }\r\n\r\n .motor-btn:hover {\r\n background: #1d4ed8;\r\n }\r\n\r\n .motor-btn.running {\r\n background: #dc2626;\r\n box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);\r\n }\r\n\r\n .motor-btn.running:hover {\r\n background: #b91c1c;\r\n }\r\n\r\n \/* --- Motor Active Visual Animation --- *\/\r\n .motor-circle-outer.active {\r\n border-color: #99f6e4;\r\n box-shadow: 0 0 0 8px #ccfbf1;\r\n animation: pulse 1.5s infinite;\r\n }\r\n\r\n .motor-circle-inner.active {\r\n border-color: #06b6d4;\r\n color: #06b6d4;\r\n transform: rotate(45deg);\r\n }\r\n\r\n .status-badge.active {\r\n background-color: #ccfbf1;\r\n color: #0d9488;\r\n }\r\n\r\n @keyframes pulse {\r\n 0% { box-shadow: 0 0 0 0px rgba(6, 182, 212, 0.4); }\r\n 70% { box-shadow: 0 0 0 12px rgba(6, 182, 212, 0); }\r\n 100% { box-shadow: 0 0 0 0px rgba(6, 182, 212, 0); }\r\n }\r\n\r\n \/* --- Card 3: Robotic Arm --- *\/\r\n .dot-cyan { background-color: #06b6d4; }\r\n\r\n .coord-info {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n font-family: 'Space Mono', monospace;\r\n font-size: 10px;\r\n color: #64748b;\r\n }\r\n\r\n \/* Controls & Sliders *\/\r\n .controls-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 14px;\r\n }\r\n\r\n .control-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n padding: 6px 8px;\r\n border-radius: 8px;\r\n transition: background 0.2s;\r\n }\r\n\r\n .control-header {\r\n display: flex;\r\n justify-content: space-between;\r\n font-family: 'Space Mono', monospace;\r\n font-size: 12px;\r\n }\r\n\r\n .control-label {\r\n color: #2563eb;\r\n font-weight: 600;\r\n }\r\n\r\n .control-value {\r\n color: #2563eb;\r\n font-weight: 700;\r\n }\r\n\r\n input[type=\"range\"] {\r\n -webkit-appearance: none;\r\n width: 100%;\r\n height: 6px;\r\n background: #e2e8f0;\r\n border-radius: 5px;\r\n outline: none;\r\n }\r\n\r\n input[type=\"range\"]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 14px;\r\n height: 14px;\r\n border-radius: 50%;\r\n background: #2563eb;\r\n cursor: pointer;\r\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);\r\n }\r\n\r\n \/* Dark\/Active Slider Focus styling *\/\r\n .control-group.dark-style {\r\n background: #1e293b;\r\n }\r\n\r\n .control-group.dark-style .control-label,\r\n .control-group.dark-style .control-value {\r\n color: #06b6d4;\r\n }\r\n\r\n .control-group.dark-style input[type=\"range\"] {\r\n background: #334155;\r\n }\r\n\r\n .control-group.dark-style input[type=\"range\"]::-webkit-slider-thumb {\r\n background: #06b6d4;\r\n box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.3);\r\n }\r\n\r\n \/* Responsive Breakdown *\/\r\n @media (max-width: 992px) {\r\n .cards-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"playground-container\">\r\n \r\n <header class=\"playground-header\">\r\n <h1 class=\"playground-title\">Engineering Playground Nadim<\/h1>\r\n <p class=\"playground-subtitle\">Interact with live engineering simulations...<\/p>\r\n <\/header>\r\n\r\n <div class=\"cards-grid\">\r\n\r\n \r\n <div class=\"playground-card\">\r\n <div class=\"card-header\">\r\n <span class=\"card-dot dot-blue\"><\/span>\r\n <h2 class=\"card-title\">Gear Train Simulator<\/h2>\r\n <\/div>\r\n\r\n <div class=\"visual-area\">\r\n <div class=\"gears-wrapper\">\r\n \r\n <svg id=\"gear1\" class=\"gear-svg\" width=\"60\" height=\"60\" viewBox=\"0 0 100 100\" fill=\"#2563eb\">\r\n <path d=\"M50 35a15 15 0 1 0 0 30 15 15 0 0 0 0-30zm0-25a5 5 0 0 1 5 5v5.1a35 35 0 0 1 12.1 5l3.6-3.6a5 5 0 0 1 7.1 0l7.1 7.1a5 5 0 0 1 0 7.1l-3.6 3.6A35 35 0 0 1 86.4 50h5.1a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5h-5.1a35 35 0 0 1-5 12.1l3.6 3.6a5 5 0 0 1 0 7.1l-7.1 7.1a5 5 0 0 1-7.1 0l-3.6-3.6A35 35 0 0 1 55 86.4v5.1a5 5 0 0 1-5 5H40a5 5 0 0 1-5-5v-5.1a35 35 0 0 1-12.1-5l-3.6 3.6a5 5 0 0 1-7.1 0l-7.1-7.1a5 5 0 0 1 0-7.1l3.6-3.6A35 35 0 0 1 13.6 70H8.5a5 5 0 0 1-5-5V55a5 5 0 0 1 5-5h5.1a35 35 0 0 1 5-12.1l-3.6-3.6a5 5 0 0 1 0-7.1l7.1-7.1a5 5 0 0 1 7.1 0l3.6 3.6A35 35 0 0 1 35 18.6V13.5a5 5 0 0 1 5-5h10z\"\/>\r\n <\/svg>\r\n \r\n <svg id=\"gear2\" class=\"gear-svg\" width=\"45\" height=\"45\" viewBox=\"0 0 100 100\" fill=\"#06b6d4\">\r\n <path d=\"M50 35a15 15 0 1 0 0 30 15 15 0 0 0 0-30zm0-25a5 5 0 0 1 5 5v5.1a35 35 0 0 1 12.1 5l3.6-3.6a5 5 0 0 1 7.1 0l7.1 7.1a5 5 0 0 1 0 7.1l-3.6 3.6A35 35 0 0 1 86.4 50h5.1a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5h-5.1a35 35 0 0 1-5 12.1l3.6 3.6a5 5 0 0 1 0 7.1l-7.1 7.1a5 5 0 0 1-7.1 0l-3.6-3.6A35 35 0 0 1 55 86.4v5.1a5 5 0 0 1-5 5H40a5 5 0 0 1-5-5v-5.1a35 35 0 0 1-12.1-5l-3.6 3.6a5 5 0 0 1-7.1 0l-7.1-7.1a5 5 0 0 1 0-7.1l3.6-3.6A35 35 0 0 1 13.6 70H8.5a5 5 0 0 1-5-5V55a5 5 0 0 1 5-5h5.1a35 35 0 0 1 5-12.1l-3.6-3.6a5 5 0 0 1 0-7.1l7.1-7.1a5 5 0 0 1 7.1 0l3.6 3.6A35 35 0 0 1 35 18.6V13.5a5 5 0 0 1 5-5h10z\"\/>\r\n <\/svg>\r\n \r\n <svg id=\"gear3\" class=\"gear-svg\" width=\"35\" height=\"35\" viewBox=\"0 0 100 100\" fill=\"#38bdf8\">\r\n <path d=\"M50 35a15 15 0 1 0 0 30 15 15 0 0 0 0-30zm0-25a5 5 0 0 1 5 5v5.1a35 35 0 0 1 12.1 5l3.6-3.6a5 5 0 0 1 7.1 0l7.1 7.1a5 5 0 0 1 0 7.1l-3.6 3.6A35 35 0 0 1 86.4 50h5.1a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5h-5.1a35 35 0 0 1-5 12.1l3.6 3.6a5 5 0 0 1 0 7.1l-7.1 7.1a5 5 0 0 1-7.1 0l-3.6-3.6A35 35 0 0 1 55 86.4v5.1a5 5 0 0 1-5 5H40a5 5 0 0 1-5-5v-5.1a35 35 0 0 1-12.1-5l-3.6 3.6a5 5 0 0 1-7.1 0l-7.1-7.1a5 5 0 0 1 0-7.1l3.6-3.6A35 35 0 0 1 13.6 70H8.5a5 5 0 0 1-5-5V55a5 5 0 0 1 5-5h5.1a35 35 0 0 1 5-12.1l-3.6-3.6a5 5 0 0 1 0-7.1l7.1-7.1a5 5 0 0 1 7.1 0l3.6 3.6A35 35 0 0 1 35 18.6V13.5a5 5 0 0 1 5-5h10z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <span class=\"rpm-badge\" id=\"rpmText\">1 RPM<\/span>\r\n <\/div>\r\n\r\n <div class=\"controls-wrapper\">\r\n <div class=\"control-group\">\r\n <div class=\"control-header\">\r\n <span class=\"control-label\" style=\"color:#64748b\">Rotation Speed<\/span>\r\n <span class=\"control-value\" id=\"speedValue\">1<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"speedSlider\" min=\"0\" max=\"100\" value=\"1\">\r\n <div class=\"control-header\" style=\"color: #94a3b8; font-size: 10px; margin-top: 2px;\">\r\n <span>0<\/span>\r\n <span>50<\/span>\r\n <span>100<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"playground-card\">\r\n <div class=\"card-header\">\r\n <span class=\"card-dot dot-gray\"><\/span>\r\n <h2 class=\"card-title\">Motor Controller<\/h2>\r\n <\/div>\r\n\r\n <div class=\"visual-area\">\r\n <div class=\"motor-circle-outer\" id=\"motorOuter\">\r\n <div class=\"motor-circle-inner\" id=\"motorInner\">+<\/div>\r\n <\/div>\r\n <span class=\"status-badge\" id=\"motorStatus\">IDLE<\/span>\r\n <div class=\"motor-info\" id=\"motorInfo\">\r\n RPM: 1200<br>Torque: 2.4 N\u00b7m\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <button class=\"motor-btn\" id=\"motorBtn\">START MOTOR<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"playground-card\">\r\n <div class=\"card-header\">\r\n <span class=\"card-dot dot-cyan\"><\/span>\r\n <h2 class=\"card-title\">Robotic Arm<\/h2>\r\n <\/div>\r\n\r\n <div class=\"visual-area\">\r\n <span class=\"coord-info\" id=\"coordText\">x:77 y:101<\/span>\r\n \r\n <svg width=\"200\" height=\"150\" viewBox=\"0 0 200 150\">\r\n \r\n <rect x=\"80\" y=\"130\" width=\"40\" height=\"8\" rx=\"3\" fill=\"#2563eb\" \/>\r\n <path d=\"M 90 130 L 100 120 L 110 130 Z\" fill=\"#2563eb\" \/>\r\n <circle cx=\"100\" cy=\"120\" r=\"6\" fill=\"#2563eb\" \/>\r\n \r\n \r\n <line id=\"link1\" x1=\"100\" y1=\"120\" x2=\"135\" y2=\"85\" stroke=\"#38bdf8\" stroke-width=\"6\" stroke-linecap=\"round\" \/>\r\n <circle id=\"joint1\" cx=\"135\" cy=\"85\" r=\"5\" fill=\"#ffffff\" stroke=\"#38bdf8\" stroke-width=\"3\" \/>\r\n\r\n \r\n <line id=\"link2\" x1=\"135\" y1=\"85\" x2=\"160\" y2=\"50\" stroke=\"#06b6d4\" stroke-width=\"5\" stroke-linecap=\"round\" \/>\r\n <circle id=\"joint2\" cx=\"160\" cy=\"50\" r=\"4\" fill=\"#ffffff\" stroke=\"#06b6d4\" stroke-width=\"3\" \/>\r\n\r\n \r\n <g id=\"endEffector\" transform=\"translate(160, 50)\">\r\n <line x1=\"-5\" y1=\"-5\" x2=\"5\" y2=\"5\" stroke=\"#0f172a\" stroke-width=\"2\" \/>\r\n <line x1=\"5\" y1=\"-5\" x2=\"-5\" y2=\"5\" stroke=\"#0f172a\" stroke-width=\"2\" \/>\r\n <\/g>\r\n <\/svg>\r\n <\/div>\r\n\r\n <div class=\"controls-wrapper\">\r\n <div class=\"control-group\">\r\n <div class=\"control-header\">\r\n <span class=\"control-label\">Shoulder<\/span>\r\n <span class=\"control-value\" id=\"valShoulder\">62\u00b0<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"sliderShoulder\" min=\"0\" max=\"180\" value=\"62\">\r\n <\/div>\r\n\r\n <div class=\"control-group dark-style\" id=\"groupElbow\">\r\n <div class=\"control-header\">\r\n <span class=\"control-label\">Elbow<\/span>\r\n <span class=\"control-value\" id=\"valElbow\">75\u00b0<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"sliderElbow\" min=\"0\" max=\"180\" value=\"75\">\r\n <\/div>\r\n\r\n <div class=\"control-group\">\r\n <div class=\"control-header\">\r\n <span class=\"control-label\">Wrist<\/span>\r\n <span class=\"control-value\" id=\"valWrist\">4\u00b0<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"sliderWrist\" min=\"0\" max=\"180\" value=\"4\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/* ==================== CARD 1: GEAR ROTATION INTERACTION ==================== *\/\r\n const speedSlider = document.getElementById('speedSlider');\r\n const speedValue = document.getElementById('speedValue');\r\n const rpmText = document.getElementById('rpmText');\r\n const gear1 = document.getElementById('gear1');\r\n const gear2 = document.getElementById('gear2');\r\n const gear3 = document.getElementById('gear3');\r\n\r\n let gearAngle = 0;\r\n let animFrame;\r\n\r\n function animateGears() {\r\n const speed = parseFloat(speedSlider.value);\r\n if (speed > 0) {\r\n gearAngle += (speed * 0.1);\r\n gear1.style.transform = `rotate(${gearAngle}deg)`;\r\n gear2.style.transform = `rotate(${-gearAngle * 1.33}deg)`;\r\n gear3.style.transform = `rotate(${gearAngle * 1.71}deg)`;\r\n }\r\n animFrame = requestAnimationFrame(animateGears);\r\n }\r\n\r\n speedSlider.addEventListener('input', (e) => {\r\n const val = e.target.value;\r\n speedValue.textContent = val;\r\n rpmText.textContent = `${val} RPM`;\r\n });\r\n\r\n animateGears();\r\n\r\n \/* ==================== CARD 2: MOTOR CONTROLLER ==================== *\/\r\n const motorBtn = document.getElementById('motorBtn');\r\n const motorOuter = document.getElementById('motorOuter');\r\n const motorInner = document.getElementById('motorInner');\r\n const motorStatus = document.getElementById('motorStatus');\r\n const motorInfo = document.getElementById('motorInfo');\r\n\r\n let isRunning = false;\r\n\r\n motorBtn.addEventListener('click', () => {\r\n isRunning = !isRunning;\r\n if (isRunning) {\r\n motorBtn.textContent = 'STOP MOTOR';\r\n motorBtn.classList.add('running');\r\n motorOuter.classList.add('active');\r\n motorInner.classList.add('active');\r\n motorStatus.classList.add('active');\r\n motorStatus.textContent = 'RUNNING';\r\n motorInfo.classList.add('active');\r\n } else {\r\n motorBtn.textContent = 'START MOTOR';\r\n motorBtn.classList.remove('running');\r\n motorOuter.classList.remove('active');\r\n motorInner.classList.remove('active');\r\n motorStatus.classList.remove('active');\r\n motorStatus.textContent = 'IDLE';\r\n motorInfo.classList.remove('active');\r\n }\r\n });\r\n\r\n \/* ==================== CARD 3: ROBOTIC ARM KINEMATICS ==================== *\/\r\n const sliderShoulder = document.getElementById('sliderShoulder');\r\n const sliderElbow = document.getElementById('sliderElbow');\r\n const sliderWrist = document.getElementById('sliderWrist');\r\n\r\n const valShoulder = document.getElementById('valShoulder');\r\n const valElbow = document.getElementById('valElbow');\r\n const valWrist = document.getElementById('valWrist');\r\n\r\n const link1 = document.getElementById('link1');\r\n const link2 = document.getElementById('link2');\r\n const joint1 = document.getElementById('joint1');\r\n const joint2 = document.getElementById('joint2');\r\n const endEffector = document.getElementById('endEffector');\r\n const coordText = document.getElementById('coordText');\r\n\r\n const L1 = 50; \/\/ Link 1 Length\r\n const L2 = 40; \/\/ Link 2 Length\r\n\r\n function updateArm() {\r\n const theta1 = parseFloat(sliderShoulder.value) * (Math.PI \/ 180);\r\n const theta2 = parseFloat(sliderElbow.value) * (Math.PI \/ 180);\r\n const theta3 = parseFloat(sliderWrist.value) * (Math.PI \/ 180);\r\n\r\n valShoulder.textContent = `${sliderShoulder.value}\u00b0`;\r\n valElbow.textContent = `${sliderElbow.value}\u00b0`;\r\n valWrist.textContent = `${sliderWrist.value}\u00b0`;\r\n\r\n \/\/ Base Origin Point\r\n const x0 = 100, y0 = 120;\r\n\r\n \/\/ Calculate Joint 1 (Elbow) Position\r\n const x1 = x0 + L1 * Math.cos(theta1);\r\n const y1 = y0 - L1 * Math.sin(theta1);\r\n\r\n \/\/ Calculate Joint 2 (Wrist \/ End Effector) Position\r\n const x2 = x1 + L2 * Math.cos(theta1 + theta2 - Math.PI\/2);\r\n const y2 = y1 - L2 * Math.sin(theta1 + theta2 - Math.PI\/2);\r\n\r\n \/\/ SVG Elements Coordinate Update\r\n link1.setAttribute('x2', x1);\r\n link1.setAttribute('y2', y1);\r\n\r\n joint1.setAttribute('cx', x1);\r\n joint1.setAttribute('cy', y1);\r\n\r\n link2.setAttribute('x1', x1);\r\n link2.setAttribute('y1', y1);\r\n link2.setAttribute('x2', x2);\r\n link2.setAttribute('y2', y2);\r\n\r\n joint2.setAttribute('cx', x2);\r\n joint2.setAttribute('cy', y2);\r\n\r\n endEffector.setAttribute('transform', `translate(${x2}, ${y2}) rotate(${-theta3 * (180\/Math.PI)})`);\r\n\r\n \/\/ Update Coordinate Label (relative to origin)\r\n const relX = Math.round(x2 - x0);\r\n const relY = Math.round(y0 - y2);\r\n coordText.textContent = `x:${relX} y:${relY}`;\r\n }\r\n\r\n sliderShoulder.addEventListener('input', updateArm);\r\n sliderElbow.addEventListener('input', updateArm);\r\n sliderWrist.addEventListener('input', updateArm);\r\n\r\n \/\/ Initial Trigger\r\n updateArm();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Engineering Playground Engineering Playground Nadim Interact with live engineering simulations… Gear Train Simulator 1 RPM Rotation Speed 1 0 50 100 Motor Controller + IDLE RPM: 1200Torque: 2.4 N\u00b7m START MOTOR Robotic Arm x:77 y:101 Shoulder 62\u00b0 Elbow 75\u00b0 Wrist 4\u00b0<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-4763","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nssewingcenter.shop\/index.php?rest_route=\/wp\/v2\/pages\/4763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nssewingcenter.shop\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nssewingcenter.shop\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nssewingcenter.shop\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nssewingcenter.shop\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4763"}],"version-history":[{"count":46,"href":"https:\/\/nssewingcenter.shop\/index.php?rest_route=\/wp\/v2\/pages\/4763\/revisions"}],"predecessor-version":[{"id":5856,"href":"https:\/\/nssewingcenter.shop\/index.php?rest_route=\/wp\/v2\/pages\/4763\/revisions\/5856"}],"wp:attachment":[{"href":"https:\/\/nssewingcenter.shop\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Engineering Playground<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@600;700;800;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n background-color: #f4f8fc;\r\n background-image: \r\n linear-gradient(rgba(0, 119, 255, 0.05) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(0, 119, 255, 0.05) 1px, transparent 1px);\r\n background-size: 30px 30px;\r\n font-family: 'Inter', sans-serif;\r\n color: #1e293b;\r\n padding: 50px 20px;\r\n min-height: 100vh;\r\n }\r\n\r\n .playground-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* Header *\/\r\n .playground-header {\r\n margin-bottom: 35px;\r\n }\r\n\r\n .playground-title {\r\n font-family: 'Orbitron', sans-serif;\r\n font-size: 34px;\r\n font-weight: 800;\r\n color: #0f172a;\r\n letter-spacing: -0.5px;\r\n margin-bottom: 6px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .playground-subtitle {\r\n font-family: 'Space Mono', monospace;\r\n color: #64748b;\r\n font-size: 14px;\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n \/* Grid Layout *\/\r\n .cards-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n .playground-card {\r\n background: #ffffff;\r\n border: 1px solid #e2e8f0;\r\n border-radius: 16px;\r\n padding: 28px 24px;\r\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.03);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n min-height: 480px;\r\n position: relative;\r\n }\r\n\r\n .card-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .card-dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n }\r\n\r\n .card-title {\r\n font-family: 'Orbitron', sans-serif;\r\n font-size: 16px;\r\n font-weight: 700;\r\n color: #0f172a;\r\n }\r\n\r\n .visual-area {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 20px 0;\r\n position: relative;\r\n }\r\n\r\n \/* --- Card 1: Gear Train --- *\/\r\n .dot-blue { background-color: #2563eb; }\r\n\r\n .gears-wrapper {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n margin-bottom: 20px;\r\n height: 90px;\r\n }\r\n\r\n .gear-svg {\r\n transform-origin: center;\r\n will-change: transform;\r\n }\r\n\r\n .rpm-badge {\r\n font-family: 'Space Mono', monospace;\r\n font-size: 11px;\r\n font-weight: 700;\r\n color: #2563eb;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n \/* --- Card 2: Motor Controller --- *\/\r\n .dot-gray { background-color: #94a3b8; }\r\n\r\n .motor-circle-outer {\r\n width: 110px;\r\n height: 110px;\r\n border-radius: 50%;\r\n border: 3px solid #bfdbfe;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n box-shadow: 0 0 0 8px #eff6ff;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .motor-circle-inner {\r\n width: 76px;\r\n height: 76px;\r\n border-radius: 50%;\r\n border: 3px solid #2563eb;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #2563eb;\r\n font-size: 32px;\r\n font-weight: 300;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .motor-circle-outer::after {\r\n content: '';\r\n position: absolute;\r\n right: -18px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 14px;\r\n height: 4px;\r\n background-color: #cbd5e1;\r\n border-radius: 2px;\r\n }\r\n\r\n .status-badge {\r\n font-family: 'Space Mono', monospace;\r\n font-size: 11px;\r\n color: #64748b;\r\n background-color: #f1f5f9;\r\n padding: 4px 16px;\r\n border-radius: 20px;\r\n margin-top: 20px;\r\n text-transform: uppercase;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .motor-info {\r\n font-family: 'Space Mono', monospace;\r\n font-size: 11px;\r\n color: #06b6d4;\r\n text-align: center;\r\n margin-top: 10px;\r\n height: 32px;\r\n visibility: hidden;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .motor-info.active {\r\n visibility: visible;\r\n opacity: 1;\r\n }\r\n\r\n .motor-btn {\r\n width: 100%;\r\n background: #2563eb;\r\n color: #ffffff;\r\n border: none;\r\n padding: 14px 0;\r\n border-radius: 10px;\r\n font-family: 'Orbitron', sans-serif;\r\n font-size: 13px;\r\n font-weight: 700;\r\n cursor: pointer;\r\n box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);\r\n transition: all 0.2s;\r\n }\r\n\r\n .motor-btn:hover {\r\n background: #1d4ed8;\r\n }\r\n\r\n .motor-btn.running {\r\n background: #dc2626;\r\n box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);\r\n }\r\n\r\n .motor-btn.running:hover {\r\n background: #b91c1c;\r\n }\r\n\r\n \/* --- Motor Active Visual Animation --- *\/\r\n .motor-circle-outer.active {\r\n border-color: #99f6e4;\r\n box-shadow: 0 0 0 8px #ccfbf1;\r\n animation: pulse 1.5s infinite;\r\n }\r\n\r\n .motor-circle-inner.active {\r\n border-color: #06b6d4;\r\n color: #06b6d4;\r\n transform: rotate(45deg);\r\n }\r\n\r\n .status-badge.active {\r\n background-color: #ccfbf1;\r\n color: #0d9488;\r\n }\r\n\r\n @keyframes pulse {\r\n 0% { box-shadow: 0 0 0 0px rgba(6, 182, 212, 0.4); }\r\n 70% { box-shadow: 0 0 0 12px rgba(6, 182, 212, 0); }\r\n 100% { box-shadow: 0 0 0 0px rgba(6, 182, 212, 0); }\r\n }\r\n\r\n \/* --- Card 3: Robotic Arm --- *\/\r\n .dot-cyan { background-color: #06b6d4; }\r\n\r\n .coord-info {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n font-family: 'Space Mono', monospace;\r\n font-size: 10px;\r\n color: #64748b;\r\n }\r\n\r\n \/* Controls & Sliders *\/\r\n .controls-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 14px;\r\n }\r\n\r\n .control-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n padding: 6px 8px;\r\n border-radius: 8px;\r\n transition: background 0.2s;\r\n }\r\n\r\n .control-header {\r\n display: flex;\r\n justify-content: space-between;\r\n font-family: 'Space Mono', monospace;\r\n font-size: 12px;\r\n }\r\n\r\n .control-label {\r\n color: #2563eb;\r\n font-weight: 600;\r\n }\r\n\r\n .control-value {\r\n color: #2563eb;\r\n font-weight: 700;\r\n }\r\n\r\n input[type=\"range\"] {\r\n -webkit-appearance: none;\r\n width: 100%;\r\n height: 6px;\r\n background: #e2e8f0;\r\n border-radius: 5px;\r\n outline: none;\r\n }\r\n\r\n input[type=\"range\"]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 14px;\r\n height: 14px;\r\n border-radius: 50%;\r\n background: #2563eb;\r\n cursor: pointer;\r\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);\r\n }\r\n\r\n \/* Dark\/Active Slider Focus styling *\/\r\n .control-group.dark-style {\r\n background: #1e293b;\r\n }\r\n\r\n .control-group.dark-style .control-label,\r\n .control-group.dark-style .control-value {\r\n color: #06b6d4;\r\n }\r\n\r\n .control-group.dark-style input[type=\"range\"] {\r\n background: #334155;\r\n }\r\n\r\n .control-group.dark-style input[type=\"range\"]::-webkit-slider-thumb {\r\n background: #06b6d4;\r\n box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.3);\r\n }\r\n\r\n \/* Responsive Breakdown *\/\r\n @media (max-width: 992px) {\r\n .cards-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"playground-container\">\r\n \r\n <header class=\"playground-header\">\r\n <h1 class=\"playground-title\">Engineering Playground Nadim<\/h1>\r\n <p class=\"playground-subtitle\">Interact with live engineering simulations...<\/p>\r\n <\/header>\r\n\r\n <div class=\"cards-grid\">\r\n\r\n \r\n <div class=\"playground-card\">\r\n <div class=\"card-header\">\r\n <span class=\"card-dot dot-blue\"><\/span>\r\n <h2 class=\"card-title\">Gear Train Simulator<\/h2>\r\n <\/div>\r\n\r\n <div class=\"visual-area\">\r\n <div class=\"gears-wrapper\">\r\n \r\n <svg id=\"gear1\" class=\"gear-svg\" width=\"60\" height=\"60\" viewBox=\"0 0 100 100\" fill=\"#2563eb\">\r\n <path d=\"M50 35a15 15 0 1 0 0 30 15 15 0 0 0 0-30zm0-25a5 5 0 0 1 5 5v5.1a35 35 0 0 1 12.1 5l3.6-3.6a5 5 0 0 1 7.1 0l7.1 7.1a5 5 0 0 1 0 7.1l-3.6 3.6A35 35 0 0 1 86.4 50h5.1a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5h-5.1a35 35 0 0 1-5 12.1l3.6 3.6a5 5 0 0 1 0 7.1l-7.1 7.1a5 5 0 0 1-7.1 0l-3.6-3.6A35 35 0 0 1 55 86.4v5.1a5 5 0 0 1-5 5H40a5 5 0 0 1-5-5v-5.1a35 35 0 0 1-12.1-5l-3.6 3.6a5 5 0 0 1-7.1 0l-7.1-7.1a5 5 0 0 1 0-7.1l3.6-3.6A35 35 0 0 1 13.6 70H8.5a5 5 0 0 1-5-5V55a5 5 0 0 1 5-5h5.1a35 35 0 0 1 5-12.1l-3.6-3.6a5 5 0 0 1 0-7.1l7.1-7.1a5 5 0 0 1 7.1 0l3.6 3.6A35 35 0 0 1 35 18.6V13.5a5 5 0 0 1 5-5h10z\"\/>\r\n <\/svg>\r\n \r\n <svg id=\"gear2\" class=\"gear-svg\" width=\"45\" height=\"45\" viewBox=\"0 0 100 100\" fill=\"#06b6d4\">\r\n <path d=\"M50 35a15 15 0 1 0 0 30 15 15 0 0 0 0-30zm0-25a5 5 0 0 1 5 5v5.1a35 35 0 0 1 12.1 5l3.6-3.6a5 5 0 0 1 7.1 0l7.1 7.1a5 5 0 0 1 0 7.1l-3.6 3.6A35 35 0 0 1 86.4 50h5.1a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5h-5.1a35 35 0 0 1-5 12.1l3.6 3.6a5 5 0 0 1 0 7.1l-7.1 7.1a5 5 0 0 1-7.1 0l-3.6-3.6A35 35 0 0 1 55 86.4v5.1a5 5 0 0 1-5 5H40a5 5 0 0 1-5-5v-5.1a35 35 0 0 1-12.1-5l-3.6 3.6a5 5 0 0 1-7.1 0l-7.1-7.1a5 5 0 0 1 0-7.1l3.6-3.6A35 35 0 0 1 13.6 70H8.5a5 5 0 0 1-5-5V55a5 5 0 0 1 5-5h5.1a35 35 0 0 1 5-12.1l-3.6-3.6a5 5 0 0 1 0-7.1l7.1-7.1a5 5 0 0 1 7.1 0l3.6 3.6A35 35 0 0 1 35 18.6V13.5a5 5 0 0 1 5-5h10z\"\/>\r\n <\/svg>\r\n \r\n <svg id=\"gear3\" class=\"gear-svg\" width=\"35\" height=\"35\" viewBox=\"0 0 100 100\" fill=\"#38bdf8\">\r\n <path d=\"M50 35a15 15 0 1 0 0 30 15 15 0 0 0 0-30zm0-25a5 5 0 0 1 5 5v5.1a35 35 0 0 1 12.1 5l3.6-3.6a5 5 0 0 1 7.1 0l7.1 7.1a5 5 0 0 1 0 7.1l-3.6 3.6A35 35 0 0 1 86.4 50h5.1a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5h-5.1a35 35 0 0 1-5 12.1l3.6 3.6a5 5 0 0 1 0 7.1l-7.1 7.1a5 5 0 0 1-7.1 0l-3.6-3.6A35 35 0 0 1 55 86.4v5.1a5 5 0 0 1-5 5H40a5 5 0 0 1-5-5v-5.1a35 35 0 0 1-12.1-5l-3.6 3.6a5 5 0 0 1-7.1 0l-7.1-7.1a5 5 0 0 1 0-7.1l3.6-3.6A35 35 0 0 1 13.6 70H8.5a5 5 0 0 1-5-5V55a5 5 0 0 1 5-5h5.1a35 35 0 0 1 5-12.1l-3.6-3.6a5 5 0 0 1 0-7.1l7.1-7.1a5 5 0 0 1 7.1 0l3.6 3.6A35 35 0 0 1 35 18.6V13.5a5 5 0 0 1 5-5h10z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <span class=\"rpm-badge\" id=\"rpmText\">1 RPM<\/span>\r\n <\/div>\r\n\r\n <div class=\"controls-wrapper\">\r\n <div class=\"control-group\">\r\n <div class=\"control-header\">\r\n <span class=\"control-label\" style=\"color:#64748b\">Rotation Speed<\/span>\r\n <span class=\"control-value\" id=\"speedValue\">1<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"speedSlider\" min=\"0\" max=\"100\" value=\"1\">\r\n <div class=\"control-header\" style=\"color: #94a3b8; font-size: 10px; margin-top: 2px;\">\r\n <span>0<\/span>\r\n <span>50<\/span>\r\n <span>100<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"playground-card\">\r\n <div class=\"card-header\">\r\n <span class=\"card-dot dot-gray\"><\/span>\r\n <h2 class=\"card-title\">Motor Controller<\/h2>\r\n <\/div>\r\n\r\n <div class=\"visual-area\">\r\n <div class=\"motor-circle-outer\" id=\"motorOuter\">\r\n <div class=\"motor-circle-inner\" id=\"motorInner\">+<\/div>\r\n <\/div>\r\n <span class=\"status-badge\" id=\"motorStatus\">IDLE<\/span>\r\n <div class=\"motor-info\" id=\"motorInfo\">\r\n RPM: 1200<br>Torque: 2.4 N\u00b7m\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <button class=\"motor-btn\" id=\"motorBtn\">START MOTOR<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"playground-card\">\r\n <div class=\"card-header\">\r\n <span class=\"card-dot dot-cyan\"><\/span>\r\n <h2 class=\"card-title\">Robotic Arm<\/h2>\r\n <\/div>\r\n\r\n <div class=\"visual-area\">\r\n <span class=\"coord-info\" id=\"coordText\">x:77 y:101<\/span>\r\n \r\n <svg width=\"200\" height=\"150\" viewBox=\"0 0 200 150\">\r\n \r\n <rect x=\"80\" y=\"130\" width=\"40\" height=\"8\" rx=\"3\" fill=\"#2563eb\" \/>\r\n <path d=\"M 90 130 L 100 120 L 110 130 Z\" fill=\"#2563eb\" \/>\r\n <circle cx=\"100\" cy=\"120\" r=\"6\" fill=\"#2563eb\" \/>\r\n \r\n \r\n <line id=\"link1\" x1=\"100\" y1=\"120\" x2=\"135\" y2=\"85\" stroke=\"#38bdf8\" stroke-width=\"6\" stroke-linecap=\"round\" \/>\r\n <circle id=\"joint1\" cx=\"135\" cy=\"85\" r=\"5\" fill=\"#ffffff\" stroke=\"#38bdf8\" stroke-width=\"3\" \/>\r\n\r\n \r\n <line id=\"link2\" x1=\"135\" y1=\"85\" x2=\"160\" y2=\"50\" stroke=\"#06b6d4\" stroke-width=\"5\" stroke-linecap=\"round\" \/>\r\n <circle id=\"joint2\" cx=\"160\" cy=\"50\" r=\"4\" fill=\"#ffffff\" stroke=\"#06b6d4\" stroke-width=\"3\" \/>\r\n\r\n \r\n <g id=\"endEffector\" transform=\"translate(160, 50)\">\r\n <line x1=\"-5\" y1=\"-5\" x2=\"5\" y2=\"5\" stroke=\"#0f172a\" stroke-width=\"2\" \/>\r\n <line x1=\"5\" y1=\"-5\" x2=\"-5\" y2=\"5\" stroke=\"#0f172a\" stroke-width=\"2\" \/>\r\n <\/g>\r\n <\/svg>\r\n <\/div>\r\n\r\n <div class=\"controls-wrapper\">\r\n <div class=\"control-group\">\r\n <div class=\"control-header\">\r\n <span class=\"control-label\">Shoulder<\/span>\r\n <span class=\"control-value\" id=\"valShoulder\">62\u00b0<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"sliderShoulder\" min=\"0\" max=\"180\" value=\"62\">\r\n <\/div>\r\n\r\n <div class=\"control-group dark-style\" id=\"groupElbow\">\r\n <div class=\"control-header\">\r\n <span class=\"control-label\">Elbow<\/span>\r\n <span class=\"control-value\" id=\"valElbow\">75\u00b0<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"sliderElbow\" min=\"0\" max=\"180\" value=\"75\">\r\n <\/div>\r\n\r\n <div class=\"control-group\">\r\n <div class=\"control-header\">\r\n <span class=\"control-label\">Wrist<\/span>\r\n <span class=\"control-value\" id=\"valWrist\">4\u00b0<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"sliderWrist\" min=\"0\" max=\"180\" value=\"4\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/* ==================== CARD 1: GEAR ROTATION INTERACTION ==================== *\/\r\n const speedSlider = document.getElementById('speedSlider');\r\n const speedValue = document.getElementById('speedValue');\r\n const rpmText = document.getElementById('rpmText');\r\n const gear1 = document.getElementById('gear1');\r\n const gear2 = document.getElementById('gear2');\r\n const gear3 = document.getElementById('gear3');\r\n\r\n let gearAngle = 0;\r\n let animFrame;\r\n\r\n function animateGears() {\r\n const speed = parseFloat(speedSlider.value);\r\n if (speed > 0) {\r\n gearAngle += (speed * 0.1);\r\n gear1.style.transform = `rotate(${gearAngle}deg)`;\r\n gear2.style.transform = `rotate(${-gearAngle * 1.33}deg)`;\r\n gear3.style.transform = `rotate(${gearAngle * 1.71}deg)`;\r\n }\r\n animFrame = requestAnimationFrame(animateGears);\r\n }\r\n\r\n speedSlider.addEventListener('input', (e) => {\r\n const val = e.target.value;\r\n speedValue.textContent = val;\r\n rpmText.textContent = `${val} RPM`;\r\n });\r\n\r\n animateGears();\r\n\r\n \/* ==================== CARD 2: MOTOR CONTROLLER ==================== *\/\r\n const motorBtn = document.getElementById('motorBtn');\r\n const motorOuter = document.getElementById('motorOuter');\r\n const motorInner = document.getElementById('motorInner');\r\n const motorStatus = document.getElementById('motorStatus');\r\n const motorInfo = document.getElementById('motorInfo');\r\n\r\n let isRunning = false;\r\n\r\n motorBtn.addEventListener('click', () => {\r\n isRunning = !isRunning;\r\n if (isRunning) {\r\n motorBtn.textContent = 'STOP MOTOR';\r\n motorBtn.classList.add('running');\r\n motorOuter.classList.add('active');\r\n motorInner.classList.add('active');\r\n motorStatus.classList.add('active');\r\n motorStatus.textContent = 'RUNNING';\r\n motorInfo.classList.add('active');\r\n } else {\r\n motorBtn.textContent = 'START MOTOR';\r\n motorBtn.classList.remove('running');\r\n motorOuter.classList.remove('active');\r\n motorInner.classList.remove('active');\r\n motorStatus.classList.remove('active');\r\n motorStatus.textContent = 'IDLE';\r\n motorInfo.classList.remove('active');\r\n }\r\n });\r\n\r\n \/* ==================== CARD 3: ROBOTIC ARM KINEMATICS ==================== *\/\r\n const sliderShoulder = document.getElementById('sliderShoulder');\r\n const sliderElbow = document.getElementById('sliderElbow');\r\n const sliderWrist = document.getElementById('sliderWrist');\r\n\r\n const valShoulder = document.getElementById('valShoulder');\r\n const valElbow = document.getElementById('valElbow');\r\n const valWrist = document.getElementById('valWrist');\r\n\r\n const link1 = document.getElementById('link1');\r\n const link2 = document.getElementById('link2');\r\n const joint1 = document.getElementById('joint1');\r\n const joint2 = document.getElementById('joint2');\r\n const endEffector = document.getElementById('endEffector');\r\n const coordText = document.getElementById('coordText');\r\n\r\n const L1 = 50; \/\/ Link 1 Length\r\n const L2 = 40; \/\/ Link 2 Length\r\n\r\n function updateArm() {\r\n const theta1 = parseFloat(sliderShoulder.value) * (Math.PI \/ 180);\r\n const theta2 = parseFloat(sliderElbow.value) * (Math.PI \/ 180);\r\n const theta3 = parseFloat(sliderWrist.value) * (Math.PI \/ 180);\r\n\r\n valShoulder.textContent = `${sliderShoulder.value}\u00b0`;\r\n valElbow.textContent = `${sliderElbow.value}\u00b0`;\r\n valWrist.textContent = `${sliderWrist.value}\u00b0`;\r\n\r\n \/\/ Base Origin Point\r\n const x0 = 100, y0 = 120;\r\n\r\n \/\/ Calculate Joint 1 (Elbow) Position\r\n const x1 = x0 + L1 * Math.cos(theta1);\r\n const y1 = y0 - L1 * Math.sin(theta1);\r\n\r\n \/\/ Calculate Joint 2 (Wrist \/ End Effector) Position\r\n const x2 = x1 + L2 * Math.cos(theta1 + theta2 - Math.PI\/2);\r\n const y2 = y1 - L2 * Math.sin(theta1 + theta2 - Math.PI\/2);\r\n\r\n \/\/ SVG Elements Coordinate Update\r\n link1.setAttribute('x2', x1);\r\n link1.setAttribute('y2', y1);\r\n\r\n joint1.setAttribute('cx', x1);\r\n joint1.setAttribute('cy', y1);\r\n\r\n link2.setAttribute('x1', x1);\r\n link2.setAttribute('y1', y1);\r\n link2.setAttribute('x2', x2);\r\n link2.setAttribute('y2', y2);\r\n\r\n joint2.setAttribute('cx', x2);\r\n joint2.setAttribute('cy', y2);\r\n\r\n endEffector.setAttribute('transform', `translate(${x2}, ${y2}) rotate(${-theta3 * (180\/Math.PI)})`);\r\n\r\n \/\/ Update Coordinate Label (relative to origin)\r\n const relX = Math.round(x2 - x0);\r\n const relY = Math.round(y0 - y2);\r\n coordText.textContent = `x:${relX} y:${relY}`;\r\n }\r\n\r\n sliderShoulder.addEventListener('input', updateArm);\r\n sliderElbow.addEventListener('input', updateArm);\r\n sliderWrist.addEventListener('input', updateArm);\r\n\r\n \/\/ Initial Trigger\r\n updateArm();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Engineering Playground Engineering Playground Nadim Interact with live engineering simulations… Gear Train Simulator 1 RPM Rotation Speed 1 0 50 100 Motor Controller + IDLE RPM: 1200Torque: 2.4 N\u00b7m START MOTOR Robotic Arm x:77 y:101 Shoulder 62\u00b0 Elbow 75\u00b0 Wrist 4\u00b0<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-4763","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nssewingcenter.shop\/index.php?rest_route=\/wp\/v2\/pages\/4763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nssewingcenter.shop\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nssewingcenter.shop\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nssewingcenter.shop\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nssewingcenter.shop\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4763"}],"version-history":[{"count":46,"href":"https:\/\/nssewingcenter.shop\/index.php?rest_route=\/wp\/v2\/pages\/4763\/revisions"}],"predecessor-version":[{"id":5856,"href":"https:\/\/nssewingcenter.shop\/index.php?rest_route=\/wp\/v2\/pages\/4763\/revisions\/5856"}],"wp:attachment":[{"href":"https:\/\/nssewingcenter.shop\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}