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'},
];