{"id":13445627,"url":"https://github.com/jdan/isomer","last_synced_at":"2025-04-13T11:40:28.623Z","repository":{"id":15798243,"uuid":"18537651","full_name":"jdan/isomer","owner":"jdan","description":"Simple isometric graphics library for HTML5 canvas","archived":false,"fork":false,"pushed_at":"2022-04-20T14:40:57.000Z","size":611,"stargazers_count":2879,"open_issues_count":27,"forks_count":138,"subscribers_count":82,"default_branch":"master","last_synced_at":"2024-10-29T15:27:14.089Z","etag":null,"topics":["canvas","isometric-graphics"],"latest_commit_sha":null,"homepage":"http://jdan.github.io/isomer","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jdan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-04-07T23:02:18.000Z","updated_at":"2024-10-25T04:51:30.000Z","dependencies_parsed_at":"2022-07-08T06:48:44.126Z","dependency_job_id":null,"html_url":"https://github.com/jdan/isomer","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdan%2Fisomer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdan%2Fisomer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdan%2Fisomer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdan%2Fisomer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdan","download_url":"https://codeload.github.com/jdan/isomer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248709224,"owners_count":21149151,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","isometric-graphics"],"created_at":"2024-07-31T05:00:36.807Z","updated_at":"2025-04-13T11:40:28.604Z","avatar_url":"https://github.com/jdan.png","language":"JavaScript","funding_links":[],"categories":["Libraries","JavaScript"],"sub_categories":["3D libraries"],"readme":"![isomer](https://i.cloudup.com/kQrnH2x5XE-3000x3000.png)\n\nAn isometric graphics library for HTML5 canvas.\n\nView the [official project page](http://jdan.github.io/isomer/) or [try it out](http://jdan.github.io/isomer/playground).\n\n## About\n\n[Isomer](http://jdan.github.io/isomer/) is an easy-to-use graphics library for drawing isometric scenes.\n\n```javascript\nvar Shape = Isomer.Shape;\nvar Point = Isomer.Point;\nvar Color = Isomer.Color;\nvar red = new Color(160, 60, 50);\nvar blue = new Color(50, 60, 160);\n\niso.add(Shape.Prism(Point.ORIGIN, 3, 3, 1));\niso.add(Shape.Pyramid(Point(0, 2, 1)), red);\niso.add(Shape.Prism(Point(2, 0, 1)), blue);\n```\n\n![output](https://i.cloudup.com/V_jJ8lRpZV-300x300.png)\n\n## Getting Started\n\nFirst, grab a copy of Isomer [here](https://github.com/jdan/isomer/releases/latest). Then, include the script wherever you see fit:\n\n```html\n\u003cscript src=\"/path/to/isomer.min.js\"\u003e\u003c/script\u003e\n```\n\nAfter which you'll need to place a canvas in your document that we can later refer to. Be sure to give it a width and height.\n\n```html\n\u003ccanvas width=\"800\" height=\"600\" id=\"art\"\u003e\u003c/canvas\u003e\n```\n\n**Note (Optional):** To improve the look of your canvas on retina displays, declare the width and height of your canvas element as double how you want it to appear. Then style your canvas with CSS to include the original dimensions.\n\n```css\n#art {\n  width: 400px;\n  height: 300px;\n}\n```\n\nAt this point we can finally instantiate an Isomer object. Pass it a reference to your canvas like so:\n\n```javascript\nvar iso = new Isomer(document.getElementById(\"art\"));\n```\n\nNow you're ready to start drawing!\n\n## Build\n\nIsomer uses [Gulp](http://gulpjs.com/) as a build tool. To build the project,\nfirst install the dependencies.\n\n```\n$ npm install\n```\n\nThen run `npm run dist`:\n\n```\n$ npm run dist    # or, alternatively, `gulp dist`\n\n\u003e isomer@0.2.5 dist /Users/jordan/Projects/isomer\n\u003e gulp\n\n[gulp] Using gulpfile ~/Projects/isomer/gulpfile.js\n[gulp] Starting 'dist'...\n[gulp] Version: webpack 1.7.3\n           Asset     Size  Chunks             Chunk Names\n./dist/isomer.js  23.1 kB       0  [emitted]  isomer\n[gulp] Version: webpack 1.7.3\n               Asset     Size  Chunks             Chunk Names\n./dist/isomer.min.js  9.33 kB       0  [emitted]  isomer\n[gulp] Finished 'dist' after 911 ms\n[gulp] Starting 'default'...\n[gulp] Finished 'default' after 6.2 μs\n```\n\nTo generate `isomer.js` and `isomer.min.js` in the `dist/` directory.\n\n## Develop\n\nIsomer is developed using [Webpack](http://webpack.github.io/). Install\ndependencies and build the project like so:\n\n```\n$ npm install\n$ npm run dist\n```\n\n[test/index.html](https://github.com/jdan/isomer/blob/master/test/index.html) contains a basic testing page that draws various shapes. This page will load a unminified bundle with source maps.\n\nThe `test` script (accessible via `npm test`) uses [webpack-dev-server](http://webpack.github.io/docs/webpack-dev-server.html) to automatically rebuild Isomer on any file changes. This script also opens the testing page (located at `http://localhost:2992/webpack-dev-server/`) in your default browser. The testing page includes a live reload script to refresh when Isomer is rebuilt and notify if the code is not conform the styling conventions for Isomer.\n\n```\n$ npm test\n\n\u003e isomer@0.2.5 test /Users/jordan/Projects/isomer\n\u003e gulp test\n\n[Isomer] listening on http://localhost:2992/\nwebpack: wait until bundle finished: /webpack-dev-server/\nHash: ************\nVersion: webpack 1.8.2\nTime: 432ms\n    Asset     Size  Chunks             Chunk Names\nisomer.js  59.5 kB       0  [emitted]  isomer\nchunk    {0} isomer.js (isomer) 20.1 kB [rendered]\n    [0] ./index.js 83 bytes {0} [built]\n    [1] ./js/isomer.js 3.86 kB {0} [built]\n    [2] ./js/canvas.js 729 bytes {0} [built]\n    [3] ./js/color.js 2.68 kB {0} [built]\n    [4] ./js/path.js 3.77 kB {0} [built]\n    [5] ./js/point.js 2.44 kB {0} [built]\n    [6] ./js/shape.js 5.47 kB {0} [built]\n    [7] ./js/vector.js 1.05 kB {0} [built]\nwebpack: bundle is now VALID.\n```\n\n## With node-canvas\n\nIsomer also accepts the canvas provided by [node-canvas](https://github.com/learnboost/node-canvas),\nmeaning you can generate isometric graphics on the command line.\n\n```javascript\nvar Canvas = require('canvas');\nvar canvas = new Canvas(400, 400);\nvar Isomer = require('isomer');   // npm install isomer\nvar fs = require('fs');\nvar out = fs.createWriteStream('output.png');\n\nvar iso = new Isomer(canvas);\niso.add(Isomer.Shape.Prism(Isomer.Point.ORIGIN));\n\ncanvas.pngStream().pipe(out);\n```\n\n## More Info\n\nFor more info, check out the [official project page](http://jdan.github.io/isomer).\n\n[MIT Licensed](https://github.com/jdan/isomer/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdan%2Fisomer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdan%2Fisomer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdan%2Fisomer/lists"}