Embed

<div id="physics-sim-v18" style="width: 100%; font-family: 'Segoe UI', sans-serif; background: #ffffff; border-radius: 16px; padding: 25px; box-shadow: 0 15px 35px rgba(0,0,0,0.07); color: #2d3436;">
    <h3 style="text-align: center; margin-bottom: 20px; color: #1a1a1a; font-weight: 700;">Linear Kinematics: 0-100 m/s Scale</h3>
    
    <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 20px; background: #fbfcfd; padding: 18px; border-radius: 12px; border: 1px solid #f1f2f6;">
        <div style="display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 140px;">
            <label style="font-size: 11px; font-weight: 700; text-transform: uppercase; color: #636e72; margin-bottom: 5px;">Initial Velocity (v₀)</label>
            <input type="range" id="velSlider" min="0" max="50" step="1" value="10" style="width: 100%;" oninput="updateParams()">
            <span id="velVal" style="font-size: 13px; font-weight: 600; color: #0984e3;">10 m/s</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 140px;">
            <label style="font-size: 11px; font-weight: 700; text-transform: uppercase; color: #636e72; margin-bottom: 5px;">Acceleration (a)</label>
            <input type="range" id="accSlider" min="0.01" max="5.0" step="0.1" value="2.0" style="width: 100%;" oninput="updateParams()">
            <span id="accVal" style="font-size: 13px; font-weight: 600; color: #00b894;">2.0 m/s²</span>
        </div>
        <div style="display: flex; align-items: center; gap: 10px; padding-top: 15px;">
            <button id="startStopBtn" onclick="toggleSim()" style="padding: 10px 20px; cursor: pointer; border: none; border-radius: 6px; background: #2ecc71; color: white; font-weight: 700; min-width: 90px;">Start</button>
            <button onclick="resetSim()" style="padding: 10px 20px; cursor: pointer; border: 1px solid #dfe6e9; border-radius: 6px; background: white; color: #636e72; font-weight: 600;">Reset</button>
            <div style="background: #2d3436; color: #00d1b2; padding: 10px 15px; border-radius: 6px; font-family: monospace; font-weight: 700; font-size: 18px; min-width: 80px; text-align: center;">
                <span id="timerDisplay">0.00</span>s
            </div>
        </div>
    </div>

    <canvas id="motionCanvasV18" style="width: 100%; height: 620px; background: #fff; border: 1px solid #eee; border-radius: 12px; touch-action: none;"></canvas>
</div>

