Timothy Myotte ―
Designer & Software Engineer
Moti.js ―
Graphics Framework
Graphics in Motion.

Moti.js

TLDR: JavaScript framework for building and displaying interactive graphical applications.

My Role:
Software Engineer

Stack: JavaScript HTML CSS

Design tools: draw.io

Moti is a JavaScript graphics library and editor designed to simplify the process of loading/drawing images and shapes for games or graphic-intensive applications.

Controls: Scale: 1x 2x 3x

Tile Set: Set 1 Set 2


Moti makes HTML5 canvas graphics simple. It employs a tile-based system similar to many game engines, however this is optional. It can draw full images, animations or sprites independent of the tile-based structure. This makes it useful for non-game graphical projects as well, providing a simple library to handle the loading/drawing of assets.


The basic class structure can be seen below:



Moti also includes an easy-to-use map editor for creating tile-based content. The intuitive and user-friendly GUI allows anyone to rapidly create tilemaps and export them for project use with the moti.js library.

Key Features:

  • - Easy-to-use map editing GUI
  • - Define metadata for graphics tilesets
  • - Sequencing and customization of animated tiles
  • - Define custom hitboxes and objects
  • - Builds JSON data for easy importing/exporting


Moti is a work in progress, and will eventually support audio and input methods as well. Additional drawing functions, such as the simplified circle function used to draw the sun in the above demo are also being added.