Moon Phases explainer

Aim of the puzzle: Create an animation that changes depending on the value of a variable.
Walk through of solution:
The phase variable uses pickRandom() to choose a value. A series of if statements will check the value of phase, and create a corresponding animation to show the phase of the moon.

To complete the puzzle, add a 4th if statement to test if phase === 'waning'. Inside the code block {}, set shadow to transition over a duration of 1000 milliseconds to a 'cx' of 240.
Sample code solution:

let phase = pickRandom(['full','waxing','new','waning']);

if (phase === 'full') {
    shadow.transition().duration(1000).attr('cx',0);
}
if (phase === 'waxing') {
    shadow.transition().duration(1000).attr('cx',80);
}
if (phase === 'new'){
    shadow.transition().duration(1000).attr('cx',160);
}
if (phase === 'waning'){
    shadow.transition().duration(1000).attr('cx',240);
}

console.log(phase);

Javascript Concepts: If Statements, Tests, Console
D3 Concepts: .transition(), .attr(), .duration()
Grasshopper Concepts: pickRandom()
Additional Code (hidden code that runs before the puzzle’s code):

let r = 80;
let space = svg.append('rect').attr('width',window.innerWidth).attr('height',window.innerHeight).attr('fill','black');
let moon = svg.append('circle').attr('r',r).attr('fill','blanchedalmond').attr('cx',160).attr('cy',r);
let shadow = svg.append('circle').attr('r',r).attr('fill','black').attr('cx',0).attr('cy',r);
let right = window.innerWidth;
let bottom = window.innerHeight;
1 Like

What’s the “right” and “bottom” variables for?