Zdog: A Pseudo-3D JavaScript Library, and a Korean Flag for Gwangbokjeol

Next week is Gwangbokjeol in South Korea. Traditionally people fly the flag outside their home or apartment room. To commemorate this day and to sharpen my JavaScript skills, I decided to take this as an opportunity to apply a nice pseudo 3D library.

Gwangbokjeol (광복절), on 15 August, is Korea’s National Liberation Day, marking the end of Japanese colonial rule in 1945. Zdog is a small JavaScript library for drawing 3D-ish illustrations on a <canvas> or in SVG. Its shapes have real positions in 3D space and turn like 3D objects, but they’re drawn as flat shapes, so you get something that looks like a flat illustration you can spin rather than a 3D render. That suits something simple like a flag.

A minimal Zdog example

#

Two shapes, drag to rotate, and an animation loop:

<canvas class="zdog-canvas" width="240" height="240"></canvas>
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script>
  const illo = new Zdog.Illustration({
    element: '.zdog-canvas',
    dragRotate: true, // drag to turn the scene
  });

  // a square, pushed back
  new Zdog.Rect({
    addTo: illo,
    width: 80,
    height: 80,
    translate: { z: -30 },
    stroke: 8,
    color: '#0047a0',
  });

  // a filled circle, pulled forward
  new Zdog.Ellipse({
    addTo: illo,
    diameter: 60,
    translate: { z: 30 },
    stroke: 8,
    color: '#cd2e3a',
    fill: true,
  });

  function animate() {
    illo.rotate.y += 0.02;
    illo.updateRenderGraph();
    requestAnimationFrame(animate);
  }
  animate();
</script>

Each shape joins the scene with addTo, and translate.z is what makes it 3D: turn the scene and the circle swings round in front of the square. updateRenderGraph() updates and redraws everything, which is why it sits inside the loop.

Official Docs

#

https://zzz.dog/

The code used is available to view on CodePen.

My Example

#