Two Peas In A Pod es-419 Explainer

Puzzle Explainer
#1

Explicador de Dos gotas de agua

Objetivo de este acertijo:
Este acertijo combina el uso de conceptos de JavaScript (objetos, variables, y funciones) y conceptos de D3 (atributos 'cx', 'cy' y 'r') para crear y modificar formas.

Específicamente, usarás una función para crear una versión modificada de un objeto cuyas propiedades luego se usan como valores para los atributos de una forma.

Tutorial de la solución:
En el código con el que comienzas, hay dos variables, circle y newCircle, una función, change, y 2 círculos SVG, pea1 y pea2. circle es un objeto que contiene tres propiedades: cx, cy y r. La función change toma un objeto, modifica los valores de sus propiedades y lo devuelve como un nuevo objeto. pea1 y pea2 son círculos SVG que usan los valores de las propiedades cx, cy y r de newCircle para sus atributos 'cx', 'cy' y 'r'. Como está, actualmente newCircle es lo mismo que circle. En este acertijo, cambiarás newCircle para que llame a la función change en circle para crear un objeto con las mismas propiedades, pero diferentes valores, como circle.

Para completar el acertijo, cambia el valor de la variable newCircle de circle a change(circle). Ahora, los atributos 'cx' y 'cy' de pea1 y pea2 serán diferentes a los valores de las propiedades cx y cy de circle.

Solución del código de ejemplo:
(Pulsa a continuación 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);

Conceptos de JavaScript: variable, función, objeto
Conceptos de D3: atributo

Código adicional (código oculto que se ejecuta antes del código del acertijo):

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)
#2
#3