Big Brown Bear es-419 Explainer

Explicador de Gran oso pardo

Objetivo de este acertijo:
Este acertijo combina el uso de conceptos de JavaScript (for…of loops, arreglos y objects) y conceptos de D3 (atributos 'cx' , 'cy' , 'r' y 'fill') para modificar formas.

Específicamente, usarás un for…of loop y datos almacenados en un arreglo de objects para definir los atributos de múltiples formas.

Tutorial de la solución:
Este acertijo importa dotList de código adicional. dotList es un arreglo de 23 objects. Cada object tiene 4 propiedades: x, y, size y color. En el código con el que comienzas, el for…of loop itera por dotList y usa las propiedades de cada object para definir los atributos 'cx'y 'fill' de un círculo. También define los atributos 'cy' y 'r', pero no usa datos de dotList; en cambio, usa un número. En este acertijo, cambiarás los valores de los atributos 'r' y 'cy' para convertir los círculos en un oso.

Para completar el acertijo, define el atributo 'cy' en dot.y y el atributo 'r' en dot.size. Ahora, cada círculo tendrá el tamaño y la posición correctos.

Solución del código de ejemplo:

import { dotList } from 'grasshopper.animations';

for (let dot of dotList) {
    svg.append('circle').attr('fill',dot.color).attr('cx',dot.x).attr('cy',dot.y).attr('r',dot.size);
}

Conceptos de JavaScript: for…of loop, variable, importación
Conceptos de D3: atributo, .append()
Código adicional (código oculto que se ejecuta antes del código del acertijo):

let dotList = [
    {x:155, y:235, size:100, color:'saddlebrown'}, // body
    {x:155, y:235, size:85, color:'sienna'}, 
    
    {x:105, y:40, size:30, color:'saddlebrown'}, // left ear
    {x:105, y:40, size:20, color:'sandybrown'},
    
    {x:205, y:40, size:30, color:'saddlebrown'}, // right ear
    {x:205, y:40, size:20, color:'sandybrown'},
    
    {x:155, y:100, size:70, color:'saddlebrown'}, // head
    
    {x:155, y:130, size:30, color:'sandybrown'}, // snout
    
    {x:146, y:146, size:10, color:'black'}, // smile
    {x:164, y:146, size:10, color:'black'},
    {x:145, y:142, size:10, color:'sandybrown'},
    {x:165, y:142, size:10, color:'sandybrown'},
    
    {x:155, y:124, size:20, color:'black'}, // nose
    
    {x:125, y:80, size:9, color:'black'}, // left eye
    {x:125, y:84, size:9, color:'saddlebrown'}, // left eyelid
    
    {x:185, y:80, size:9, color:'black'}, // right eye
    {x:185, y:84, size:9, color:'saddlebrown'}, // right eye
    
    
    {x:55, y:190, size:30, color:'saddlebrown'}, // left paw
    {x:55, y:190, size:20, color:'sandybrown'},
    {x:10,  y:170, size:10, color:'saddlebrown'},
    {x:27, y:148, size:10, color:'saddlebrown'},
    {x:55, y:140, size:10, color:'saddlebrown'},
    {x:82, y:150, size:10, color:'saddlebrown'},
    
    {x:255, y:190, size:30, color:'saddlebrown'}, // right paw
    {x:255, y:190, size:20, color:'sandybrown'},
    {x:228, y:150, size:10, color:'saddlebrown'},
    {x:255, y:140, size:10, color:'saddlebrown'},
    {x:283, y:148, size:10, color:'saddlebrown'},
    {x:300, y:170, size:10, color:'saddlebrown'},
];
1 Like