Moon Phases pt-br Explainer

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;