basic arc and line

simulating ALT of a telescope

by Andy Bulka

HTML

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <!-- Draw an arc from (0,0) to (200,200) -->
  <path d="M 0 0 A 200 200 0 0 1 200 200" fill="none" stroke="black" />

  <!-- Line that will be updated by JavaScript -->
  <line id="dynamicLine" x1="0" y1="200" x2="200" y2="200" stroke="red" />
</svg>

JavaScript

// Function to update the line based on the angle
function updateLine(angle) {
    const svg = document.getElementById('dynamicLine');
    const length = 200 + 10; // Radius + 10 pixels to cross the arc
    const radians = (Math.PI / 180) * angle; // Convert angle to radians

    // Calculate the end point
    let x2 = length * Math.cos(radians);
    let y2 = 200 - length * Math.sin(radians); // SVG's y-axis is flipped

    // Update the line's end point in the SVG
    svg.setAttribute('x2', x2);
    svg.setAttribute('y2', y2);
}

// Test the function with different angles
updateLine(45); // Update this value to test different angles

// Function to sequentially call updateLine with different angles
function sequentialUpdate() {
    const angles = [45, 0, 90, 5, 25, 75];
    let index = 0; // To keep track of the current angle

    // Function to update the line and schedule the next update
    function scheduleNextUpdate() {
        if (index < angles.length) {
            updateLine(angles[index]);
            index++; // Move to the next angle
            setTimeout(scheduleNextUpdate, 600); // Schedule the next call
        }
    }

    // Start the sequence
    scheduleNextUpdate();
}

// Start the sequential update
sequentialUpdate();