Interface Graphics

LIKE's way of drawing to the screen.

More specifically: a system for wrapping canvas draw calls conveniently.

• Reduces state in calls -- no setColor, etc. Everything is passed in.
• Abstracts away common drawing operations.

Examples

Draw a spinning symbol in the center of the screen using transforms.

function drawSpinningYinYang(like: Like) {
  const color1 = "black";
  const color2 = "white";
  const size = 50;
  const pos = Vec2.div(like.canvas.getSize(), 2); // calc center of screen
  const speed = 0.5; // rotations per second

  like.gfx.withTransform(() => {
    like.gfx.translate(pos);
    like.gfx.rotate(like.timer.getTime() * Math.PI * 2.0 * speed);
    like.gfx.scale(size);
    like.gfx.circle("fill", color1, [0, 0], 2);
    // use the arc parameter to fill in a semicircle. Note that it's clockwise from {x:1, y:0}.
    like.gfx.circle("fill", color2, [0, 0], 2, { arc: [Math.PI/2, Math.PI*3/2] });
    like.gfx.circle("fill", color2, [0, -1], 1);
    like.gfx.circle("fill", color1, [0, 1], 1);
    like.gfx.circle("fill", color2, [0, 1], 1/3);
    like.gfx.circle("fill", color1, [0, -1], 1/3);
  })
}

like.draw = (like: Like) => {
  drawSpinningYinYang(like);
}
Copy