Adam Byrne

const canvas = document.getElementById('lorentzCanvas');
const ctx = canvas.getContext('2d');
const slider = document.getElementById('velocitySlider');

// Constants
const originX = canvas.width / 2;
const originY = canvas.height / 2;
const scaleFactor = 100; // Adjust as needed to scale diagram

// Draw the initial diagram
drawLorentzTransformation(0);

// Listen for slider input
slider.addEventListener('input', (event) => {
    const velocity = event.target.value;
    drawLorentzTransformation(velocity);
});

function drawLorentzTransformation(velocity) {
    // Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Calculate gamma
    const v = parseFloat(velocity);
    const gamma = 1 / Math.sqrt(1 - v * v);

    // Draw light cones
    ctx.beginPath();
    ctx.moveTo(originX, originY);
    ctx.lineTo(originX - scaleFactor, originY - scaleFactor);
    ctx.lineTo(originX + scaleFactor, originY - scaleFactor);
    ctx.closePath();
    ctx.strokeStyle = 'red';
    ctx.stroke();

    // Draw transformed axes
    ctx.beginPath();
    ctx.moveTo(originX, originY);
    ctx.lineTo(originX + gamma * scaleFactor, originY - v * gamma * scaleFactor);
    ctx.moveTo(originX, originY);
    ctx.lineTo(originX + v * gamma * scaleFactor, originY - gamma * scaleFactor);
    ctx.strokeStyle = 'blue';
    ctx.stroke();

    // Draw original axes
    ctx.beginPath();
    ctx.moveTo(originX, originY);
    ctx.lineTo(originX, originY - scaleFactor);
    ctx.moveTo(originX, originY);
    ctx.lineTo(originX + scaleFactor, originY);
    ctx.strokeStyle = 'black';
    ctx.stroke();
}