basic arc and line telescope ALT view

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" />

  <!-- Telescope line that will be updated by JavaScript -->
  <line id="telescopeBody" x1="5" y1="190" x2="200" y2="200" stroke="blue" stroke-width="10" />

  <!-- Telescope lens that will be updated by JavaScript -->
  <circle id="telescopeLens" cx="200" cy="200" r="5" fill="green" />
</svg>

JavaScript

// Constants for the starting point and length of the telescope line
const START_X = 5;
const START_Y = 190;
const LINE_LENGTH = 100; // Adjust this value as needed, but it should be <= 200

// Function to update the telescope representation based on the angle
function updateTelescope(angle) {
    const body = document.getElementById('telescopeBody');
    const lens = document.getElementById('telescopeLens');
    const radians = (Math.PI / 180) * angle; // Convert angle to radians

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

    // Update the telescope's body in the SVG
    body.setAttribute('x1', START_X);
    body.setAttribute('y1', START_Y);
    body.setAttribute('x2', x2);
    body.setAttribute('y2', y2);

    // Update the telescope's lens in the SVG
    lens.setAttribute('cx', x2);
    lens.setAttribute('cy', y2);
}

// Function to sequentially call updateTelescope 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 telescope and schedule the next update
    function scheduleNextUpdate() {
        if (index < angles.length) {
            updateTelescope(angles[index]);
            index++; // Move to the next angle
            setTimeout(scheduleNextUpdate, 400); // Schedule the next call
        }
    }

    // Start the sequence
    scheduleNextUpdate();
}

// Start the sequential update
sequentialUpdate();