Off To The Races es-419 Explainer

Explicador de A las carreras

Objetivo de este acertijo: Usar los objects racer delist para definir el color y el tiempo de carrera para cada círculo.

Tutorial de la solución: La primera sección del código crea un arreglo list vacío. Luego agrega 10 objects a list. Cada object tiene 3 propiedades: lane, color y time.

  • lane para cada caballo de carrera se usará para su valor 'cy'. Va de 10, 30, 50, …, 190.
  • color se elige al azar y se usará para 'fill'.
  • time es un número aleatorio entre 1001 y 6000, que se usará como el número de milisegundos correspondiente a la .duration() de la animación.

finishLine es simplemente un rectángulo rojo alto y delgado.

El for loop tomará cada object en list y lo almacenará en racer. Luego, el object racer se usa para crear un círculo para cada object. El atributo 'cy' ya usa racer.lane.

En lugar de 'teal', attr('fill',) debe usar la propiedad color de racer. Cambia .attr('fill','teal') a .attr('fill',racer.color).

En lugar de .duration(1000), la duración de la animación debe ser racer.time. Cambia 1000 a racer.time.

Solución del código de ejemplo:
(Pulsa a continuación 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);
}

Conceptos de JavaScript: bloque de código (for loop), encadenamiento

Conceptos de Grasshopper: pickRandom()

Conceptos 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 que se ejecuta antes del código del acertijo):

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