Big Brown Bear pt-br Explainer

Explicação do desafio Grande urso marrom

Objetivo do desafio: Este desafio combina o uso de conceitos de JavaScript (laço for…of, arrays e objetos) e conceitos de D3 (atributos 'cx', 'cy', 'r' e 'fill') para modificar formas.
Especificamente, você usará um laço for…of e dados armazenados em uma array de objetos para definir os atributos de múltiplas formas.

Passo a passo da solução: Este desafio importa dotList de um código adicional. dotList é uma array de 23 objetos. Cada objeto tem 4 propriedades: x, y, size e color. No código com o qual você começa, o laço for…of faz a iteração pela dotList e usa as propriedades de cada objeto para definir os atributos 'cx'e 'fill' de um círculo. Também define os atributos 'cy' e 'r', mas não usa dados de dotList e, em vez disso, usa um número. Neste desafio, você mudará os valores dos atributos 'r' e 'cy' para transformar os círculos em um urso.

Para concluir o desafio, defina o atributo 'cy' para dot.y e o atributo 'r' para dot.size. Agora, cada círculo terá a posição e o tamanho corretos.

Solução do código de exemplo:

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);
}

Conceitos de JavaScript: Laço for…of, Variável, Importação

Conceitos de D3: Atributo, .append()

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

let dotList = [
    {x:155, y:235, size:100, color:'saddlebrown'}, // corpo
    {x:155, y:235, size:85, color:'sienna'}, 
    
    {x:105, y:40, size:30, color:'saddlebrown'}, // orelha esquerda
    {x:105, y:40, size:20, color:'sandybrown'},
    
    {x:205, y:40, size:30, color:'saddlebrown'}, // orelha direita
    {x:205, y:40, size:20, color:'sandybrown'},
    
    {x:155, y:100, size:70, color:'saddlebrown'}, // cabeca
    
    {x:155, y:130, size:30, color:'sandybrown'}, // focinho
    
    {x:146, y:146, size:10, color:'black'}, // sorriso
    {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'}, // nariz
    
    {x:125, y:80, size:9, color:'black'}, // olho esquerdo
    {x:125, y:84, size:9, color:'saddlebrown'}, // pálpebra esquerda
    
    {x:185, y:80, size:9, color:'black'}, // olho direito
    {x:185, y:84, size:9, color:'saddlebrown'}, // palpebra direito
    
    
    {x:55, y:190, size:30, color:'saddlebrown'}, // pata esquerda
    {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'}, // pata direita 
    {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'},
];