#CodepenChallenge The Rain: Banana and leaf Icon

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