Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
obelisk.js
Advanced tools
Readme
obelisk.js is a JavaScript library for building isometric pixel objects.
With the simple and flexible API provided, you can easily add isometric pixel elements like brick, cube, pyramid and slope in HTML5 canvas. Obelisk.js strictly follows pixel neat pattern: lines with 1:2 pixel dot arrangement, leading to an angle of 22.6 degrees.
Also you should know obelisk.js is not for vector isometric graphics drawing and rendering. Internally it does not use any canvas graphic drawing API, instead, it manipulates all the rendering in pixel level to obtain precise pixel arrangement. Just try it out to pixelate something. Have fun.
The newest version is written by CommonJS style, which means you can easily use it in browserify project. See details here
Origin:
User Contributed:
Simply include obelisk.js in your project
<script src="//path/to/obelisk.min.js"></script>
In JavaScript
// create a canvas 2D point for pixel view world
var point = new obelisk.Point(200, 200);
// create view instance to nest everything
// canvas could be either DOM or jQuery element
var pixelView = new obelisk.PixelView(canvas, point);
// create cube dimension and color instance
var dimension = new obelisk.CubeDimension(80, 100, 120);
var gray = obelisk.ColorPattern.GRAY;
var color = new obelisk.CubeColor().getByHorizontalColor(gray);
// build cube with dimension and color instance
var cube = new obelisk.Cube(dimension, color, true);
// render cube primitive into view
pixelView.renderObject(cube);
For more details, check the tutorial part 1: To build the first cube, or try the code yourself
Step by step:
Sample code for building all primitives:
Obelisk.js can be used from browserify project. Simply:
$ npm install obelisk.js
In your JavaScript
var obelisk = require('obelisk.js');
// Now you can do the same as above
$ git clone https://github.com/nosir/obelisk.js.git
$ npm install
Build
$ gulp build
Develop
$ gulp browserify:watch
Also you can use it in your Node.js canvas project
As node.js
canvas
dependency can be tricky to install (binary dependency on Cairo) we are not adding it as a project dependency. You will need to add thecanvas
dependency explicitly on your project:
$ npm install canvas
$ npm install obelisk.js
In your JavaScript
// load Node Canvas dependency
var Canvas = require('canvas');
// load obelisk.js module
// here we need the Canvas as a module parameter
var obelisk = require('obelisk.js')(Canvas);
// create a Node Canvas instance
var canvas = new Canvas(600,450);
// Use obelisk the same way you will use it in the browser ...
// Save canvas to a file
canvas.createPNGStream().pipe(fs.createWriteStream('./figure.png'));
For more details, check the Node.js Canvas example.
See details here: release notes.
Pixel art is a form of digital art, where images are edited and displayed on the pixel level. The isometric projection is commonly seen in games to provide a 3D view without using any real 3D processing.
Obelisk.js is released under the MIT License
FAQs
JavaScript Library for Building Pixel Isometric Element with HTML5 Canvas
The npm package obelisk.js receives a total of 41 weekly downloads. As such, obelisk.js popularity was classified as not popular.
We found that obelisk.js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.