Explicação de Fases da lua
Objetivo do desafio: Criar uma animação que muda de acordo com o valor de uma variável.
Passo a passo da solução:A variável phase usa pickRandom() para escolher um valor. Uma série de if statements verificará o valor de phase e criar uma animação correspondente para mostrar a fase da lua.
Para concluir o desafio, adicione uma 4ª if statement para testar se phase === 'waning'. Dentro do bloco de código {}, defina shadow para fazer uma transição em 1000 milissegundos para um 'cx' de 240.
Solução do código de exemplo:
(Toque abaixo para revelar)
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);
Conceitos de JavaScript: If Statements, Testes, Console
Conceitos de D3: .transition(), .attr(), .duration()
Conceitos do Grasshopper: pickRandom()
Código Adicional (código oculto executado antes do código do desafio):
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;