The shape of the moon limb/crescent (terminator line)

Question

Given that that n% of the moon is illuminated. I want to (approximately, but more or less correctly) draw the the terminator line on the circle (that represents the moon). Orientation is not the case here, just the crescent shape.

What is the best/correct way to determine/calculate/approximate the shape of the terminator line? Is this line actually a chord of a circle, or it is something different?

Answer 1

The line is a semi-ellipse. It is formed by projecting the great circle on the moon formed by the terminator to the plane perpendicular to a line going from the observer to the moon. Projecting a circle to a plane results in an ellipse.

These pictures show simulations of a "thin crescent" or "nearly full gibbous" and "near half moon" (depending on which part you consider to be lit).

Answer 2

Edit: created a new Codepen that shows the terminator as a gradient, which eliminates the hard line.

Rigorous:

For those not wanting to settle for an approximation, rendering a photorealistic, properly shaded (with mountains and craters having shadows) image is pretty easy with existing tools like Blender, and NASA's CGI Moon Kit. Since that's a solved problem, and this question is specifically looking for an approximation, I'll focus on that. But an example using ThreeJS is here, and a tutorial using Blender is here.

Approximate:

An approximate method is to imagine a plane intersecting the center of the Moon, perpendicular to the direction of the Sun. As the phase changes, the plane is rotated about the Y axis. To keep things simple, we can ignore any perspective distortion (e.g. ignore the Z coordinate), the Y coordinate won't change, leaving only the X coordinate to be computed, and the rotation matrix simplifies to:

$$ x= radius * \cos(phase) $$

Where $phase$ is the phase from 0° (new moon) to 360°, and $radius$ is the radius of the full sphere.

The JavaScript code below expects HTML with a canvas with an ID of "canvas", and a moon image with ID of "moon". Here is a demo in CodePen. It generates the polygon necessary to fill in the dark side of a full moon image, and renders the moon as it would be seen from the Northern hemisphere.

This generates a pretty harsh edge. Since the Sun has an apparent size of about 0.5°, it will produce a gradient of that angular size on the Moon. So it would produce a better result to compute two arcs, one +0.25° of the current phase, and one -0.25° and fill a linear gradient in between.

Here is an example produced by the code below:

const rad=Math.PI/180;

const canvas = document.getElementById("canvas");
const w=canvas.width;
const h=canvas.height;
const ctx = canvas.getContext("2d");
const r=w/2*.91;

function drawPhase(phase){
    //A rotation matrix, ignoring the Z result, and with Z=0 initially simplifies to cos(phase*360)
    const f=Math.cos(phase*rad);

    ctx.lineWidth=1;
    ctx.beginPath();
    let x=f*r*Math.cos(0)+w/2;
    let y=r*Math.sin(0)+h/2;
    ctx.moveTo(x,y);

    if(phase<=180){
        for(let i=0;i<=360;i++){
            const cosi=Math.cos(i*rad);
            if(cosi>0){
                x=f*r*Math.cos(i*rad)+w/2;
            } else {
                x=r*Math.cos(i*rad)+w/2;
            }
            y=r*Math.sin(i*rad)+h/2;

            ctx.lineTo(x,y+1);
        }
    } else {
        for(let i=0;i<=360;i++){
            const cosi=Math.cos(i*rad);
            if(cosi<0){
                x=f*r*Math.cos(i*rad)+w/2;
            } else {
                x=r*Math.cos(i*rad)+w/2;
            }
            y=r*Math.sin(i*rad)+h/2;

            ctx.lineTo(x,y+1);
        }
    }

    ctx.closePath();
    ctx.fill();
}

function display(){
    ctx.fillStyle="#000000cc";
    ctx.drawImage(document.getElementById("moon"), 0, 0);
    
    phase=(phase+1)%360;

    drawPhase(phase);
    window.setTimeout(()=>{
        display();
    },10);
}

let phase=0;
display();

Answer 3

You must draw a semicircle of radius R and a semi-ellipse of semi-major axis "R" and semi-minor axis "b". To calculate "b" knowing the illuminated ratio "n":

$$n=\dfrac{\dfrac{\pi R^2}2+\dfrac{\pi R b}2}{\pi R^2}$$

Simplifying:

$$\boxed{b=(2 n - 1) \ R}$$

If "$n_{pc}$" is expressed in %

$$b=(2 n_{pc} - 100) R$$

With the values of "R" and "b" it is easy to draw the semi-ellipse of the terminator using, for example, rectangular coordinates:

$$\boxed{y=\dfrac b R \sqrt{R^2-x^2}}$$