Creating Thinking Face Emoji with Zdog

With Zdog, which described as “Round, flat, designer-friendly pseudo-3D engine for canvas & SVG” I have created the thinking man rotating emoji. In this post, I will explain how to implement and develop your models and here is the result:

Here’s how I did: First, you might want to check Zdog’s Getting Started page. After embedding your canvas to website, the script you need to use below.

Basically we need to define every part of the emoji such as head as a point, eyes as ellipse (one eye and its clone transformed) and brows (one is half ellipse other is point-based line), a line mouth and finally the hand (which needs more coordinate point calculation).

After drawing the whole emoji I grouped whole shape, cloned it and transformed 2π/3 left and right to make it funnier. In addition I added an animate function which turns the object to the left like in the GIF version and there is our thinking face!

<script>
const TAU = Zdog.TAU;
const gold = '#EA0';
const illo = new Zdog.Illustration({
  element: '.zdog-canvas',
  zoom: 10,
});
var head = new Zdog.Shape({
  addTo: illo,
  stroke: 12,
  color: gold,
});
var headG = new Zdog.Group({
  addTo: head,
});
var eye = new Zdog.Ellipse({
  addTo: headG,
  diameter: 1,
  width: 1,
  height: 2,
  translate: { x: -2, y: -1.1, z: 4.5 },
  rotate: { z: TAU/32 },
  stroke: 1,
  backface: false,
});
eye.copy({
  translate: { x: 2, y: -0.8, z: 4.5 },
});
var leftBrow = new Zdog.Ellipse({
  addTo: headG,
  width: 1.5,
  height: 2.3,
  stroke: 0.3,
  quarters: 2,
  translate: { x: -2.2, y: -2.6, z: 4.5},
  rotate: { z: -TAU/4 },
});
var rightBrow = new Zdog.Shape({
  addTo: headG,
  path: [
    { x: 0, y:0 }, // start at 1st point
    { x: 0.5, y:2 }, // line to 2nd point
  ],
  stroke: 0.3,
  quarters: 2,
  translate: { x: 1.3, y: -2.7, z: 4.5},
  rotate: { z: -TAU/4 },
});
var mouth = new Zdog.Shape({
  addTo: headG,
  path: [
    { x: 0, y:0 }, // start at 1st point
    { x: 0.5, y:-2 }, // line to 2nd point
  ],
  stroke: 0.3,
  quarters: 2,
  translate: { x: 1.3, y: 2.7, z: 4.5},
  rotate: { z: -TAU/4 },
});
var hand = new Zdog.Shape({
  addTo: headG,
  path:[
    {x:0, y:0},
    {x:0, y:1},
    {x:3, y:1},
    {x:2, y:1},
    {x:1, y:2.5},
    {x:-1, y:2.5},
    {x:-1, y:1},
  ],
closed: true,
fill:true,
translate: { x: -2, y: 3, z: 4.6 },
stroke: 1,
zoom: 5,
color:"gold",
});
headG.copyGraph({
  rotate: {y: TAU/3},
})
headG.copyGraph({
  rotate: {y: -TAU/3},
})
function animate() {
  illo.rotate.y += 0.03;
  illo.updateRenderGraph();
  requestAnimationFrame( animate );
}
animate();
</script>
Written on November 10, 2019