Author: HelloGitHub- Kalifun
The sample code covered in this article has been synchronously updated to the HelloGithub-Team repository
Zdog Project address: github.com/metafizzy/z…
In the last article, we introduced how Zdog works. In this article, I will lead you to draw a GitHub octopus cat using Zdog (which is a little different from the official one).
A, analysis,
Through the above animation, we can analyze the GitHub octopus cat, give us the most intuitive is 7 parts. Head, face, eyes, nose, mouth, beard, ears.
- Head: consists of a regular solid rounded rectangle.
- Face: Consists of two regular solid rounded rectangles. The first layer is to make shadows and the second layer is to make faces.
- Eye: An eye made of three oval-shaped shapes, then copied to create another eye.
- Nose: consists of an oval shape.
- Mouth: The change from an oval to a semicircle is the mouth.
- Whiskers: Copied by two curves.
- Ear: Consists of a square cylinder with a circular base.
Through the above analysis, we need to use the API:
- Zdog.Anchor: Combine multiple shapes or items into one item for rendering etc.
- Zdog.Group: Controls the render order, inherits the Anchor, and the shapes are rendered in the order they were added to the Group.
- Zdog.RoundedRect: for a rounded rectangle, use a cornerRadius to set the radius.
- Zdog.Cone: square cylinder with a rounded base.
- Zdog.Shape: Shape class for custom shapes. The Shape of a Shape is defined by its path.
- Zdog.TAU: Complete rotation in radians. Math.PI * 2 == TAU, but is friendlier than PI because TAU maps directly to full rotation.
- Copy: Copies the same shape.
- CopyGraph: Copies items with children.
Second, the steps
Tips: Explanations are presented in the code with comments, please pay attention to read.
2.1 Creating a Canvas
It’s time to start acting, and first you need to create the canvas. The code is as follows:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Making the octopus cat</title>
<style>
.zdog-canvas{
display: block;
margin: 0px auto;
}
</style>
</head>
<body>
<! --Zdog is rendered on a <canvas> or < SVG > element. Width and height properties to set the size. -->
<canvas class="zdog-canvas" width="1200" height="800" style="width: 600px; height: 400px"></canvas>
<! -- Import js file -->
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script>
// 1. Select the canvas and create
let illo = new Zdog.Illustration({
element: ".zdog-canvas".dragRotate: true});// Here are the prepared colors
// The color of the pupil
const colorFeatures = "#AB5C53";
// Head color
const black = "#211F1F";
// The shadow color
const colorShadow = "#C39B88";
// Skin color
const colorSkin = "#E5C0AA";
// The color of the outermost circle of the eye
const white = "#FFF";
//----------------------------
// All the following code will be written here
//----------------------------
illo.updateRenderGraph();
</script>
</body>
</html>
Copy the code2.2 painted head
Start with the head of the GitHub octopus cat as we broke it down earlier. The code is as follows:
// All items that can be added to a Zdog scene act as anchors.
const head = new Zdog.Anchor({
addTo: illo,
translate: {
// move to the y axis
y: 15}});// Items with separate render order. For an inheritance.
const domepiece = new Zdog.Group({
addTo: head
});
// The real header is a solid rectangle
const noggin = new Zdog.RoundedRect({
addTo: domepiece,
// Set the height and width
width: 160.height: 66.// Render the shape line and set the line width. Default stroke: 1.
stroke: 230.// use the cornerRadius to set the cornerRadius
cornerRadius: 20.// Set the color
color: black,
path: [{x: 4.5 },
{ x: 5.5}}]);Copy the codeThe effect is as follows:
2.3 painted face
The implementation code of the face is as follows:
// We need to draw the next set of shapes, that is the face. Faces are defined as a group
const face = new Zdog.Group({
addTo: head,
// Adjust the position of the shaded part
translate: {
// We don't move the X-axis, keep it in the center
x: 0.// The y axis moves down
y: 36.// To make the 3D more realistic, we need to pop the face out a bit. That makes it more realistic
z: 20}});// Let's start with the shadow drawing, which consists of a solid rectangle
const skinShadow = new Zdog.RoundedRect({
addTo: face,
// Set the height and width
width: 100.height: 0.// Render the shape line and set the line width. Default stroke: 1.
stroke: 180.// use the cornerRadius to set the cornerRadius
cornerRadius: 40.// Set the color
color: colorShadow,
});
// Start drawing the face
const skin = new Zdog.RoundedRect({
addTo: face,
To create the shadow effect, we just need to reduce the width of our brush and see the desired effect.
width: 100.height: 0.// A little smaller than the previous shadow
stroke: 170.// The radius of the rounded corner is the same as the shaded part
cornerRadius: 40.// Set the color
color: colorSkin,
// To overlap with the lower half of the shadow, move it down
translate: {
y: 4.5}});Copy the codeThe effect is as follows:
2.4 draw the eye
The eye part is the same, so we will use the copy method, code is as follows:
// The outermost part of the eye is pure white
const iris = new Zdog.Ellipse({
addTo: eye,
// Render the inner shape area
fill: true.width: 40.height: 56.// Rounded radius
stroke: 2.// Zoom in or out on project geometry
scale: 1.5.color: white,
});
// The pupil part
const pupil = new Zdog.Ellipse({
addTo: eye,
// Set the length and width
width: 37.height: 56.stroke: 0.fill: true.color: colorFeatures,
// Due to its position it needs to be closer to the right
translate: {
x: 3.y: 5.z: 0}});// Then comes the little white spot in the pupil
const anotherpupil = new Zdog.Ellipse({
addTo: pupil,
// Set the width
width: 10.height: 10.color: white,
fill: true.stroke: 0.// Set the location
translate: {
x: 7 -.y: - 12.z: 3}});// Here is a copy of the left eye
const eyeright = eyeleft.copyGraph({
// Adjust your eye position
translate: {
x: 76.y: 6.z: 80
},
rotate: {
y: TAU / - 14}});Copy the codeThe effect is as follows:
2.5 to draw the nose
The code is as follows:
// Draw the nose part, relatively easy, because it is a circle
const nose = new Zdog.Ellipse({
addTo: face,
// Set the width
width: 6.height: 6.fill: true.stroke: 10.// Set the color
color: colorFeatures,
// Adjust the position
translate: {
x: 0.y: 32.z: 74}});Copy the codeThe effect is as follows:
2.6 draw the mouth
The code is as follows:
// Next, draw the mouth part
const mouth = new Zdog.Ellipse({
addTo: face,
// Set the diameter of the circle
diameter: 30.// Set it to 1/4 of a circle, which we value as 2, so we get a semicircle
quarters: 2.// Set the radius of the fillet
stroke: 4.// Scale the semicircle to make it more realistic
scale: {
x: 0.8.y: 1
},
color: colorFeatures,
// Rotate the semicircle so that the opening is upwards
rotate: {
x: TAU / 2.3.z: TAU / 4 -
},
// Then adjust the proper position
translate: {
x: 0.y: 46.z: 74}});Copy the codeThe effect is as follows:
2.7 draw the ear
/ / draw the ear
// Square cylinder with circular base
// Draw the left ear
const ear = new Zdog.Cone({
addTo: head,
// Set the diameter of the circle
diameter: 120.// Set the length
length: 90.stroke: false.color: black,
// Adjust the position
translate: {
x: - 120..y: - 105.
},
// The rounded corners are oriented towards the positive Z-axis, so you need to rotate them
rotate: {
x: TAU/4.y: TAU/12}});// Draw the right ear, copy, move, rotate the left ear
ear.copy({
translate: {
x: 120.y: - 105.
},
rotate: {
x: TAU/4.y: TAU/- 12}});Copy the code
2.8 The last step is to paint the beard
Finally, it’s the last step, and it’s about to come alive. The code is as follows:
// Start painting the beard
// shape Specifies a custom shape
const whisker = new Zdog.Shape({
addTo: whiskers,
path: [
/ / starting point
{ x: 100.y: 0 },
// The ellipse of the curve fits the rectangle formed by the previous corner and end point.
{ arc: [
/ / the corner
{ x: 30.y: - 10 }, // corner
/ / the end
{ x: - 30.y: 0 }, // end point]}],closed: false.// Width of beard
stroke: 4.color: black,
});
// For the other beard on the left, just follow the Settings above to move it down
whisker.copy ({
path: [{x: 100.y: 0 },
{ arc: [{x: 30.y: - 5 }, // corner
{ x: - 30.y: 10 }, // end point]}],// Move the beard down
translate: {
y: 20}});// Duplicate the left beard to move and rotate it
const whiskersright = whiskersleft.copyGraph({
translate: {
x: 290.y: 20
},
rotate: {
y: TAU/2,}});Copy the codeThe finished effect is as follows:
Third, summary
The code in this article has been opened to GitHub address: github.com/HelloGitHub…
When we analyze the code, it doesn’t feel as complicated as we imagined, and we need to analyze it carefully. Figure out the shape you want and then refer to the Zdog documentation for a quick way to get the shape you want. With this library, is it possible to have a new understanding of my ability to draw? Here’s HelloGitHub to expand your Arsenal from here!
After reading this article, will the “soul artist” be born? ✌ ️
Whirl jump I closed my eyes
Iv. Reference materials
-
Zdog official documentation
-
Effect of the source
“Explain Open Source Project series” — let the people who are interested in open source projects not be afraid, let the initiator of open source projects not be alone. Follow along as you discover the joys of programming, use, and how easy it is to get involved in open source projects. Welcome to leave a message to contact us, join us, let more people fall in love with open source, contribute to open source ~