Published
Edited
Aug 26, 2019
Fork of My Zdog
Importers
1 star
Insert cell
Insert cell
Insert cell
dog = illo => {
const body = new Zdog.Shape({
addTo: illo,
stroke: 0,
path: [{ y: 0 }, { y: 30 }],
color: "tomato"
});

const numEyes = 30;
for (let i = 0; i < numEyes; ++i) {
// render shapes in order added
var eyeGroup = new Zdog.Group({
addTo: body,
translate: {
z: (Math.random() - 0.5) * 30,
x: Math.random() * 100,
y: Math.random() * 100
},
scale: Math.random(),
rotate: { y: Zdog.TAU * Math.random() }
});
// eye white first
new Zdog.Ellipse({
addTo: eyeGroup,
width: 160,
height: 80,
fill: true,
color: "white"
});
// then iris
let iris = new Zdog.Ellipse({
addTo: eyeGroup,
diameter: 70,
color: "#00ccff",
fill: true
});
// then pupil
iris.copy({
diameter: 30,
color: "#006"
});
// highlight last in front
iris.copy({
diameter: 30,
translate: { x: 15, y: -15 },
color: "white"
});
}

const eyeGroup2 = eyeGroup.copy({
addTo: body,
translate: { x: 100, z: -30 }
});

return (frame, dogs) => {
body.rotate = { z: (Zdog.TAU / 32) * Math.sin(frame / 10) };
};
}
Insert cell
Insert cell
Zdog = require('zdog@1/dist/zdog.dist.min.js')
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more