Because it's almost Christmas I thought I'd try out something new and make it Christmassy.
Zdog is a round, flat, designer-friendly pseudo-3D engine for canvas & SVG and some of the work being made with it is really inspiring. I wanted to see what I could make quickly as a non-designer with no experience in 3D.
A snowman is built from various parts so I thought it seemed like a good fit. Also I may have heard a song about building a snowman somewhere...
I used the Zdog documentation, tutorial and examples on the official Zdog website which is a fantastic source of information.
Setup
To use Zdog all you need is HTML, CSS and JavaScript. The HTML and CSS setup is very minimal.
The snowman is built using an Illustration object as the foundation for the illustration.
const illo = new Zdog.Illustration({
element: '.zdog-canvas',
zoom: 4,
dragRotate: true
});
The first thing needed for a snowman is a body, which luckily is quicker in Zdog than real life.
A sphere can be created using Shape and controlling the size with the stroke property.
let body = new Zdog.Shape({
addTo: illo,
stroke: 40,
translate: { y: 5 },
color: 'white'
});
The head shares properties with the body, and in Zdog items can be copied. So the body can be copied, and then certain properties overwritten.
let head = body.copy({
stroke: 25, // make the head smaller than the body
translate: { y: -25 }, // move it higher
})
Now we have the basic snowman!
To make the face, the eyes and mouth are both made from coal so they can be copied.
For the other arm the copyGraph function can be used to copy the arm item and the attached items.
So all that is needed is to move it into place an rotate it.
It's also possible to add animations to Zdog creations so I added a little inspired by the many demos on the official website.
let isSpinning = true;
let direction = 'right'
function animate() {
if (illo.rotate.y < -1) { direction = 'left' }
if (illo.rotate.y > 1) { direction = 'right' }
if (isSpinning && direction === 'right') {
illo.rotate.y += -0.005;
} else if (isSpinning && direction === 'left') {
illo.rotate.y -= -0.005;
}
illo.updateRenderGraph();
requestAnimationFrame( animate );
}
animate();
(This is a gif, and the created SVG looks much better!)
Overall it was easy to get started due to the great documentation and examples and I am looking forward to trying to make more complex designs.
