Embed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wheel on Inclined Plane Simulation</title>
<style>
    .sim-container {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        background-color: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        overflow: hidden;
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
    }
    .canvas-wrapper {
        width: 100%;
        background-color: #f8f9fa;
        border-bottom: 2px solid #e0e0e0;
        position: relative;
    }
    canvas {
        width: 100%;
        height: auto;
        display: block;
        cursor: pointer;
    }
    .controls-panel {
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        background: #fff;
    }
    .control-group {
        display: flex;
        flex-direction: column;
    }
    .control-group label {
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
        color: #333;
    }
    .control-group input[type=range] {
        width: 100%;
        accent-color: #0056b3;
    }
    .button-group {
        grid-column: 1 / -1;
        display: flex;
        gap: 15px;
        margin-top: 10px;
    }
    button {
        flex: 1;
        padding: 12px;
        font-size: 16px;
        font-weight: bold;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: 0.2s;
    }
    #btn-toggle { background-color: #28a745; color: white; }
    #btn-toggle.running { background-color: #dc3545; }
    #btn-reset { background-color: #6c757d; color: white; }
    .force-legend {
        grid-column: 1 / -1;
        display: flex;
        gap: 15px;
        font-size: 13px;
        font-weight: bold;
        justify-content: center;
        padding-top: 10px;
    }
    .leg-w { color: #d35400; }
    .leg-n { color: #2980b9; }
    .leg-t { color: #c0392b; }
</style>
</head>
<body>

<div class="sim-container">
    <div class="canvas-wrapper">
        <canvas id="simCanvas" width="800" height="450"></canvas>
    </div>
    
    <div class="controls-panel">
        <div class="control-group">
            <label><span>Incline Angle (&theta;)</span> <span id="val-angle">30&deg;</span></label>
            <input type="range" id="input-angle" min="0" max="60" value="30" step="1">
        </div>
        
        <div class="control-group">
            <label><span>Static Friction (&mu;s)</span> <span id="val-mu">0.50</span></label>
            <input type="range" id="input-mu" min="0" max="1.0" value="0.5" step="0.05">
        </div>

        <div class="control-group">
            <label><span>Show Force Vectors</span></label>
            <input type="checkbox" id="input-vectors" checked style="width:20px; height:20px;">
        </div>

        <div class="button-group">
            <button id="btn-toggle">Start</button>
            <button id="btn-reset">Reset Position</button>
        </div>
        
        <div class="force-legend">
            <span class="leg-w">&#8595; Weight (mg)</span>
            <span class="leg-n">&#8593; Normal (N)</span>
            <span class="leg-t">&#8592; Friction (T)</span>
        </div>
    </div>
</div>

<script>
class WheelPhysics {
    constructor() {
        this.g = 9.81;
        this.mass = 5; // kg
        this.radius = 1; // m (logical radius)
        this.I = 0.5 * this.mass * Math.pow(this.radius, 2); // Solid cylinder (1/2 mr^2)
        this.reset();
    }

    reset() {
        this.time = 0; // Timer (seconds)
        this.s = 0; // Displacement down the incline (m)
        this.v = 0; // Linear velocity (m/s)
        this.theta_rot = 0; // Wheel rotation (rad)
        this.omega = 0; // Angular velocity (rad/s)
        this.state = "Idle";
        this.actualFriction = 0;
        this.normalForce = 0;
    }

    update(dt, angleDeg, mu_s) {
        // Update timer
        this.time += dt;

        const theta = angleDeg * (Math.PI / 180);
        const W = this.mass * this.g;
        const Wx = W * Math.sin(theta);
        const Wy = W * Math.cos(theta);
        
        this.normalForce = Wy;
        const maxStaticFriction = mu_s * this.normalForce;
        const mu_k = mu_s * 0.8; // Kinetic friction is slightly less

        // Friction required for pure rolling: f = (I / (I + mr^2)) * Wx
        // For a solid cylinder this is (1/3) * Wx
        const requiredFriction = Wx / 3;

        let a, alpha;

        if (requiredFriction <= maxStaticFriction) {
            // Rolling without slipping
            this.state = "Rolling";
            this.actualFriction = requiredFriction;
            a = (Wx - this.actualFriction) / this.mass;
            alpha = a / this.radius;
        } else {
            // Slipping
            this.state = "Slipping!";
            this.actualFriction = mu_k * this.normalForce;
            a = (Wx - this.actualFriction) / this.mass;
            alpha = (this.actualFriction * this.radius) / this.I;
        }

        this.v += a * dt;
        this.omega += alpha * dt;
        this.s += this.v * dt;
        this.theta_rot += this.omega * dt;
    }
}

class SimEngine {
    constructor() {
        this.canvas = document.getElementById('simCanvas');
        this.ctx = this.canvas.getContext('2d');
        
        this.btnToggle = document.getElementById('btn-toggle');
        this.btnReset = document.getElementById('btn-reset');
        this.inputAngle = document.getElementById('input-angle');
        this.inputMu = document.getElementById('input-mu');
        this.inputVectors = document.getElementById('input-vectors');
        
        this.valAngle = document.getElementById('val-angle');
        this.valMu = document.getElementById('val-mu');

        this.physics = new WheelPhysics();
        this.isRunning = false;
        this.lastTime = 0;
        
        this.pxPerMeter = 50; // Visual scale
        this.visualRadius = this.physics.radius * this.pxPerMeter;

        this.bindEvents();
        this.draw();
    }

    bindEvents() {
        this.btnToggle.addEventListener('click', () => this.toggle());
        this.btnReset.addEventListener('click', () => this.reset());
        
        const updateUI = () => {
            this.valAngle.innerHTML = `${this.inputAngle.value}&deg;`;
            this.valMu.innerText = parseFloat(this.inputMu.value).toFixed(2);
            if (!this.isRunning) {
                // Update physics static values for the HUD
                this.physics.update(0, parseFloat(this.inputAngle.value), parseFloat(this.inputMu.value));
                this.draw();
            }
        };

        this.inputAngle.addEventListener('input', updateUI);
        this.inputMu.addEventListener('input', updateUI);
        this.inputVectors.addEventListener('change', () => this.draw());
        
        this.canvas.addEventListener('mousedown', (e) => { e.preventDefault(); this.toggle(); });
        this.canvas.addEventListener('touchstart', (e) => { e.preventDefault(); this.toggle(); }, {passive: false});
    }

    toggle() {
        this.isRunning = !this.isRunning;
        this.btnToggle.innerText = this.isRunning ? "Pause" : "Start";
        this.btnToggle.className = this.isRunning ? "running" : "";
        if (this.isRunning) {
            this.lastTime = performance.now();
            requestAnimationFrame((t) => this.loop(t));
        }
    }

    reset() {
        this.isRunning = false;
        this.btnToggle.innerText = "Start";
        this.btnToggle.className = "";
        this.physics.reset();
        this.physics.update(0, parseFloat(this.inputAngle.value), parseFloat(this.inputMu.value));
        this.draw();
    }

    loop(time) {
        if (!this.isRunning) return;
        let dt = (time - this.lastTime) / 1000;
        this.lastTime = time;
        if (dt > 0.1) dt = 0.1; // cap dt

        this.physics.update(dt, parseFloat(this.inputAngle.value), parseFloat(this.inputMu.value));
        
        // Reset if it rolls off screen
        if (this.physics.s * this.pxPerMeter > this.canvas.width * 1.5) {
            this.physics.reset();
        }

        this.draw();
        requestAnimationFrame((t) => this.loop(t));
    }

    drawArrow(fromX, fromY, toX, toY, color, width=3) {
        const headlen = 10;
        const angle = Math.atan2(toY - fromY, toX - fromX);
        const ctx = this.ctx;
        
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.strokeStyle = color;
        ctx.lineWidth = width;
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
        ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
        ctx.lineTo(toX, toY);
        ctx.fillStyle = color;
        ctx.fill();
    }

    draw() {
        const ctx = this.ctx;
        const w = this.canvas.width;
        const h = this.canvas.height;
        const angleRad = parseFloat(this.inputAngle.value) * (Math.PI / 180);

        ctx.clearRect(0, 0, w, h);

        // --- Large Centered Watermark ---
        ctx.save();
        ctx.translate(w / 2, h / 2);
        ctx.rotate(-Math.PI / 8); // Slight diagonal tilt
        ctx.fillStyle = 'rgba(0, 0, 0, 0.06)'; // Very transparent
        ctx.font = 'bold 70px -apple-system, BlinkMacSystemFont, sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('examinerprep.com', 0, 0);
        ctx.restore();
        // --------------------------------

        // Ground setup
        const startX = 50;
        const startY = 100;
        
        ctx.save();
        ctx.translate(startX, startY);
        ctx.rotate(angleRad);

        // Draw Incline
        ctx.beginPath();
        ctx.moveTo(-50, 0);
        ctx.lineTo(w * 1.5, 0);
        ctx.lineWidth = 4;
        ctx.strokeStyle = '#34495e';
        ctx.stroke();
        
        // Draw incline pattern
        for(let i=0; i<w*1.5; i+=20) {
            ctx.beginPath();
            ctx.moveTo(i, 0);
            ctx.lineTo(i-10, 10);
            ctx.strokeStyle = '#7f8c8d';
            ctx.lineWidth = 1;
            ctx.stroke();
        }

        // Wheel position (x along incline, y is fixed at -radius)
        const wheelX = this.physics.s * this.pxPerMeter;
        const wheelY = -this.visualRadius;

        ctx.save();
        ctx.translate(wheelX, wheelY);
        
        // Draw Wheel
        ctx.rotate(this.physics.theta_rot);
        ctx.beginPath();
        ctx.arc(0, 0, this.visualRadius, 0, Math.PI*2);
        ctx.fillStyle = '#ecf0f1';
        ctx.fill();
        ctx.lineWidth = 3;
        ctx.strokeStyle = '#2c3e50';
        ctx.stroke();

        // Spokes
        for(let i=0; i<4; i++) {
            ctx.rotate(Math.PI/2);
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.lineTo(this.visualRadius, 0);
            ctx.stroke();
        }
        ctx.beginPath();
        ctx.arc(0,0, 6, 0, Math.PI*2);
        ctx.fillStyle = '#e74c3c';
        ctx.fill();
        ctx.restore(); // Undo wheel rotation

        // Draw Vectors
        if (this.inputVectors.checked) {
            const forceScale = 2; // px per Newton

            // 1. Gravity (Always Straight Down visually, so we must un-rotate the context angle)
            const wX = 0;
            const wY = (this.physics.mass * this.physics.g) * forceScale;
            
            // To draw straight down while context is rotated by angleRad, we rotate the vector by -angleRad
            const gravRotX = wX * Math.cos(-angleRad) - wY * Math.sin(-angleRad);
            const gravRotY = wX * Math.sin(-angleRad) + wY * Math.cos(-angleRad);
            this.drawArrow(wheelX, wheelY, wheelX + gravRotX, wheelY + gravRotY, '#d35400', 3);

            // 2. Normal Force (Perpendicular to plane, from contact point)
            const nLen = this.physics.normalForce * forceScale;
            this.drawArrow(wheelX, 0, wheelX, -nLen, '#2980b9', 3);

            // 3. Friction (Parallel to plane, pointing UP incline, from contact point)
            if (this.physics.actualFriction > 0) {
                const fLen = this.physics.actualFriction * forceScale;
                this.drawArrow(wheelX, 0, wheelX - fLen, 0, '#c0392b', 4);
            }
        }
        ctx.restore(); // Undo incline rotation

        // HUD - Telemetry & Timer
        ctx.fillStyle = '#2c3e50';
        ctx.font = '16px monospace';
        ctx.textAlign = 'left';
        
        ctx.fillText(`Time (t)       : ${this.physics.time.toFixed(2)} s`, 20, 30);
        ctx.fillText(`Linear Vel (v) : ${this.physics.v.toFixed(2)} m/s`, 20, 50);
        ctx.fillText(`Angular Vel (ω): ${this.physics.omega.toFixed(2)} rad/s`, 20, 70);
        
        ctx.font = 'bold 18px sans-serif';
        if (this.physics.state === "Rolling") {
            ctx.fillStyle = '#27ae60'; // Green
        } else if (this.physics.state === "Slipping!") {
            ctx.fillStyle = '#c0392b'; // Red
        } else {
            ctx.fillStyle = '#7f8c8d'; // Grey
        }
        ctx.fillText(`Status: ${this.physics.state}`, 20, 100);
    }
}

window.onload = () => { new SimEngine(); };
</script>
</body>
</html>

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.