Published
Edited
Oct 17, 2021
1 fork
{
const height = 400;
const defaultSpinning = false;
let isSpinning = defaultSpinning;
const element = DOM.canvas(width, height);
const illo = new Zdog.Illustration({
element,
dragRotate: true,
// pause spinning while dragging
onDragStart: () => (isSpinning = false),
onDragEnd: () =>
defaultSpinning == true ? (isSpinning = true) : (isSpinning = false)
});
illo.element.style.backgroundColor = "#A3E0B9";
const leftStripe = new Zdog.Shape({
addTo: illo,
path: [
{ x: -100, y: -10, z: 35 }, // start
{
arc: [
{ x: -120, y: 40, z: 10 }, // corner
{ x: -100, y: 70, z: 0 } // end point
]
}
],
closed: false,
stroke: 20,
color: "#F2EEEF"
});
const rightStripe = new Zdog.Shape({
addTo: illo,
path: [
{ x: 100, y: -10, z: 35 }, // start
{
arc: [
{ x: 120, y: 40, z: 10 }, // corner
{ x: 100, y: 70, z: 0 } // end point
]
}
],
closed: false,
stroke: 20,
color: "#F2EEEF"
});
const rightEye = new Zdog.Shape({
addTo: illo,
// no path set, default to single point
stroke: 30,
color: "black",
translate: { x: 55, z: 50, y: -10 }
});
const leftEye = new Zdog.Shape({
addTo: illo,
// no path set, default to single point
stroke: 30,
color: "black",
translate: { x: -55, z: 50, y: -10 }
});
const rightEar = new Zdog.Polygon({
addTo: illo,
radius: 60,
sides: 5,
fill: true,
stroke: 20,
color: "#F2EEEF",
translate: { x: 110, y: -100, z: -20 },
rotate: { x: -Math.PI / 8, y: Math.PI * 0.125, z: Math.PI * 0.2 }
});
const leftEar = new Zdog.Polygon({
addTo: illo,
radius: 60,
fill: true,
sides: 5,
stroke: 20,
color: "#F2EEEF",
translate: { x: -100, y: -100, z: -20 },
rotate: { x: -Math.PI / 8, y: -Math.PI * 0.125, z: -Math.PI * 0.2 }
});
const head = new Zdog.RoundedRect({
addTo: illo,
width: 200,
height: 150,
cornerRadius: 60,
stroke: 80,
fill: true,
color: "#9D3B22"
});
const muzzle = new Zdog.Hemisphere({
addTo: illo,
diameter: 120,
// fill enabled by default
// disable stroke for crisp edge
stroke: false,
translate: { z: 40, y: 50 },
color: "#F2EEEF",
backface: "#9D3B22"
});
const nose = new Zdog.Shape({
addTo: illo,
path: [
{ x: 0, y: 70, z: 80 },
{ x: 20, y: 50, z: 85 },
{ x: 0, y: 40, z: 90 },
{ x: -20, y: 50, z: 85 }
],
stroke: 30,
color: "#161429"
});
const leftLip = new Zdog.Shape({
addTo: illo,
path: [
{ x: 0, y: 40, z: 100 },
{ x: 0, y: 80, z: 90 },
{ x: -30, y: 90, z: 70 }
],
closed: false,
stroke: 20,
color: "#161429"
});
const rightLip = new Zdog.Shape({
addTo: illo,
path: [
{ x: 0, y: 40, z: 100 },
{ x: 0, y: 80, z: 90 },
{ x: 30, y: 90, z: 70 }
],
closed: false,
stroke: 20,
color: "#161429"
});
while (true) {
if (isSpinning) illo.rotate.y += 0.03;
illo.updateRenderGraph();
yield element;
}
}
Zdog = require("zdog@1/dist/zdog.dist.min.js")
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.
