30:T4e4,md` Simulating the phases of the moon boils down to some smart interplay between forground and background colors, revealed or hidden by ellipses of the right color. Starting at the ${moony(0)}, the *${moonPhaseName(.5)}* starts to reveal itself. During ${moony(.15)} on the northern hemisphere, an ellipse gently retracts itself into oblivion to reveal and complete the ${moony(.25)}, both clipped to show only their right side, leaving a *half moon*. During ${moony(.35)}, the ${moony(.5)} reveals itself completely by growing an ellipse from zero to a full circle. Because this ellipse has the same color as the right half—hence is ‘invisble’ on that part—it can simply be painted over everything else. During the *waning* or second half of the moon’s cycle—${moony(.6)} → ${moony(.75)} → ${moony(.85)} → ${moony(1)}—the colors are simply swapped; the interplay of ellipses are identical to the *waxing* cycle. You can even use ƒ \`\`moon()\`\` inline: ${moonshine(moonFraction)}. ### Play around with colors… ${moon(universe(scale, "midnightblue"), moonFraction, "white", "black")} ${moon(universe(scale, "dodgerblue"), moonFraction, "magenta", "lime")} ${moon(universe(scale, "white"), moonFraction, "red", "black")} `31:T709,function moon(canvas, fraction, colorOfTheSun, colorOfTheDarkness) { const moonPhase = Math.trunc(fraction * 4) % 4; // %4 so fraction == 1 results in phase == 0 const waxing = moonPhase < 2; // implies waning = !waxing const crescent = moonPhase % 2 == 0; const gibbous = !crescent; const backgroundColor = waxing ? colorOfTheDarkness : colorOfTheSun; const coverColor = (moonPhase == 0 || moonPhase == 3) ? colorOfTheDarkness : colorOfTheSun; const revealColor = waxing ? colorOfTheSun : colorOfTheDarkness; const quarterFraction = 4 * (fraction % .25); const snakeEyeClosing = gibbous ? 0 : 1 - quarterFraction; const snakeEyeOpening = crescent ? 0 : quarterFraction; // set up clipping rectangle for the crescent (right) half const defs = canvas.appendChild(DOM.element("svg:defs")); const showRightHalf = DOM.uid("showRightHalf"); // to ensure uid is unique across all cells and notebooks const clipper = defs.appendChild(DOM.element("svg:clipPath", {id: showRightHalf.id})); clipper.appendChild(DOM.element("svg:rect", { y: -1, width: "50%", height: "100%"})); // bottom layer; shows when nothing is painted on top canvas.appendChild(DOM.element("svg:circle", { fill: backgroundColor, r: 1})); // paint the next layer: the waxing crescent and waning gibbous const group = canvas.appendChild(DOM.element("svg:g", { 'clip-path': showRightHalf })); group.appendChild(DOM.element("svg:circle", { fill: revealColor, r: 1 })); group.appendChild(DOM.element("svg:ellipse", { fill: coverColor, ry: 1, rx: snakeEyeClosing })); // finally, top it off with the gibbous half canvas.appendChild(DOM.element("svg:ellipse", { fill: revealColor, ry: 1, rx: snakeEyeOpening })); return canvas; }32:T579,function moonSvgLiteral(fraction, colorOfTheUniverse, colorOfTheSun, colorOfTheDarkness, r) { const moonPhase = Math.trunc(fraction * 4) % 4; // %4 so fraction == 1 results in phase == 0 const backgroundColor = moonPhase < 2 ? colorOfTheDarkness : colorOfTheSun; const coverColor = (moonPhase == 0 || moonPhase == 3) ? colorOfTheDarkness : colorOfTheSun; const revealColor = moonPhase < 2 ? colorOfTheSun : colorOfTheDarkness; const quarterFraction = +parseFloat(moonFraction%.25).toFixed(2); const snakeEyeClosing = r * 4 * ((moonPhase % 2 == 1) ? 0 : 1 / 4 - quarterFraction); const snakeEyeOpening = r * 4 * ((moonPhase % 2 == 0) ? 0 : quarterFraction); const showRightHalf = DOM.uid("showRightHalf"); // to ensure uid is unique across all cells and notebooks const d = 2 * r; return svg``; }33:[] 2e:{"title":"Moon Phases","cells":[{"id":0,"value":"md`# Moon Phases`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1319,"value":"viewof moonFraction = slider({min: 0.0, max: 1, value: .11, title: 'moon fraction'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":869,"value":"viewof scale = slider({min: 0.0, max: 1.0, value: 0.1, title: 'scale'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"moon(universe(scale, \"black\"), moonFraction, \"white\", \"black\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"md`## ${moonPhaseName(moonFraction)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1142,"value":"md`ƒ moon() draws the proper fraction of the moon against the backdrop of the canvas.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1140,"value":"md` ƒ universe() returns a canvas with its size a fraction of its container and a solid color.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1109,"value":"function universe(w, colorOfTheUniverse) {\n return DOM.element(\"svg:svg\", {\n viewBox: \"-1 -1 2 2\", \n width: 100 * w + \"%\", \n style: \"background-color: \" + colorOfTheUniverse + \";\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1144,"value":"md`ƒ moonPhaseName() returns a string containing the moon fraction’s phase name and apparent shape.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"function moonPhaseName (f) {\n const principalMoonPhaseName = [ \"new moon\", \"first quarter\", \"full moon\", \"third quarter\" ];\n const intermediateMoonPhaseName = [\"waxing\", \"waning\"];\n const apparentMoonShape = [\"crescent\", \"gibbous\"];\n const phase = Math.trunc(f/.25) % 4;\n return (f % .25 == 0)\n ? principalMoonPhaseName[f * 4 % 4]\n : intermediateMoonPhaseName[Math.trunc(phase / 2)] + \" \" + apparentMoonShape[(phase == 0 || phase == 3) ? 0 : 1]\n ;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1218,"value":"md`ƒ moonshine() is handy for inline use.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1191,"value":"function moonshine(f) {\n return moon(universe(.02, \"none\"), f, \"LemonChiffon\", \"black\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1308,"value":"function moony(f) {\n return html`${moonPhaseName(f)} (${moonshine(f)})`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"md`## Someday\nSomeday this can be used to:\n* generate a moon calender for a given year, using snippets of [Lunar Visibility](https://beta.observablehq.com/@mbostock/lunar-visibility).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1069,"value":"md`## Kudos\n* [Mike Bostock](https://beta.observablehq.com/@mbostock) for Observable and d3.\n* For helping me out fixing the clip path:\n * [mootari](https://talk.observablehq.com/u/mootari) pointed me at the errors and his error analysis workflow;\n * [jrus](https://talk.observablehq.com/u/jrus) for creating a working version of this notebook.\n * [MedeaMelana](https://github.com/MedeaMelana) for coming up with the code for moony().\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md `\n## See\n* [Observable » SVG Clipping Test](https://beta.observablehq.com/@mbostock/svg-clipping-test)\n* [Observable » Standard Library](https://beta.observablehq.com/@mbostock/standard-library)\n* [Observable » Talk » Url() references within SVGs](https://talk.observablehq.com/t/url-references-within-svgs/666/3)\n* [Wikipedia » Lunar Phase](https://en.wikipedia.org/wiki/Lunar_phase)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1085,"value":"md`\n## Using SVG tagged template literal instead\nYou can achieve the same result using SVG literal. I’d say that it is somewhat more clean and legible, hence more evolvable.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1087,"value":"moonSvgLiteral(moonFraction, \"midnightblue\", \"white\", \"black\", scale * 360)","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1321,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1323,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}