Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

introduce

We miss the National Day is about to start, holiday crowded people, as the house at home, naturally not waste house happy water and chips.

In this episode, we’ll use the lightweight 3D engine Zdog.js to draw French fries. Because I have just started to play this engine, so if it is not good, please include more.

Because there is a lot of repetitive drawing code in this installment, we will only cover the key parts. I’m going to talk about the basic structure, the chip box, the drawing of the chips.

The body of the

1. Infrastructure

Let’s install Vite and Zdog first.

yarn add -D vite
yarn add zdog
Copy the code

Next, we will create index.html, which uses module mode to import app.js as the main logic script.

<canvas id="canvas"></canvas>
<script type="module" src="./app.js"></script>
Copy the code

Of course, before we eat the chips, we need to have a ceremony. Of course, we need to spread a tablecloth first.

* {
    padding: 0;
    margin: 0;
}

html.body {
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}
#canvas {
    background-image: repeating-linear-gradient(
        0deg.hsla(340.87%.75%.0.2) 0px.hsla(340.87%.75%.0.2) 30px,
        transparent 30px,
        transparent 60px
    ),
        repeating-linear-gradient(
            90deg.hsla(340.87%.75%.0.2) 0px.hsla(340.87%.75%.0.2) 30px,
            transparent 30px,
            transparent 60px
        ),
        linear-gradient(90deg.rgb(255.255.255), rgb(255.255.255));
}
Copy the code

Very easily, we used the repeating-Linear-gradient loop to create a pink desktop with a full screen.

And then, let’s start writing the main logic, introducing and initializing it.

/*app.js*/
import * as Zdog from "zdog";

const illo = new Zdog.Illustration({
  element: "#canvas".resize: "fullscreen".dragRotate: true.zoom: 1.2
});

function animate() {
  illo.updateRenderGraph();
  requestAnimationFrame(animate);
}

animate();
Copy the code

There is no assumption of camera, various lights, etc., as in Three.js. We just use Illustration to generate the instance, element is the canvas element we want to use, resize is fullscreen, we expect the canvas to be all over the screen, dragRotate is turned on and we can drag it with the mouse, zoom is the zoom size.

Then simply call the updateRenderGraph method under the instance to update it, along with the requestAnimationFrame to do the redrawing.

2. Chip box

We will focus on drawing several shapes here.

new Zdog.Rect({
  addTo: illo,
  width: 150.height: 100.stroke: 5.color: "RGB (249,78,65)".fill: true.translate: {
    x: 0.y: 120,},rotate: {
    x: Zdog.TAU / 4,}});Copy the code

The Rect class is used to create a rectangle. These parameters are just as their name suggests. Note that Zdog.TAU is a constant in Zdog, which is understood as 2*PI.

Then we move on to Shape, which is the most powerful Shape class in Zdog because it can turn into any Shape you pass in.

let cartonSide1 = new Zdog.Shape({
  addTo: illo,
  path: [{x: 75.y: 120.z: 0}, {x: -75.y: 120.z: 0}, {x: -100.y: -30.z: 30}, {x: 100.y: -30.z: 30],},stroke: 5.fill: true.color: "RGB (255111) 5".translate: {
    x: 0.y: 0.z: 50,},rotate: {
    x: 0,}});Copy the code

If we want to form a box, we can use the copyGraph method in our example to clone the same face and change the Angle to meet the needs

cartonSide1.copyGraph({
  translate: {
    x: 0.y: 0.z: -50,},rotate: {
    y: Zdog.TAU / 2,}});Copy the code

As for the following operation, is quite tedious, is to use these simple methods to draw, here will not take up more space.

And finally, this:

3. Paint fries

We will also learn a Box class to draw French fries. As the name implies, it is specialized in drawing boxes, which has the properties of length, width and height. It is very convenient to set up.

let ff = new Zdog.Box({
  addTo: illo,
  width: 20.height: 20.depth: 240.stroke: false.color: "RGB (combine) 255222".leftFace: 'RGB (xue gong cheng xue bao)'.rightFace: 'RGB ((255222)'.translate: {
    x: 0.y: -10,},rotate: {
    x: Zdog.TAU / 4,}});Copy the code

It’s also worth noting that The ZDog can also set the color of the face, which we did here for the left and right sides.

One is too like censer, let’s multi-root, National Day seven days let’s let the air root, or use copyGraph to do a copy to achieve.

ff.copyGraph({
  depth: 220.translate: {
    x: -50.y: 0,},rotate: {
    x: Zdog.TAU / 4.y: Zdog.TAU / 36.z: Zdog.TAU / 2,}})Copy the code

I’m just going to write one here, because I don’t want to write too many repetitions.

Done, online demo:

Zdog.js can also create a lot of interesting effects, so give it a try