Complete The Picture es-419 Explainer

Puzzle Explainer
#1

Explicador de Completa el cuadro

Objetivo de este acertijo: Cambiar cómo se ve el cielo según la hora del día.
Tutorial de la solución: La función llamada changePicture tiene tres if statements en su interior que verifican la hora del día: mañana, mediodía o noche. Comencemos con lo que debe suceder en la mañana. Debes cambiar el color de sky a steelblue. Eso significa que dentro de las llaves para la if statement que verifica si time === 'morning', debes poner: sky.attr('fill', 'steelblue); Ahora, cuando timeOfDay es 'morning' tu cuadro se verá bien. Para la noche, es necesario cambiar tres cosas: el cielo, la luna y el césped. El color de relleno desky debe ser navy. Para convertir el sol en luna, debes cambiar el color de relleno de skyLight a 'white'. Por último, el color del césped se debe oscurecer a darkgreen.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)

function changePicture(time) {
  if (time === 'morning') {
    sky.attr('fill', 'steelblue');
  }
  if (time === 'noon') {
    sky.attr('fill', 'deepskyblue');
    skyLight.attr('cx', 150);
  }
  if (time === 'night') {
    sky.attr('fill', 'navy');
    skyLight.attr('fill', 'white');
    ground.attr('fill', 'darkgreen');
  }
}

var timeOfDay = pickRandom([
  'morning',
  'noon',
  'night'
]);
changePicture(timeOfDay);
print(timeOfDay);

Conceptos de JavaScript: bloque de código (función), funciones de llamada, condicionales, estructuras de datos, identificadores
Conceptos de Grasshopper: pickRandom(), print()
Conceptos de D3: .attr(‘fill’,), .attr(‘cx’,)
Código adicional (código oculto que se ejecuta antes del código del acertijo):

var sky = svg.append('rect').attr('width', 500).attr('height', 150);
var skyLight = svg.append('circle').attr('r', 30).attr('fill', 'yellow').attr('cx', 10).attr('cy', 10);

let cloud = 'M441.953,142.352c-4.447-68.872-61.709-123.36-131.705-123.36c-59.481,0-109.766,39.346-126.264,93.429  c-9.244-3.5-19.259-5.431-29.729-5.431c-42.84,0-78.164,32.08-83.322,73.523c-0.309-0.004-0.614-0.023-0.924-0.023  c-36.863,0-66.747,29.883-66.747,66.747s29.883,66.746,66.747,66.746c4.386,0,8.669-0.436,12.819-1.243  c20.151,27.069,52.394,44.604,88.734,44.604c31.229,0,59.429-12.952,79.533-33.772c15.071,15.091,35.901,24.428,58.913,24.428  c31.43,0,58.783-17.42,72.955-43.127c11.676,5.824,24.844,9.106,38.777,9.106c48.047,0,86.998-38.949,86.998-86.996  C508.738,185.895,480.252,151.465,441.953,142.352z';

var cloud1 = svg.append('path').attr('d', cloud);
cloud1.attr('fill', 'lightgrey').attr('transform','scale(0.2) translate(200 80)');

var cloud2 = svg.append('path').attr('d', cloud);
cloud2.attr('fill', 'lightgrey').attr('transform','scale(0.1) translate(120 80)');

var cloud3 = svg.append('path').attr('d', cloud);
cloud3.attr('fill', 'lightgrey').attr('transform','scale(0.15) translate(1000 80)');

var cloud4 = svg.append('path').attr('d', cloud);
cloud4.attr('fill', 'lightgrey').attr('transform','scale(0.1) translate(2300 420)');

var ground = svg.append('rect').attr('width', 500).attr('height', 150).attr('y', 150).attr('fill', 'green');
1 Like
#2
#3