Off To The Races pt-br Explainer

Explicação de Vamos à corrida

Objetivo deste desafio: Usar os objetos racer da list para definir a cor e o tempo de corrida para cada círculo.

Passo a passo da solução: A 1ª seção do código cria uma array list vazia. Em seguida, acrescenta 10 objetos à list. Cada objeto tem 3 propriedades: lane, color e time.

  • A lane de cada corredor será usada por seu valor 'cy'. Vai de 10, 30, 50, …, 190.

  • A color é escolhida aleatoriamente e será usada para o 'fill'.

  • O time é um número aleatório entre 1001 e 6000 que será usado como o número de milissegundos para a .duration() da animação

O finishLine é apenas um retângulo vermelho alto e fino.

O Laço for levará cada objeto da list e o armazenará em racer. Depois, o objeto racer é usado para criar um círculo para cada objeto. O atributo 'cy' já usa racer.lane.

Em vez de 'teal', o attr('fill',) deve usar a propriedade color do racer. Mude .attr('fill','teal') para .attr('fill',racer.color).

Em vez de .duration(1000), a duração da animação deveria ser o racer.time. Mude 1000 para racer.time.

Solução do código de exemplo:
(Toque abaixo para revelar)

let list = [];

for (let entry = 0; entry < 10; entry++) {
  list.push({
    lane: 10 + entry*20,
    color: pickRandom(color),
    time: 1000 + pickRandom(5000)
  });
}

let finishLine = svg.append('rect')
                      .attr('width', 5)
                      .attr('height', 200)
                      .attr('fill', 'red')
                      .attr('x', 185);

for (let racer of list) {
  svg.append('circle')
       .attr('cx',0)
       .attr('cy',racer.lane)
       .attr('r',10)
       .attr('fill',racer.color)
      .transition()
       .duration(racer.time)
       .attr('cx',200);
}

Conceitos de JavaScript: Bloco de código (laço for), Encadeamento

Conceitos do Grasshopper: pickRandom()

Conceitos de D3: .append(), .attr('height',), .attr(‘r’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘fill’,), .attr('width',), .attr('x',), .duration(), .transition()

Código Adicional (código oculto executado antes do código do desafio):

let color = [...Array(36)].map((_,i)=>`hsl(${10*i},100%,50%)`);