Having a ball

One of the most ingenious aspects of Zdog is that, on the supporting website, you are immediately greeted with a volley of demos. What is more, you are able to open each project on CodePen and inspect the code. You can toy with the JavaScript panel to see the changes take place without delay, and if you have some time, even learn something new.

Case in point, consider the inspiring depiction of a floating pink blob, and something which in hindsight is close to obvious.

I’ve often relied on self-executing functions to structure my scripts. The idea is to scope a feature between brackets and have the logic run posthaste.

(() => {
	// ...
})();

Between the two curly brackets you have the freedom of declaring variables with short labels, without worrying about potential conflicts. “Have I declared this variable already?”. It matters little when you cross the new scope. A helpful construct indeed. But even more when you realize that self-executing functions are, at the end of the day, functions. This means you can return something, and store the value in a proper variable.

const path = (() => {
	// ...
	return points;
})();

Quite a convenient manner to initialize a variable with the result of a complex sequence, and to locate the code where it actually matters.

Another lesson learned? This one is more specific to the pseudo-3D graphics produced with the library, but when you create a shape, even a simple path is enough when you add a chunky stroke.

Looking at the arms protruding from the jolly example, you find only straight segments.

new Zdog.Shape({
	// ...
	path: [{ y: 0 }, { y: -7 }]
});

The thick stroke is however sufficient to stretch a realistic figure.

You don’t need to draw an ornate path, with arcs or bezier curves. You don’t need to, but of course it does help to complete the illustration with something extra.

new Zdog.Shape({
	// ...
	path: [
		{ x: 0, y: 0 },
		{
			arc: [
				{ x: 10, y: 0 },
				{ x: 10, y: 10 }
			]
		},
		{ x: 0, y: 10 }
	]
});

Point taken. There’s plenty to learn from reading somebody else’s code. And there are plenty of graphics to entertain your day.