{"_id":"obelisk.js","_rev":"18-bbbe282619a5c9f48692ce62da50b867","name":"obelisk.js","time":{"modified":"2022-06-22T15:58:35.700Z","created":"2014-03-31T10:23:15.874Z","1.0.2":"2014-03-31T10:23:15.874Z","1.0.3":"2014-04-06T06:20:34.517Z","1.0.4":"2014-04-12T15:50:22.210Z","1.1.0":"2014-05-11T15:52:26.563Z","1.2.0":"2016-04-16T10:46:46.679Z","1.2.1":"2016-05-07T06:06:24.919Z","1.2.2":"2016-05-11T14:05:08.773Z"},"maintainers":[{"name":"nosir","email":"risonhuang@gmail.com"}],"dist-tags":{"latest":"1.2.2"},"description":"JavaScript Library for Building Pixel Isometric Element with HTML5 Canvas","readme":"# Obelisk.js\n\n[![Travis](https://img.shields.io/travis/nosir/obelisk.js.svg?maxAge=2592000)](https://travis-ci.org/nosir/obelisk.js)\n[![GitHub release](https://img.shields.io/github/release/nosir/obelisk.js.svg?maxAge=2592000)](https://github.com/nosir/obelisk.js)\n[![Codacy](https://img.shields.io/codacy/dea18e66031141a39d4549b170343aa9.svg?maxAge=2592000)](https://www.codacy.com/app/nosir/obelisk-js/dashboard)\n\nobelisk.js is a JavaScript library for building isometric pixel objects.\n\nWith 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.\n\nAlso 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.\n\n<img width=\"112\" height=\"109\" src=\"http://nosir.github.io/obelisk.js/images/logo.png\"/>\n\n## 1.2.0 Release\nThe newest version is written by CommonJS style, which means you can easily use it in browserify project. [See details here](#development-browser)\n\n## Showcase\n\nOrigin:\n- Input Text Rendering: http://codepen.io/nosir/details/IxBJn\n- GIF Animation Rendering: http://codepen.io/nosir/details/mdiHe (Safari only)\n- Pixel Isometirc Flappy Bird: http://codepen.io/nosir/details/rzaLA\n- Cube Generator: http://codepen.io/nosir/details/ganrh\n\nUser Contributed:\n- Github Contribution Chart Isometric View Chrome Extension: [Github Project URL](https://github.com/jasonlong/isometric-contributions) by  [@jasonlong](https://twitter.com/jasonlong)\n- Online Voxel Builder: http://ngryman.sh/obelisk-buildr by [@ngryman](https://twitter.com/ngryman)\n- Snake Game: http://codepen.io/sfaedo/full/AwGjg (Use &larr; &rarr; Key) by [@Sebastian Faedo](http://codepen.io/sfaedo)\n- Mario 3D voxel: http://jsdo.it/cx20/bQtQ by [@cx20](https://twitter.com/cx20)\n- Conway's Game of Life: http://codepen.io/safx/full/Ewcym by [@safxdev](https://twitter.com/safxdev)\n- Node Server-side Image Rendering with [node-canvas](https://github.com/learnboost/node-canvas): [Github Project URL](https://github.com/pose/node-obelisk-example) by [@pose](https://github.com/pose)\n- Animations with Angular.js: [Github Project URL](https://github.com/Wildhoney/ngObelisk) by [@Wildhoney](https://github.com/Wildhoney)\n- Perlin Noise Map: http://codepen.io/slobaum/pen/zhmFL by [@slobaum](https://twitter.com/slobaum)\n- [More on CodePen](http://codepen.io/search/pens/?depth=everything&limit=all&order=newest&page=1&q=obelisk.js&show_forks=false)\n\n## Getting started\n\nSimply include obelisk.js in your project\n```html\n<script src=\"//path/to/obelisk.min.js\"></script>\n```\nIn JavaScript\n```javascript\n// create a canvas 2D point for pixel view world\nvar point = new obelisk.Point(200, 200);\n\n// create view instance to nest everything\n// canvas could be either DOM or jQuery element\nvar pixelView = new obelisk.PixelView(canvas, point);\n\n// create cube dimension and color instance\nvar dimension = new obelisk.CubeDimension(80, 100, 120);\nvar gray = obelisk.ColorPattern.GRAY;\nvar color = new obelisk.CubeColor().getByHorizontalColor(gray);\n\n// build cube with dimension and color instance\nvar cube = new obelisk.Cube(dimension, color, true);\n\n// render cube primitive into view\npixelView.renderObject(cube);\n```\nFor more details, check the tutorial [part 1](https://github.com/nosir/obelisk.js/wiki/Tutorial-Part-1%3A-To-build-the-first-cube): To build the first cube, or [try the code yourself](http://jsfiddle.net/nosir/ygWEW/)\n\n## Tutorials\nStep by step:\n- Part 1: [To build the first cube](https://github.com/nosir/obelisk.js/wiki/Tutorial-Part-1%3A-To-build-the-first-cube)\n- Part 2: [Coordinate system](https://github.com/nosir/obelisk.js/wiki/Tutorial-Part-2%3A-Coordinate-system)\n- Part 3: [Primitives](https://github.com/nosir/obelisk.js/wiki/Tutorial-Part-3%3A-Primitives)\n- Part 4: [Color](https://github.com/nosir/obelisk.js/wiki/Tutorial-Part-4%3A-Color)\n- Part 5: [Dimension](https://github.com/nosir/obelisk.js/wiki/Tutorial-Part-5%3A-Dimension)\n\nSample code for building all primitives:\n- Cube: http://jsfiddle.net/nosir/ygWEW/\n- Pyramid : http://jsfiddle.net/nosir/ZVURu/\n- LineX, LineY, LineZ: http://jsfiddle.net/nosir/gnbqwr2L/\n- Brick: http://jsfiddle.net/nosir/6MuVr/\n- SideX, SideY: http://jsfiddle.net/nosir/bLsew/\n- SlopeNorth, SlopeEast, SlopeSouth, SlopeEast: http://jsfiddle.net/nosir/28B9G/\n\n## Development (Browser)\n### Browserify\n\nObelisk.js can be used from [browserify](https://github.com/substack/node-browserify) project. Simply:\n\n```sh\n$ npm install obelisk.js\n```\n\nIn your JavaScript\n\n```javascript\nvar obelisk = require('obelisk.js');\n\n// Now you can do the same as above\n```\n\n### Want to build the project locally?\n\n```\n$ git clone https://github.com/nosir/obelisk.js.git\n$ npm install\n```\n\nBuild\n```\n$ gulp build\n```\n\nDevelop\n```\n$ gulp browserify:watch\n```\n\n## Advanced Usage (Node.js)\n### Node.js\n\nAlso you can use it in your Node.js canvas project\n\n> 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 the `canvas` dependency explicitly on your project:\n\n```sh\n$ npm install canvas\n```\n\n```sh\n$ npm install obelisk.js\n```\n\nIn your JavaScript\n\n```js\n// load Node Canvas dependency\nvar Canvas = require('canvas');\n\n// load obelisk.js module\n// here we need the Canvas as a module parameter\nvar obelisk = require('obelisk.js')(Canvas);\n\n// create a Node Canvas instance\nvar canvas = new Canvas(600,450);\n\n// Use obelisk the same way you will use it in the browser ...\n\n// Save canvas to a file\ncanvas.createPNGStream().pipe(fs.createWriteStream('./figure.png'));\n```\n\nFor more details, check the [Node.js Canvas example](https://github.com/pose/node-obelisk-example).\n\n## Get in Touch\n\n- Build any cool stuff? Please feel free to add it here: [User Contributed Showcase](https://github.com/nosir/obelisk.js/wiki/User-Contributed-Showcase)\n- Bugs & Suggestions: [open an issue](https://github.com/nosir/obelisk.js/issues)\n- Twitter: [@rison](https://twitter.com/rison)\n\n## Changelog\n\nSee details here: [release notes](https://github.com/nosir/obelisk.js/releases).\n\n## References\nPixel 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.\n\n- Isometric projection http://en.wikipedia.org/wiki/Isometric_projection\n- Flood fill implementation http://en.wikipedia.org/wiki/Flood_fill\n- Pixel grapic - Eboy http://eboy.com\n\n## License\n\nObelisk.js is released under the [MIT License](http://opensource.org/licenses/MIT)\n","versions":{"1.0.4":{"name":"obelisk.js","version":"1.0.4","description":"JavaScript Engine for Building Pixel Isometric Element with HTML5 Canvas","main":"./nodeshiv/obelisk-nodeshiv.js","dependencies":{"grunt":"~0.4.1"},"devDependencies":{"grunt-contrib-watch":"*","grunt-contrib-concat":"*","grunt-contrib-uglify":"*"},"scripts":{"test":"grunt test","start":""},"repository":{"type":"git","url":"https://github.com/rison/obelisk.js.git"},"keywords":["obelisk","javascript","canvas","pixel","isometric","game","graphic","art","2.5D"],"author":{"name":"max huang risonhuang@gmail.com"},"license":"MIT","gitHead":"23cba75da3465a1d207a9ffdfb20050bf9de2fdc","bugs":{"url":"https://github.com/rison/obelisk.js/issues"},"homepage":"https://github.com/rison/obelisk.js","_id":"obelisk.js@1.0.4","dist":{"shasum":"08abfa08a5da489661f6e60758abf6eac9f4390f","tarball":"https://registry.npmjs.org/obelisk.js/-/obelisk.js-1.0.4.tgz","integrity":"sha512-rXH8uqBTy68XK4t7NXSTZJUH3w6Tq3Qh3LCW2Kxg1z1BFs4p4mHjWy1f1v9nl9KBu/yJlMRxDa9kT3mMpZ7RIA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZLHoxOlA0J48eP2PFPyd3iLYhDi//Hn62sE9Nb4RbmQIhAIMjV+E3XLMl/sfP8BdwHcE2dtuSDsLebmyQRi6d63Wo"}]},"_from":"obelisk.js","_npmVersion":"1.4.6","_npmUser":{"name":"nosir","email":"risonhuang@gmail.com"},"maintainers":[{"name":"nosir","email":"risonhuang@gmail.com"}]},"1.1.0":{"name":"obelisk.js","version":"1.1.0","description":"JavaScript Engine for Building Pixel Isometric Element with HTML5 Canvas","main":"./nodeshiv/obelisk-nodeshiv.js","browser":"./build/obelisk.js","dependencies":{"grunt":"~0.4.1","browserify-shim":"^3.4.1"},"devDependencies":{"grunt-contrib-watch":"*","grunt-contrib-concat":"*","grunt-contrib-uglify":"*","browserify":"^3.41.0"},"scripts":{"test":"grunt test","browserify-test":"browserify . -r ./build/obelisk.js:obelisk.js > build/obelisk.brfy.js","start":""},"browserify":{"transform":["browserify-shim"]},"browserify-shim":{"./build/obelisk.js":"obelisk"},"repository":{"type":"git","url":"https://github.com/rison/obelisk.js.git"},"keywords":["obelisk","javascript","canvas","pixel","isometric","game","graphic","art","2.5D"],"author":{"name":"max huang risonhuang@gmail.com"},"license":"MIT","gitHead":"23cba75da3465a1d207a9ffdfb20050bf9de2fdc","bugs":{"url":"https://github.com/rison/obelisk.js/issues"},"homepage":"https://github.com/rison/obelisk.js","_id":"obelisk.js@1.1.0","dist":{"shasum":"485968911e6da45a28b8bd155f18f01b4ecf8f22","tarball":"https://registry.npmjs.org/obelisk.js/-/obelisk.js-1.1.0.tgz","integrity":"sha512-1l5zgvWqa2nJP7q8U8dvfZdFunJesS+zx03GTbBgVFP6fSyTfJYk2xZP/6KJ6QfdtA+p1Ud9mlWSSbUwdlrQDg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC8uqM+xtechsF0zs147bLBEF3KtJpMvAg33Af0wA2rtAiEAhAFhNWDdZqL1hVdX6a6lTR4k9VvWdd1q+kvRL3+rfaY="}]},"_from":".","_npmVersion":"1.4.6","_npmUser":{"name":"nosir","email":"risonhuang@gmail.com"},"maintainers":[{"name":"nosir","email":"risonhuang@gmail.com"}]},"1.2.0":{"name":"obelisk.js","title":"obelisk.js","description":"JavaScript Library for Building Pixel Isometric Element with HTML5 Canvas","keywords":["obelisk","javascript","canvas","pixel","isometric","game","graphic","art","2.5D"],"version":"1.2.0","author":{"name":"Max Huang","email":"risonhuang@gmail.com","url":"http://github.com/nosir"},"license":"MIT","bugs":{"url":"https://github.com/nosir/obelisk.js/issues"},"homepage":"https://github.com/nosir/obelisk.js","docs":"https://github.com/nosir/obelisk.js/blob/master/README.md","dependencies":{},"devDependencies":{"browserify":"^13.0.0","errorify":"^0.3.1","glob":"^7.0.3","gulp":"^3.9.1","gulp-header":"^1.7.1","gulp-rename":"^1.2.2","gulp-rimraf":"^0.2.0","gulp-uglify":"^1.5.3","require-dir":"^0.3.0","run-sequence":"^1.1.5","vinyl-source-stream":"^1.1.0","watchify":"^3.7.0"},"main":"src/obelisk.js","repository":{"type":"git","url":"https://github.com/rison/obelisk.js.git"},"gitHead":"6cb66443e3b28b2184a666649190bd1687bdd7b2","_id":"obelisk.js@1.2.0","scripts":{},"_shasum":"f081a6ad67f4168128b31b8387926add667a6862","_from":".","_npmVersion":"1.4.28","_npmUser":{"name":"nosir","email":"risonhuang@gmail.com"},"maintainers":[{"name":"nosir","email":"risonhuang@gmail.com"}],"dist":{"shasum":"f081a6ad67f4168128b31b8387926add667a6862","tarball":"https://registry.npmjs.org/obelisk.js/-/obelisk.js-1.2.0.tgz","integrity":"sha512-AwSPNgSW3AgzmzXrIB5mzXv+dII3yHVqqUW4SKvASj5FE5IkaDb/M7uITIYHSlrNzz8g8NiNLX8gd43QIdCjvw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH2bwhH6UTKSo2dJ2gfED1j3qR++/L5RLhxbTJA9j0fVAiAiYOpw7UZ+ObJFHNteqTYLAt35Y3NNoqFO7wKDwjoKgw=="}]},"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/obelisk.js-1.2.0.tgz_1460803606276_0.03250356903299689"}},"1.2.1":{"name":"obelisk.js","title":"obelisk.js","description":"JavaScript Library for Building Pixel Isometric Element with HTML5 Canvas","keywords":["obelisk","javascript","canvas","pixel","isometric","game","graphic","art","2.5D"],"version":"1.2.1","author":{"name":"Max Huang","email":"risonhuang@gmail.com","url":"http://github.com/nosir"},"license":"MIT","bugs":{"url":"https://github.com/nosir/obelisk.js/issues"},"homepage":"https://github.com/nosir/obelisk.js","docs":"https://github.com/nosir/obelisk.js/blob/master/README.md","dependencies":{},"devDependencies":{"browserify":"^13.0.0","errorify":"^0.3.1","glob":"^7.0.3","gulp":"^3.9.1","gulp-header":"^1.7.1","gulp-rename":"^1.2.2","gulp-rimraf":"^0.2.0","gulp-uglify":"^1.5.3","require-dir":"^0.3.0","run-sequence":"^1.1.5","vinyl-source-stream":"^1.1.0","watchify":"^3.7.0"},"main":"src/obelisk.js","repository":{"type":"git","url":"https://github.com/rison/obelisk.js.git"},"scripts":{"test":"gulp build"},"gitHead":"0e52c8c39443b497c114e4e966d9c4b739e10bfe","_id":"obelisk.js@1.2.1","_shasum":"c3c71c0598399b7bb744288506b121175a2e18db","_from":".","_npmVersion":"1.4.28","_npmUser":{"name":"nosir","email":"risonhuang@gmail.com"},"maintainers":[{"name":"nosir","email":"risonhuang@gmail.com"}],"dist":{"shasum":"c3c71c0598399b7bb744288506b121175a2e18db","tarball":"https://registry.npmjs.org/obelisk.js/-/obelisk.js-1.2.1.tgz","integrity":"sha512-M1pCCgMGS1S7vECC94uQhDxEc3Tp1mFEDLbPsjrib+V6cy7yJzCgygmW/xdfSh5RWXMyyk+EgUXoYSGQtKskSg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE0ONdAL4LMFvAbMVpr6SjCXiyA0SyMOvoPoxAIFEbwmAiEAgtYzA7UYfcaCtI/d/Eey1MJlbaDjZpO7qeedxYit85g="}]},"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/obelisk.js-1.2.1.tgz_1462601182631_0.056771380826830864"}},"1.2.2":{"name":"obelisk.js","title":"obelisk.js","description":"JavaScript Library for Building Pixel Isometric Element with HTML5 Canvas","keywords":["obelisk","javascript","canvas","pixel","isometric","game","graphic","art","2.5D"],"version":"1.2.2","author":{"name":"Max Huang","email":"risonhuang@gmail.com","url":"http://github.com/nosir"},"license":"MIT","bugs":{"url":"https://github.com/nosir/obelisk.js/issues"},"homepage":"https://github.com/nosir/obelisk.js","docs":"https://github.com/nosir/obelisk.js/blob/master/README.md","dependencies":{},"devDependencies":{"browserify":"^13.0.0","errorify":"^0.3.1","glob":"^7.0.3","gulp":"^3.9.1","gulp-header":"^1.7.1","gulp-rename":"^1.2.2","gulp-rimraf":"^0.2.0","gulp-uglify":"^1.5.3","require-dir":"^0.3.0","run-sequence":"^1.1.5","vinyl-source-stream":"^1.1.0","watchify":"^3.7.0"},"main":"src/obelisk.js","repository":{"type":"git","url":"https://github.com/nosir/obelisk.js.git"},"scripts":{"test":"gulp build"},"gitHead":"b60e5f84de10453522c04293d05f0765dae3f0ea","_id":"obelisk.js@1.2.2","_shasum":"a4bfd8f8bd05506fd47ca6a53c7260b702a8b059","_from":".","_npmVersion":"1.4.28","_npmUser":{"name":"nosir","email":"risonhuang@gmail.com"},"maintainers":[{"name":"nosir","email":"risonhuang@gmail.com"}],"dist":{"shasum":"a4bfd8f8bd05506fd47ca6a53c7260b702a8b059","tarball":"https://registry.npmjs.org/obelisk.js/-/obelisk.js-1.2.2.tgz","integrity":"sha512-Q9YGidW6RTOFjWkFFeHhIPaiDfhstlTulgyc+k2AZF0YRDo+cT1hCuiUR4jHoeWV3NK+cJSXlANBz7H/daOrSA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0GCfRBKqLW3s1HDcHTbmGeo9qmlSF7TKlKUPPCgIMBAIhAJXwloin0GurOSmqpoHBloBPUYRt5lS9B1cdGHxN/6Yt"}]},"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/obelisk.js-1.2.2.tgz_1462975508359_0.4922984139993787"}}},"homepage":"https://github.com/nosir/obelisk.js","keywords":["obelisk","javascript","canvas","pixel","isometric","game","graphic","art","2.5D"],"repository":{"type":"git","url":"https://github.com/nosir/obelisk.js.git"},"author":{"name":"Max Huang","email":"risonhuang@gmail.com","url":"http://github.com/nosir"},"bugs":{"url":"https://github.com/nosir/obelisk.js/issues"},"license":"MIT","readmeFilename":"README.md","users":{"javiercejudo":true}}