<script>
(function() {
    const canvas = document.getElementById('motionCanvasV18');
    const ctx = canvas.getContext('2d');
    const timerDisplay = document.getElementById('timerDisplay');
    const velSlider = document.getElementById('velSlider');
    const accSlider = document.getElementById('accSlider');
    const startStopBtn = document.getElementById('startStopBtn');
    
    const maxSeconds = 10;
    const maxTimePoints = maxSeconds * 60;
    
    let frameCount = 0;
    let physics = { x: 0, v: 10, a: 2.0, v0: 10 };
    let history = [];
    let isRunning = false;
    let viewW, viewH;
    let dynBounds = { xMax: 1000, vMax: 100 }; // vMax fixed to 100

    function resize() {
        const dpr = window.devicePixelRatio || 1;
        viewW = canvas.parentElement.clientWidth;
        viewH = 620;
        canvas.style.width = viewW + 'px';
        canvas.style.height = viewH + 'px';
        canvas.width = viewW * dpr;
        canvas.height = viewH * dpr;
        ctx.scale(dpr, dpr);
        resetSim();
    }

    window.toggleSim = function() {
        if (frameCount >= maxTimePoints) resetSim();
        isRunning = !isRunning;
        startStopBtn.innerText = isRunning ? "Pause" : "Start";
        startStopBtn.style.background = isRunning ? "#e67e22" : "#2ecc71";
    };

    window.updateParams = function() {
        document.getElementById('velVal').innerText = velSlider.value + " m/s";
        document.getElementById('accVal').innerText = accSlider.value + " m/s²";
        resetSim();
    };

    window.resetSim = function() {
        isRunning = false;
        startStopBtn.innerText = "Start";
        startStopBtn.style.background = "#2ecc71";
        frameCount = 0;
        history = [];
        physics.x = 0;
        physics.v0 = parseFloat(velSlider.value);
        physics.v = physics.v0;
        physics.a = parseFloat(accSlider.value);
        
        // vMax stays 100 as requested
        dynBounds.vMax = 100;
        // xMax still dynamic to ensure the car stays in frame for x-t
        dynBounds.xMax = (physics.v0 * maxSeconds) + (0.5 * physics.a * Math.pow(maxSeconds, 2));
        
        timerDisplay.innerText = "0.00";
    };

    function drawScene() {
        ctx.fillStyle = "#3d4c5f";
        ctx.fillRect(0, 180, viewW, 40);
        ctx.strokeStyle = "rgba(255,255,255,0.4)";
        ctx.setLineDash([15, 15]);
        ctx.beginPath(); ctx.moveTo(0, 200); ctx.lineTo(viewW, 200); ctx.stroke();
        ctx.setLineDash([]);
    }

    function drawCar(px) {
        const startX = 50;
        const endX = viewW - 50;
        const carX = startX + (px / (dynBounds.xMax || 1)) * (endX - startX);
        if (carX > viewW + 100) return; 

        ctx.save();
        ctx.translate(carX, 185);
        ctx.fillStyle = "#e74c3c";
        ctx.beginPath();
        ctx.moveTo(-30, 0); ctx.lineTo(25, 0); ctx.lineTo(25, -12); ctx.lineTo(5, -12); 
        ctx.lineTo(-10, -25); ctx.lineTo(-25, -25); ctx.lineTo(-30, -10);
        ctx.fill();
        ctx.restore();
    }

    function drawGraphs() {
        const padding = 65;
        const spacing = 35;
        const gW = (viewW - (padding * 2) - (spacing * 2)) / 3;
        const gH = 160;
        const gY = 380;

        const charts = [
            { label: 'Position x(t) [m]', key: 'x', color: '#0984e3', yMax: dynBounds.xMax },
            { label: 'Velocity v(t) [m/s]', key: 'v', color: '#e17055', yMax: 100 }, // Fixed 100
            { label: 'Accel a(t) [m/s²]', key: 'a', color: '#6c5ce7', yMax: 5.0 }
        ];

        charts.forEach((chart, idx) => {
            const sx = padding + (idx * (gW + spacing));
            ctx.strokeStyle = '#dfe6e9'; ctx.lineWidth = 1;
            ctx.beginPath(); ctx.moveTo(sx, gY); ctx.lineTo(sx, gY + gH); ctx.lineTo(sx + gW, gY + gH); ctx.stroke();
            
            ctx.fillStyle = '#2d3436'; ctx.font = 'bold 11px sans-serif'; ctx.textAlign = "left";
            ctx.fillText(chart.label, sx, gY - 15);
            
            ctx.font = '9px sans-serif'; ctx.fillStyle = '#95a5a6'; ctx.textAlign = "right";
            for(let i=0; i<=4; i++) {
                let val = (chart.yMax/4*i);
                ctx.fillText(val.toFixed(0), sx - 8, gY + gH - (i * (gH/4)) + 3);
            }

            ctx.textAlign = "center";
            for(let t=0; t<=maxSeconds; t+=2) {
                let tx = sx + (t * (gW / maxSeconds));
                ctx.fillText(t + 's', tx, gY + gH + 18);
            }

            if (history.length > 1) {
                ctx.save();
                ctx.beginPath(); ctx.rect(sx, gY, gW, gH); ctx.clip();
                ctx.strokeStyle = chart.color; ctx.lineWidth = 2.5; ctx.beginPath();
                history.forEach((pt, i) => {
                    let px = sx + (i * (gW / maxTimePoints));
                    let py = (gY + gH) - ((pt[chart.key] / chart.yMax) * gH);
                    if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
                });
                ctx.stroke();
                ctx.restore();
            }
        });
    }

    function animate() {
        ctx.clearRect(0, 0, viewW, viewH);
        if (isRunning && frameCount < maxTimePoints) {
            physics.v += physics.a;
            physics.x += physics.v * (1/60);
            frameCount++;
            history.push({ x: physics.x, v: physics.v, a: physics.a });
            timerDisplay.innerText = (frameCount / 60).toFixed(2);
        } else if (frameCount >= maxTimePoints) {
            isRunning = false;
            startStopBtn.innerText = "Start";
            startStopBtn.style.background = "#2ecc71";
        }
        drawScene(); drawCar(physics.x); drawGraphs();
        requestAnimationFrame(animate);
    }

    window.addEventListener('resize', resize);
    resize(); animate();
})();
</script>

ExaminerPrep

Examiner Prep offers an elite, professionally designed online IB tutoring boutique based in Athens, Greece, targeting high‑achieving DP and MYP students worldwide. Led by award‑winning Physics educator and IB Physics examiner Evan Kotronis, who holds an M.Sc. in Management from UIUC, the brand delivers exclusive, academic‑focused instruction across Physics, Maths, Biology, and Chemistry through a select team of experts. Emphasizing the “Examiner’s Advantage,” the service leverages 20 years of experience, specialized expertise in Internal Assessments and Extended Essays, and internationally recognized mentorship. The site’s premium aesthetic combines navy blue, gold, and white to convey prestige. The business is just starting out.