Transform 3D

In SVG the transform attribute lets you set up nifty effects with little effort. With Zdog the feature is not lost, but you need to be really explicit.

SVG

Consider a point in a 2D plane.

<svg viewBox="-50 -50 100 100">
	<circle r="5" />
</svg>

If you want to move the dot with radial motion, on the outline of a makeshift circle, you don’t need to compute the x, y coordinates around the center. You certainly can with the help of two trigonometric functions, but leaning on what you know about the SVG origin you truly don’t have to go through the hassle.

The idea is both simple and intriguing. Position the circle with an horizontal offset — you can do so with the cx attribute, but the transform attribute as well, translating the piece.

<circle transform="translate(50 0)" r="5" />

Rotate the parent scope, for instance a wrapping group element.

<g transform="rotate(75)">
	<circle transform="translate(50 0)" r="5" />
</g>

In the scope of the group you rotate the entire coordinate system. The offset shape, and any other nested element, will follow at an angle.

Rotate around the center

Again, this is made possible through transformations, but you must be cautious with the order. First rotate, then translate.

Conveniently, you don’t need multiple group elements if you intend to add multiple transformations.

<g transform="rotate(75)">
	<g transform="translate(50 0)">
		<!-- ...rotated, offset shapes -->
	</g>
</g>

In the transform attribute, you can layer the changes one after the other, in sequence.

<g transform="rotate(75) translate(50 0)">
	<!-- ...rotated, offset shapes -->
</g>

With or without nested groups, you know how to operate. And you can achieve a lot with the single concept already.

Zdog

In Zdog you don’t have access to a transformation as much as its composing, individual functions.

new Zdog.Shape({
	translate: { x: 50 }
});

translate, rotate, scale. Add the properties to the instance of a class and you are able to reposition, angle or resize the object at will. The beauty of this is that we can recreate the motion first seen in 2D. Better yet, we can attempt a rotation on multiple axes. There’s only one issue standing in the way: order.

Far from the SVG syntax, far from the convenience of the transform attribute, you cannot rely on the order of the properties in the object in the same manner.

new Zdog.Shape({
	rotate: { y: Zdog.TAU / 4 },
	translate: { z: 50 }
});

Much more for individual operations on different axes.

new Zdog.Shape({
	rotate: {
		y: Zdog.TAU / 4,
		x: Zdog.TAU / 4
	}
});

Behind the scenes, the library applies the changes in a specific order, but if you do need more control, you can thank SVG to show a way. Where in SVG you are able to apply transformations with a group element, Zdog offers an Anchor for the same task.

const anchor = new Zdog.Anchor({
	translate: { z: 50 }
});

And you might not need multiple layers to transform SVG shapes on multiple counts, but you can repeat the class for the desired sequence. Consider for instance a trivial change. First rotate around the y axis.

const a1 = new Zdog.Anchor({
	addTo: illustration,
	rotate: {
		y: Zdog.TAU / 4
	}
});

Then, with another anchor rotate around the x axis.

const a2 = new Zdog.Anchor({
	addTo: a1,
	rotate: {
		x: Zdog.TAU / 4
	}
});

If you make sure to add the rotations one after the other, whichever shape you add next, on the very last anchor, will be affected by both.

new Zdog.Shape({
	addTo: a2,
	translate: {
		z: 50
	}
});

A visual might help.

Rotate around the y axis Rotate around the x axis

But if your head is spinning, you are justified in being slightly befuddled. It is certainly not easy to digest the process as the shift requires a literal change in perspective.

If you need a better handle on rotations, you might want to try and update the axes individually — you might enjoy the detour.

And if you ever decide to pick up the concept to try and chart a few stars, let me offer one final piece of advice. As you research the celestial sphere and get to know fancy words such as right ascension and declination, you might stumble on similar rotations around the y and x axes. In this light, know that a positive declination moves a point up, above the equator, while a positive rotation in Zdog on the x axis moves in the opposite direction. The entire discussion might go over your head, and at the end of the day, it’s close to trivial. What matters is having a clear view of transformations. And possibly an impressive sight.