Wild West pt-br Explainer

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;