Aim of the puzzle:
This puzzle combines the use of JavaScript concepts (for…of loops, arrays, and objects) and D3 concepts ('cx' , 'cy' , 'r' and 'fill' attributes) to modify shapes.
Specifically, you’ll use a for…of loop and data stored in an array of objects to set the attributes of multiple shapes.
Walk through of solution:
This puzzle imports dotList from additional code. dotList is an array of 23 objects. Each object has 4 properties: x, y, size, and color. In the code that you start off with, the for…of loop iterates through dotList and uses the properties of each object to set the 'cx'and 'fill' attributes of a circle. It also sets the 'cy' and 'r' attributes but doesn’t use data from dotList and instead uses a number. In this puzzle, you’ll change the values of the 'r' and 'cy' attributes to turn the circles into a bear.
To complete the puzzle, set the 'cy' attribute to dot.y and the 'r' attribute to dot.size. Now, each circle will have the correct size and position.
Sample code solution:
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);
}
JavaScript Concepts: For…of loop, Variable, Import
D3 Concepts: Attribute, .append()
Additional Code (hidden code that runs before the puzzle’s code):
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'},
];
