Isometric: Crafting an Illusion of Depth on Web Pages

Robert Harris -

In a digital world, visual representation carries significant weight. The 'isometric' library, a brainchild of elchininet, is a riveting JavaScript library engineered to implement isometric projections on web pages. Utilizing TypeScript and Canvas for its construction, Isometric ensures simplicity and ease of use.

The core offerings of Isometric include:

  1. Isometric Drawing: Engage in creating visuals with a 3D illusion on a 2D plane.
  2. Animating Isometrics: Breathe life into static isometric drawings with smooth animations.
  3. Configurable Isometrics: Tailor your isometric projections with configurable settings to match your aesthetic or functional requirements.

Embarking on the Isometric journey is straightforward. Incorporate the following dependency in your HTML to get started:

<script src="https://cdn.jsdelivr.net/npm/isometric/dist/isometric.min.js"></script>

Here's a glimpse of Isometric in action:

// Create an isometric projection
const isometric = new Isometric(canvas);

// Sketch a rectangle
isometric.drawRect(100, 100, 200, 200);

// Ignite the animation
isometric.startAnimation();

Post execution, a rectangle portrayed in isometric projection graces the canvas, followed by the initiation of animation.

The library extends the flexibility to modulate animation speed among other properties, as depicted below:

// Adjust the animation speed
isometric.animationSpeed = 100;

// Ignite the animation
isometric.startAnimation();

Isometric doesn't stop at rectangles; it's capable of crafting circles, triangles, and even text in an isometric projection. Here are a few more strokes of Isometric's magic:

// Drawing a circle
isometric.drawCircle(100, 100, 50);

// Sketching a triangle
isometric.drawTriangle(100, 100, 150, 100, 125, 150);

// Inscribing text
isometric.drawText("Hello, World!", 100, 100);