Shapes are the visible items rendered in a Zdog model. All shape classes inherit Anchor and Shape properties and methods.
A rectangle. Set size with width and height. Default sizes: width: 1, height: 1.
let rect = new Zdog.Rect({
addTo: illo,
width: 120,
height: 80,
stroke: 20,
color: '#E62',
});All shapes are oriented facing "front" — towards the positive z-axis. Set rotate to orient a shape in another direction.
let rect = new Zdog.Rect({
addTo: illo,
width: 80,
height: 64,
stroke: 10,
translate: { x: -48 },
// turn to face left
rotate: { y: TAU/4 },
color: '#E62',
});
rect.copy({
translate: { y: -48 },
// turn to face up
rotate: { x: TAU/4 },
color: '#636',
});A rectangle with rounded corners. Set size with width and height, like with Rect. Set rounded corner radius with cornerRadius. Default: cornerRadius: 0.25.
let roundedRect = new Zdog.RoundedRect({
addTo: illo,
width: 120,
height: 80,
cornerRadius: 30,
stroke: 20,
color: '#EA0',
});An ellipse. Set diameter for circles. Default diameter: 1
let circle = new Zdog.Ellipse({
addTo: illo,
diameter: 80,
stroke: 20,
color: '#C25',
});Set width and height for ellipses.
let ellipse = new Zdog.Ellipse({
addTo: illo,
width: 60,
height: 120,
stroke: 20,
color: '#C25',
});Set quarters to an integer for quarter- and semi-circles. The quarter circle starts in the upper-right and continues clockwise.
let semicircle = new Zdog.Ellipse({
addTo: illo,
diameter: 80,
quarters: 2,
stroke: 20,
color: '#C25',
});A regular polygon. Set size with radius and the number of sides with sides. Default: radius: 0.5, sides: 3.
let pentagon = new Zdog.Polygon({
addTo: illo,
radius: 60,
sides: 5,
stroke: 20,
color: '#EA0',
});Shape class for custom shapes. The shape of a Shape is defined by its path.
Defines the shape.
When unset, path defaults to a single point. With stroke set, a single point renders as a sphere.
new Zdog.Shape({
addTo: illo,
// no path set, default to single point
stroke: 80,
color: '#636',
});Set path to Array of path commands. Path commands set the directions for the path to shape. Similar to drawing a path in 2D <canvas>, SVG paths, or Logo’s turtle graphics.
There are four path commands: line, move, arc, and bezier. Each command is set as an Object with the key of the command and value of a vector Object or an Array of vector Objects representing the command points.
path: [
{ line: {/*x,y,z*/} }, // verbose syntax
// or
{/*x,y,z*/}, // line shorthand is just the point
{ move: {/*x,y,z*/} },
{ arc: [
{/*x,y,z*/}, // corner point
{/*x,y,z*/}, // end point
]},
{ bezier: [
{/*x,y,z*/}, // start control point
{/*x,y,z*/}, // end control point
{/*x,y,z*/}, // end point
]},
]To start the path shape, the first path command is always treated as move.
{ line: {/*x,y,z*/} }, // verbose syntax
// or
{/*x,y,z*/}, // line shorthand is just the pointnew Zdog.Shape({
addTo: illo,
path: [
{ x: -40 }, // start at 1st point
{ x: 40 }, // line to 2nd point
],
stroke: 20,
color: '#636',
});// z-shape
new Zdog.Shape({
addTo: illo,
path: [
{ x: -32, y: -40 }, // start at top left
{ x: 32, y: -40 }, // line to top right
{ x: -32, y: 40 }, // line to bottom left
{ x: 32, y: 40 }, // line to bottom right
],
closed: false,
stroke: 20,
color: '#636',
});Path points can use z coordinates to form 3D shapes.
// 3D shape
new Zdog.Shape({
addTo: illo,
path: [
{ x: -32, y: -40, z: 40 },
{ x: 32, y: -40 },
{ x: 32, y: 40, z: 40 },
{ x: 32, y: 40, z: -40 },
],
closed: false,
stroke: 20,
color: '#636',
});{ move: {/*x,y,z*/} },new Zdog.Shape({
addTo: illo,
path: [
{ x: -40, y: -32 }, // start at top left
{ x: 40, y: -32 }, // line to top right
{ move: { x: -40, y: 32 } }, // move to bottom left
{ x: 40, y: 32 }, // line to bottom right
],
closed: false,
stroke: 20,
color: '#636',
});{ arc: [
{/*x,y,z*/}, // corner point
{/*x,y,z*/}, // end point
]},Renders an elliptical curve. The ellipse of the curve fits within a rectangle formed by the previous, corner, and end points.
new Zdog.Shape({
addTo: illo,
path: [
{ x: -60, y: -60 }, // start
{ arc: [
{ x: 20, y: -60 }, // corner
{ x: 20, y: 20 }, // end point
]},
{ arc: [ // start next arc from last end point
{ x: 20, y: 60 }, // corner
{ x: 60, y: 60 }, // end point
]},
],
closed: false,
stroke: 20,
color: '#636'
});{ bezier: [
{/*x,y,z*/}, // start control point
{/*x,y,z*/}, // end control point
{/*x,y,z*/}, // end point
]},Renders a bezier curve.
new Zdog.Shape({
addTo: illo,
path: [
{ x: -60, y: -60 }, // start
{ bezier: [
{ x: 20, y: -60 }, // start control point
{ x: 20, y: 60 }, // end control point
{ x: 60, y: 60 }, // end point
]},
],
closed: false,
stroke: 20,
color: '#636'
});Closes the path from the last point back to the first. Enabled by default closed: true.
new Zdog.Shape({
addTo: illo,
path: [ // triangle
{ x: 0, y: -40 },
{ x: 40, y: 40 },
{ x: -40, y: 40 },
],
// closed by default
stroke: 20,
color: '#636'
});new Zdog.Shape({
addTo: illo,
path: [
{ x: 0, y: -40 },
{ x: 40, y: 40 },
{ x: -40, y: 40 },
],
closed: false, // unclosed
stroke: 20,
color: '#636'
});A spherical hemisphere. Set size with diameter. Set the color of the base ellipse with backface. Defaults: diameter: 1, fill: true. The origin of the hemisphere is the center of the base. The dome faces front toward positive z-axis.
let dome = new Zdog.Hemisphere({
addTo: illo,
diameter: 120,
// fill enabled by default
// disable stroke for crisp edge
stroke: false,
color: '#C25',
backface: '#EA0',
});A square cylinder with circular bases. Set size with diameter and length. Default diameter: 1, length: 1, fill: true. Set the color of the base ellipse with backface. The origin of the hemisphere is the center of the base. The dome faces front toward positive z-axis.
let partyHat = new Zdog.Cone({
addTo: illo,
diameter: 70,
length: 90,
stroke: false,
color: '#636',
backface: '#C25',
});A square cylinder with circular bases. Set size with diameter and length. Defaults diameter: 1, length: 1, fill: true. Set the color of the base ellipse with backface. The origin of the cylinder is the center of its length. The cylinder is oriented front-to-back along the z-axis.
let can = new Zdog.Cylinder({
addTo: illo,
diameter: 80,
length: 120,
stroke: false,
color: '#C25',
backface: '#E62',
});For different base colors, set frontFace and backface
let can = new Zdog.Cylinder({
addTo: illo,
diameter: 80,
length: 120,
stroke: false,
color: '#C25',
frontFace: '#EA0',
backface: '#636',
});A rectangular prism. Set size with width, height, and depth. Set face colors with face options: frontFace, rearFace, leftFace, rightFace, topFace, and bottomFace. Defaults width: 1, height: 1, depth: 1, fill: true
let box = new Zdog.Box({
addTo: illo,
width: 120,
height: 100,
depth: 80,
stroke: false,
color: '#C25', // default face color
leftFace: '#EA0',
rightFace: '#E62',
topFace: '#ED0',
bottomFace: '#636',
});Remove face shapes by disabling face options.
let box = new Zdog.Box({
addTo: illo,
width: 120,
height: 100,
depth: 80,
stroke: false,
color: '#C25',
// remove left & right faces
leftFace: false,
rightFace: false,
rearFace: '#EA0',
topFace: '#ED0',
bottomFace: '#636',
});