Explicação de Velho oeste
Objetivo deste desafio: Fazer o circle ir para a esquerda se a direction for 'W' (oeste).
Passo a passo da solução: O código começa com 3 If Statements, para quando a direction for 'N', 'E' ou 'S'. Precisa de mais 1 para quando direction === 'W'.
Comece adicionando uma If Statement no final do código que verifica direction === 'W'. Dentro do bloco {}, ele precisa fazer o circle se mover para a esquerda. A posição esquerda para a direita de um círculo é controlada pelo valor 'cx', e mede a distância a partir do lado esquerdo da tela. Se quisermos mover o círculo para o lado esquerdo, a sua distância deve ser 0. Adicione circle.attr('cx',0) dentro das chaves {}.
Agora, se a direction for 'W', o circle está do lado esquerdo, mas só aparece lá. Para animar a mudança a partir do centro, uma .transition() precisa ser adicionada antes do .attr('cx',0). Deve ir na mesma linha, logo entre circle e .attr().
Solução do código de exemplo:
(Toque abaixo para revelar)
let direction = pickRandom([
'N',
'E',
'S',
'W'
]);
console.log(direction);
if (direction === 'N') {
circle.transition().attr('cy', 0);
}
if (direction === 'E') {
circle.transition().attr('cx', right);
}
if (direction === 'S') {
circle.transition().attr('cy', bottom);
}
if (direction === 'W') {
circle.transition().attr('cx', 0);
}
Conceitos de JavaScript: Bloco de código (if statement), Funções de chamada, Condicionais (if statement), console.log(), Estruturas de dados (array), Identificadores
Conceitos do Grasshopper: pickRandom()
Conceitos de D3: .attr('cx',), .attr('cy',), .transition()
Código Adicional (código oculto executado antes do código do desafio):
let _pickRandom = pickRandom;
pickRandom = i => _pickRandom(['W',_pickRandom(i),_pickRandom(i)]); //P(W)=0.5
let color = [...Array(36)].map((_,i)=>`hsl(${10*i},100%,50%)`);
let circle = svg.append('circle').attr('r',window.innerHeight/4).attr('fill',_pickRandom(color)).attr('cx',window.innerWidth/2).attr('cy',window.innerHeight/2);
let right = window.innerWidth;
let bottom = window.innerHeight;