I tried to make an icon of a banana, and banana leaves, with Zdog, using the colors that was in the challenge description.
I'm trying to learn Zdog, because I'm sure that this library will be helpful to me for my future projects. Especially, I am always using a pseudo 3D object to create an icon (or etc).
About Zdog
According to the description on the official website:
Zdog is a 3D JavaScript engine for
<canvas>
and SVG. With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes. This makes Zdog special.
Yes, it is easy to make an image using this library. It is as easy as writing a CSS code (in my opinion). I just had to remember the way how to set the images.
Example usage
let banana = new Zdog.Shape({
addTo: scene, // The anchor
color: "#f5e82f",
path: [
{ x: 47.5, y: -22 },
{ arc: [
{ x: 35, y: 70 },
{ x: -47.5, y: 30 }
]}
],
closed: false,
stroke: 40
});
The source code above helped me to write the banana image without using any assets, or images.
Note that the anchor is like container images. Let's say, it is to group the multiple images (in how I understand it).
Grouping these images is important, so that when we rotate the rendered image, all of these images will rotate at one on the same dimension.
We can use many shapes to render our image. One of them is the Shape
method of Zdog
class; above, at the example source code.
Insight
While trying to learn this library, I learned that we do not have to render 3D element on the canvas to represent 3D image. We can rely on math draw or render an image in 3D (Z dimension).
Links
- Zdog official website and documentation: Zdog
- Tutorial where the Zdog referred to: Rotating 3D Shapes
Top comments (0)