{"id":2453,"date":"2026-01-15T11:56:46","date_gmt":"2026-01-15T10:56:46","guid":{"rendered":"https:\/\/hardemanmotorsport.nl\/?page_id=2453"},"modified":"2026-01-30T09:20:37","modified_gmt":"2026-01-30T08:20:37","slug":"de-dragrace","status":"publish","type":"page","link":"https:\/\/hardemanmotorsport.nl\/en\/de-dragrace\/","title":{"rendered":"The dragrace"},"content":{"rendered":"\n<p>The Hardeman Motorsport final drive compare tool<\/p>\n\n\n\n<div id=\"hms-simulator-v12\" style=\"font-family: 'Segoe UI', sans-serif; background-color: #1a1a1a; color: white; padding: 15px; border-radius: 10px; border: 1px solid #444; max-width: 1100px; margin: auto; position: relative; overflow: hidden;\">\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n\n    <div style=\"display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; position: relative; z-index: 10;\">\n        <div style=\"flex: 2; min-width: 250px;\">\n            <label style=\"font-size: 11px; color: #bbb; display: block; margin-bottom: 5px;\">VEHICLE SELECTION<\/label>\n            <select id=\"hms-engineType\" onchange=\"hmsApplyPreset()\" style=\"width: 100%; background: #000; border: 1px solid #555; color: #fff; padding: 10px; border-radius: 5px; font-size: 14px;\">\n                <optgroup label=\"BMW Classic\">\n                    <option value=\"2002tii\">BMW 2002 tii<\/option>\n                    <option value=\"e21_323i\">BMW E21 323i<\/option>\n                    <option value=\"e30_325i\">BMW E30 325i<\/option>\n                    <option value=\"e30m3\">BMW E30 M3<\/option>\n                <\/optgroup>\n                <optgroup label=\"BMW M &#038; Modern\">\n                    <option value=\"e36m3\">BMW E36 M3<\/option>\n                    <option value=\"e36_325i\">BMW E36 325i<\/option>\n                    <option value=\"e39m5\">BMW E39 M5<\/option>\n                    <option value=\"e46m3\" selected>BMW E46 M3<\/option>\n                    <option value=\"e60m5\">BMW M5 E60<\/option>\n                    <option value=\"e92m3\">BMW E92 M3<\/option>\n                    <option value=\"f87m2\">BMW F87 M2<\/option>\n                    <option value=\"g80m3\">BMW G80 M3<\/option>\n                <\/optgroup>\n                <optgroup label=\"JDM &#038; Sports\">\n                    <option value=\"s2000\">Honda S2000<\/option>\n                    <option value=\"gt86mt\">Toyota GT86 MT<\/option>\n                    <option value=\"gr86\">Toyota GR86<\/option>\n                    <option value=\"a80supra\">Toyota A80 Supra<\/option>\n                    <option value=\"350z\">Nissan 350Z<\/option>\n                <\/optgroup>\n                <optgroup label=\"Mazda MX-5\">\n                    <option value=\"mx5na\">Mazda MX-5 NA 1.8<\/option>\n                    <option value=\"mx5nd20\">Mazda MX-5 ND 2.0 MT<\/option>\n                <\/optgroup>\n            <\/select>\n        <\/div>\n        <div style=\"flex: 1; min-width: 80px;\"><label style=\"font-size: 11px; color: #bbb; display: block; margin-bottom: 5px;\">FROM (km\/h)<\/label><input type=\"number\" id=\"hms-startSpeed\" value=\"50\" style=\"width:100%; background:#000; border:1px solid #555; color:#fff; padding:8px;\"><\/div>\n        <div style=\"flex: 1; min-width: 80px;\"><label style=\"font-size: 11px; color: #bbb; display: block; margin-bottom: 5px;\">TO (km\/h)<\/label><input type=\"number\" id=\"hms-endSpeed\" value=\"200\" style=\"width:100%; background:#000; border:1px solid #555; color:#fff; padding:8px;\"><\/div>\n        <div style=\"flex: 1; min-width: 80px;\"><label style=\"font-size: 11px; color: #3498db; display: block; margin-bottom: 5px;\">DIFF A<\/label><input type=\"number\" step=\"0.001\" id=\"hms-diffA\" value=\"3.620\" style=\"width:100%; background:#000; border:1px solid #555; color:#fff; padding:8px;\"><\/div>\n        <div style=\"flex: 1; min-width: 80px;\"><label style=\"font-size: 11px; color: #e67e22; display: block; margin-bottom: 5px;\">DIFF B<\/label><input type=\"number\" step=\"0.001\" id=\"hms-diffB\" value=\"4.100\" style=\"width:100%; background:#000; border:1px solid #555; color:#fff; padding:8px;\"><\/div>\n    <\/div>\n\n    <button onclick=\"hmsStartRace()\" style=\"width: 100%; background-color: #e74c3c; color: white; border: none; padding: 18px; border-radius: 5px; font-weight: bold; cursor: pointer; margin-bottom: 20px; font-size: 16px; letter-spacing: 1px;\">START SIMULATION<\/button>\n\n    <div id=\"hms-results\" style=\"display: none; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;\">\n        <div id=\"hms-statsA\" style=\"background: #222; padding: 15px; border-left: 5px solid #3498db; border-radius: 4px;\"><\/div>\n        <div id=\"hms-statsB\" style=\"background: #222; padding: 15px; border-left: 5px solid #e67e22; border-radius: 4px;\"><\/div>\n    <\/div>\n\n    <div style=\"background: #222; border: 2px solid #444; height: 220px; position: relative; overflow: hidden; margin-bottom: 20px; border-radius: 8px;\">\n        <div style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-15deg); font-size: 50px; color: rgba(255,255,255,0.05); font-weight: 900; white-space: nowrap; pointer-events: none; z-index: 1;\">HARDEMAN MOTORSPORT<\/div>\n        \n        <canvas id=\"hms-raceCanvas\" style=\"width: 100%; height: 100%; display: block; position: relative; z-index: 2;\"><\/canvas>\n    <\/div>\n\n    <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px;\">\n        <div style=\"height: 300px; background: #111; padding: 15px; border-radius: 8px; border: 1px solid #333;\">\n            <h4 style=\"margin: 0 0 10px 0; font-size: 11px; color: #888; text-transform: uppercase;\">Engine Chart (Nm &#038; HP)<\/h4>\n            <canvas id=\"hms-engineChart\"><\/canvas>\n        <\/div>\n        <div style=\"height: 300px; background: #111; padding: 15px; border-radius: 8px; border: 1px solid #333;\">\n            <h4 style=\"margin: 0 0 10px 0; font-size: 11px; color: #888; text-transform: uppercase;\">Wheel Torque (Nm)<\/h4>\n            <canvas id=\"hms-wheelChart\"><\/canvas>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    const presets = {\n        '2002tii': { tq: 178, rpm: 6500, peak: 4500, drop: 0.20, w: 1010, c: 1850, d: 3.64, g: [3.76, 2.02, 1.32, 1.00] },\n        'e21_323i': { tq: 190, rpm: 6400, peak: 4500, drop: 0.15, w: 1135, c: 1880, d: 3.45, g: [3.76, 2.33, 1.61, 1.23, 1.00] },\n        'e30_325i': { tq: 222, rpm: 6500, peak: 4300, drop: 0.15, w: 1180, c: 1910, d: 3.91, g: [3.35, 2.03, 1.36, 1.00, 0.81] },\n        'e30m3': { tq: 230, rpm: 7250, peak: 4750, drop: 0.15, w: 1165, c: 1910, d: 3.25, g: [3.72, 2.40, 1.77, 1.26, 1.00] },\n        'e36m3': { tq: 350, rpm: 7600, peak: 3250, drop: 0.20, w: 1440, c: 1965, d: 3.23, g: [4.23, 2.51, 1.67, 1.23, 1.00, 0.83] },\n        'e39m5': { tq: 500, rpm: 7000, peak: 3800, drop: 0.20, w: 1795, c: 2015, d: 3.15, g: [4.23, 2.53, 1.67, 1.23, 1.00, 0.83] },\n        'e46m3': { tq: 365, rpm: 8000, peak: 4900, drop: 0.18, w: 1540, c: 1980, d: 3.62, g: [4.23, 2.53, 1.67, 1.23, 1.00, 0.83] },\n        'e60m5': { tq: 520, rpm: 8250, peak: 6100, drop: 0.10, w: 1755, c: 2040, d: 3.62, g: [3.99, 2.65, 1.81, 1.39, 1.16, 1.00, 0.83] },\n        'e92m3': { tq: 400, rpm: 8400, peak: 3900, drop: 0.12, w: 1580, c: 2010, d: 3.85, g: [4.06, 2.40, 1.58, 1.19, 1.00, 0.87] },\n        'f87m2': { tq: 465, rpm: 7000, peak: 1450, drop: 0.10, w: 1495, c: 2010, d: 3.46, g: [4.11, 2.32, 1.54, 1.18, 1.00, 0.85] },\n        'g80m3': { tq: 650, rpm: 7200, peak: 2750, drop: 0.08, w: 1705, c: 2040, d: 3.15, g: [5.00, 3.20, 2.14, 1.72, 1.31, 1.00, 0.82, 0.64] },\n        's2000': { tq: 208, rpm: 9000, peak: 7500, drop: 0.10, w: 1250, c: 1940, d: 4.10, g: [3.13, 2.04, 1.48, 1.16, 0.94, 0.76] },\n        'gt86mt': { tq: 205, rpm: 7450, peak: 6400, drop: 0.12, w: 1210, c: 1960, d: 4.10, g: [3.63, 2.19, 1.54, 1.21, 1.00, 0.77] },\n        'gr86': { tq: 250, rpm: 7500, peak: 3700, drop: 0.10, w: 1250, c: 1970, d: 4.10, g: [3.63, 2.19, 1.54, 1.21, 1.00, 0.77] },\n        'a80supra': { tq: 441, rpm: 7000, peak: 4800, drop: 0.15, w: 1585, c: 2010, d: 3.13, g: [3.83, 2.36, 1.68, 1.31, 1.00, 0.79] },\n        'mx5na': { tq: 150, rpm: 7000, peak: 4500, drop: 0.15, w: 990, c: 1840, d: 4.10, g: [3.14, 1.89, 1.33, 1.00, 0.81] },\n        'mx5nd20': { tq: 205, rpm: 7500, peak: 4000, drop: 0.10, w: 1030, c: 1910, d: 2.87, g: [5.09, 2.99, 2.04, 1.59, 1.29, 1.00] }\n    };\n\n    let animationId, cars = [], engineChart, wheelChart, startTime;\n    const PIXELS_PER_METER = 24; \n\n    window.hmsApplyPreset = function() {\n        const p = presets[document.getElementById('hms-engineType').value];\n        document.getElementById('hms-diffA').value = p.d.toFixed(3);\n        updateCharts();\n    };\n\n    function getTorqueAtRpm(rpm, s) {\n        if (rpm < 1000) return s.tq * 0.7;\n        if (rpm > s.peak) return s.tq * (1 - ((rpm - s.peak) \/ (s.rpm - s.peak) * s.drop));\n        return s.tq;\n    }\n\n    class Car {\n        constructor(name, color, row, diff, s) {\n            this.name = name; this.color = color; this.row = row; this.diff = diff; this.s = s;\n            this.reset();\n        }\n        reset() {\n            const circ = this.s.c \/ 1000;\n            const vStart = parseFloat(document.getElementById('hms-startSpeed').value) \/ 3.6;\n            this.x = 0; this.speed = vStart; this.finished = false; this.time = 0; this.gear = 0; this.rpm = 0;\n            for(let g=0; g<this.s.g.length; g++) {\n                if ((vStart \/ circ) * 60 * this.diff * this.s.g[g] < this.s.rpm) { this.gear = g; break; }\n            }\n        }\n        update(dt, totalTime) {\n            if (this.finished) return;\n            const circ = this.s.c \/ 1000;\n            const target = parseFloat(document.getElementById('hms-endSpeed').value) \/ 3.6;\n            this.rpm = (this.speed \/ circ) * 60 * this.diff * this.s.g[this.gear];\n            \n            if (this.rpm >= this.s.rpm && this.gear < this.s.g.length - 1) {\n                this.gear++;\n                this.rpm = (this.speed \/ circ) * 60 * this.diff * this.s.g[this.gear];\n            }\n            \n            let force = (getTorqueAtRpm(this.rpm, this.s) * this.s.g[this.gear] * this.diff * 0.90) \/ (circ \/ 6.28);\n            let drag = 0.5 * 1.225 * (this.speed ** 2) * 0.33 * 2.1;\n            this.speed += ((force - drag) \/ this.s.w) * dt;\n            this.x += this.speed * dt;\n            if (this.speed >= target) { this.finished = true; this.time = totalTime; }\n            if (totalTime > 120) this.finished = true; \/\/ Safety Timeout\n        }\n        draw(ctx, camX, h) {\n            let sx = (this.x - camX) * PIXELS_PER_METER + 150; \n            let sy = this.row === 0 ? h * 0.30 : h * 0.70;\n            let carW = 4.5 * PIXELS_PER_METER;\n            \n            ctx.fillStyle = this.color;\n            ctx.fillRect(sx - carW, sy, carW, 22); \n            \n            ctx.fillStyle = \"rgba(0,0,0,0.7)\";\n            ctx.fillRect(sx - carW, sy - 35, 90, 25);\n            ctx.strokeStyle = this.color; ctx.strokeRect(sx - carW, sy - 35, 90, 25);\n            \n            ctx.fillStyle = \"white\";\n            ctx.font = \"bold 10px monospace\";\n            ctx.fillText(`G:${this.gear + 1} RPM:${Math.round(this.rpm)}`, sx - carW + 5, sy - 18);\n            ctx.font = \"bold 12px Arial\";\n            ctx.fillText(Math.round(this.speed*3.6)+\" km\/h\", sx - carW, sy - 40);\n        }\n    }\n\n    function updateCharts() {\n        const s = presets[document.getElementById('hms-engineType').value];\n        const diffA = parseFloat(document.getElementById('hms-diffA').value);\n        const diffB = parseFloat(document.getElementById('hms-diffB').value);\n        \n        const labels = [], nmData = [], hpData = [];\n        for(let r=1000; r<=s.rpm; r+=200) {\n            labels.push(r);\n            let t = getTorqueAtRpm(r, s);\n            nmData.push(t);\n            hpData.push((t * r) \/ 7120);\n        }\n        engineChart.data.labels = labels;\n        engineChart.data.datasets[0].data = nmData;\n        engineChart.data.datasets[1].data = hpData;\n        engineChart.update();\n\n        const generateWheelData = (diff) => {\n            let pts = [];\n            const startV = parseInt(document.getElementById('hms-startSpeed').value);\n            const endV = parseInt(document.getElementById('hms-endSpeed').value);\n            for (let v = startV; v <= endV + 20; v += 1) {\n                let vMps = v \/ 3.6, bestG = 0;\n                for(let g=0; g<s.g.length; g++) {\n                    if ((vMps \/ (s.c\/1000)) * 60 * diff * s.g[g] < s.rpm) { bestG = g; break; }\n                }\n                let rpm = (vMps \/ (s.c\/1000)) * 60 * diff * s.g[bestG];\n                pts.push({x: v, y: getTorqueAtRpm(rpm, s) * s.g[bestG] * diff});\n            }\n            return pts;\n        };\n        wheelChart.data.datasets[0].data = generateWheelData(diffA);\n        wheelChart.data.datasets[1].data = generateWheelData(diffB);\n        wheelChart.update();\n    }\n\n    window.hmsStartRace = function() {\n        if (animationId) cancelAnimationFrame(animationId);\n        const canv = document.getElementById('hms-raceCanvas');\n        canv.width = canv.clientWidth; canv.height = canv.clientHeight;\n        const ctx = canv.getContext('2d');\n        const s = presets[document.getElementById('hms-engineType').value];\n        document.getElementById('hms-results').style.display = 'grid';\n        \n        cars = [\n            new Car('Config A', '#3498db', 0, parseFloat(document.getElementById('hms-diffA').value), s),\n            new Car('Config B', '#e67e22', 1, parseFloat(document.getElementById('hms-diffB').value), s)\n        ];\n        \n        startTime = performance.now();\n\n        function loop() {\n            let now = (performance.now() - startTime) \/ 1000;\n            ctx.fillStyle = \"#2c3e50\"; ctx.fillRect(0,0,canv.width,canv.height);\n            let camX = Math.max(cars[0].x, cars[1].x) - (canv.width \/ (PIXELS_PER_METER * 3)); \n            \n            ctx.strokeStyle = \"rgba(255,255,255,0.1)\";\n            for(let m = Math.floor(camX\/10)*10; m < camX + 150; m+=10) {\n                let lx = (m - camX) * PIXELS_PER_METER + 150;\n                ctx.beginPath(); ctx.moveTo(lx, 0); ctx.lineTo(lx, canv.height); ctx.stroke();\n            }\n            \n            let done = true;\n            cars.forEach(c => { c.update(1\/60, now); c.draw(ctx, camX, canv.height); if(!c.finished) done = false; });\n            \n            if (done) {\n                cars.forEach((c, i) => { document.getElementById(i===0?'hms-statsA':'hms-statsB').innerHTML = `<b>${c.name}<\/b><br><span style=\"font-size:20px\">${c.time >= 120 ? 'DNF' : c.time.toFixed(2)+'s'}<\/span>`; });\n                return;\n            }\n            animationId = requestAnimationFrame(loop);\n        }\n        loop();\n    };\n\n    window.addEventListener('load', function() {\n        engineChart = new Chart(document.getElementById('hms-engineChart'), {\n            type:'line', data:{datasets:[{label:'Nm', borderColor:'#3498db', data:[], pointRadius:0, borderWidth: 2},{label:'HP', borderColor:'#e74c3c', data:[], yAxisID:'y1', pointRadius:0, borderWidth: 2}]},\n            options:{ responsive:true, maintainAspectRatio:false, scales:{ y1:{position:'right', ticks:{color:'#e74c3c'}}, x:{ticks:{color:'#888'}}}, plugins:{legend:{labels:{color:'#fff'}}}}\n        });\n        wheelChart = new Chart(document.getElementById('hms-wheelChart'), {\n            type:'line', data:{datasets:[{label:'Config A', borderColor:'#3498db', data:[], pointRadius:0},{label:'Config B', borderColor:'#e67e22', data:[], pointRadius:0}]},\n            options:{ responsive:true, maintainAspectRatio:false, scales:{ x:{type:'linear', ticks:{color:'#888'}}}, plugins:{legend:{labels:{color:'#fff'}}}}\n        });\n        hmsApplyPreset();\n    });\n})();\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Hardeman Motorsport final drive compare tool VEHICLE SELECTION BMW 2002 tiiBMW E21 323iBMW E30 325iBMW E30 M3 BMW E36 M3BMW E36 325iBMW E39 M5BMW E46 M3BMW M5 E60BMW E92 M3BMW F87 M2BMW G80 M3 Honda S2000Toyota GT86 MTToyota GR86Toyota A80 SupraNissan 350Z Mazda MX-5 NA 1.8Mazda MX-5 ND 2.0 MT FROM (km\/h) TO (km\/h)&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/hardemanmotorsport.nl\/en\/de-dragrace\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-2453","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/hardemanmotorsport.nl\/en\/wp-json\/wp\/v2\/pages\/2453"}],"collection":[{"href":"https:\/\/hardemanmotorsport.nl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hardemanmotorsport.nl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hardemanmotorsport.nl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hardemanmotorsport.nl\/en\/wp-json\/wp\/v2\/comments?post=2453"}],"version-history":[{"count":48,"href":"https:\/\/hardemanmotorsport.nl\/en\/wp-json\/wp\/v2\/pages\/2453\/revisions"}],"predecessor-version":[{"id":2540,"href":"https:\/\/hardemanmotorsport.nl\/en\/wp-json\/wp\/v2\/pages\/2453\/revisions\/2540"}],"wp:attachment":[{"href":"https:\/\/hardemanmotorsport.nl\/en\/wp-json\/wp\/v2\/media?parent=2453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}