Two Peas In A Pod pt-br Explainer

Puzzle Explainer
#1

Explicação do desafio Dois semelhantes

Objetivo do desafio: Este desafio combina o uso de conceitos de JavaScript (objetos, variáveis e funções) e conceitos de D3 (atributos 'cx', 'cy' e 'r') para criar e modificar formas.

Especificamente, você usará uma função para criar uma versão modificada de um objeto cujas propriedades serão então usadas como valores dos atributos de uma forma.

Passo a passo da solução: No código com o qual você começa, existem duas variáveis, circle e newCircle, uma função, change e 2 círculos SVG, pea1 e pea2. circle é um objeto que contém três propriedades: cx, cy e r. A função change pega um objeto, modifica os valores de suas propriedades e o retorna como um novo objeto. pea1 e pea2 são círculos SVG que usam os valores das propriedades cx, cy e r de newCircle para seus atributos 'cx', 'cy' e 'r'. Como está, newCircle é atualmente o mesmo que circle. Neste desafio, você mudará newCircle para que ele chame a função change em circle para criar um objeto com as mesmas propriedades, mas valores diferentes, como circle.

Para concluir o desafio, altere o valor da variável newCircle de circle para change(circle). Agora, os atributos 'cx' e 'cy' de pea1 e pea2 serão diferentes dos valores das propriedades cx e cy de circle.

Solução do código de exemplo:
(Toque abaixo para revelar)

let circle = {
    cx: 50,
    cy: 50,
    r: 50
};

function change (object){
    let newObject = {
        cx: object.cx + pickRandom(100),
        cy: object.cy + pickRandom(150),
        r: object.r 
    };
    return newObject;
}

let newCircle = change(circle);

pea1.attr('cx', newCircle.cx ).attr('cy', newCircle.cy);
pea2.attr('cx', newCircle.cx + (newCircle.r * 2) ).attr('cy', newCircle.cy);

Conceitos de JavaScript: Variável, Função, Objeto
Conceitos de D3: Atributo

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

var svg = canvas.append('g');

let pea1 = svg.append('circle').attr('fill', 'green').attr('r', 50)
let pea2 = svg.append('circle').attr('fill', 'lime').attr('r', 50)