{"id":18053875,"url":"https://github.com/danielstern/rectangular","last_synced_at":"2025-04-05T08:21:51.588Z","repository":{"id":14722231,"uuid":"17442863","full_name":"danielstern/Rectangular","owner":"danielstern","description":"It's Box2D, It's Angular, It's Totally Square!","archived":false,"fork":false,"pushed_at":"2014-05-06T23:29:52.000Z","size":19548,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-10T15:50:56.162Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danielstern.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-05T14:18:35.000Z","updated_at":"2014-06-05T04:32:39.000Z","dependencies_parsed_at":"2022-08-31T13:01:56.810Z","dependency_job_id":null,"html_url":"https://github.com/danielstern/Rectangular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielstern%2FRectangular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielstern%2FRectangular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielstern%2FRectangular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielstern%2FRectangular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danielstern","download_url":"https://codeload.github.com/danielstern/Rectangular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247307330,"owners_count":20917450,"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":[],"created_at":"2024-10-31T00:08:26.047Z","updated_at":"2025-04-05T08:21:51.541Z","avatar_url":"https://github.com/danielstern.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Rectangular.js\n=====\n\nRectangular.js is a library for creating Angular physics and games that implements Box2DWeb.\n\n\nUsage\n---\n\nFirst, add Rectangular as a dependency of your Angular module.\n\n```javascript\nangular.module(\"myApp\",['Rectangular'])\n```\n\nThe Rectangular module gives you access to a number of useful classes, including\n\n- ngrEnvironment\n- ngrBox\n- ngrStage\n- ngr-box directive\n\n\nClasses\n---\n\n### ngrEnvironment\n\n\nUse ngrEnvironment to initialize a 3D world on a canvas element. \n\n\n```javascript```\n\n// this controller has a canvas element in it\n.controller('myDemoCtrl',function($scope, ngrEnvironment, $compile){\n\n    ngrEnvironment.init($('canvas')[0]);\n\n \t\t// optional\n    ngrEnvironment.debug($('#debugCanvas')[0])\n\n});\n\n// creates an empty world with nothing in it, and outputs the debug information to your debug canvas.\n```\n\n#### Methods\n\n##### ngrEnvironment.init(_canvas:canvas)\n\nCreates the world on the target canvas. Automatically sizes to the canvas. Effectively initialize ngrWorld, ngrLoop and ngrStage.\n\n\n```javascript\n.controller('myDemoCtrl',function($scope, ngrEnvironment){\n\n    ngrEnvironment.init($('canvas')[0]);\n\n    //Mission Accomplished.\n\n});\n```\n\n##### ngrEnvironment.debug(_debugCanvas:canvas)\n\nOutputs the Box2D physics world visualization to a seperate canvas. Very useful for development, as Box2D objects have no avatar by default.\n\n```javascript\n.controller('myDemoCtrl',function($scope, ngrEnvironment){\n\n    ngrEnvironment.init($('canvas')[0]);\n    ngrEnvironment.debug($('#debugCanvas')[0])\n\n    // Debug information is outputting. Of course, you will see nothing.\n\n});\n```\n\n### ngrWorld\n\nContains an instance of a world. Used as an interface for adding and removing objects, as well as accessing the b2World object.\t\n\n#### Methods\n\n##### ngrWorld.addElement(shape:ngShape):b2Body\n\n\nPass this an ngShape object (probably from the ngrBox class) in order to create body, add it to the world, and return an instance of that ody.\n\n```javascript\n.controller('myDemoCtrl',function($scope, ngrEnvironment, ngrWorld) {\n\n    ngrEnvironment.init($('canvas')[0]);\n    ngrEnvironment.debug($('#debugCanvas')[0])\n\n\t\tvar myBox = ngrBox.shape(\"box\",{width:10,height:10});\n\t\tngWorld.addElement(myBox);\n\n});\n```\n\n##### ngrWorld.removeElement(body:b2Body)\n\nPass this a reference to the b2Body that was created when you created an element to destroy that element.\n\n```javascript\n.controller('myDemoCtrl',function($scope, ngrEnvironment, ngrWorld) {\n\n    ngrEnvironment.init($('canvas')[0]);\n    ngrEnvironment.debug($('#debugCanvas')[0])\n\n\t\tvar myBox = ngrBox.shape(\"box\",{width:10,height:10});\n\t\tngWorld.addElement(myBox);\n\n\t\t// and then...\n\t\tngWorld.removeElement(myBox);\n\n});\n```\n\n\n##### ngrWorld.clearAll()\n\nRemoves all elements from a world. Useful if you are making a game, and have started a new level.\n\n```javascript\n.controller('myDemoCtrl',function($scope, ngrEnvironment, ngrWorld) {\n\n    ngrEnvironment.init($('canvas')[0]);\n    ngrEnvironment.debug($('#debugCanvas')[0])\n\n\t\tvar myBox = ngrBox.shape(\"box\",{width:10,height:10});\n\n\t\t// a trio of boxes...\n\t\tngWorld.addElement(myBox);\n\t\tngWorld.addElement(myBox);\n\t\tngWorld.addElement(myBox);\n\n\t\t// and then...\n\t\tngWorld.clearAll();\n\n\t\t// goodbye boxes...\n});\n```\n\n### ngrBox\n\nUse ngrBox to add elements to your world.\n\n```javascript\n.controller('myDemoCtrl',function($scope, ngrEnvironment, ngrWorld){\n\n    ngrEnvironment.init($('canvas')[0]);\n    ngrEnvironment.debug($('#debugCanvas')[0])\n\n    // returns an instance of ngShape\n\t\tvar myCircle = ngrBox.shape(\"ellipse\",{radius:0.5,x:1.2});\n\n\t\t// adds the element to the world and returns a Box2D body\n\t\tngWorld.addElement(myCircle);\n\n});\n```\n\n#### Methods\n\n##### ngrBox.shape(type, options):ngShape\n\nReturns an ngShape object that can be used by ngWorld to addElement.\n\nType currently support two strings, **box** and **circle**.\n\nThe **options** parameter contains an object with various paramaters for configuring the shape.\n\n###### Available options\n\n###### height: Number\n\nDefines the height of the object in meters.\n\n###### width: Number,\n\nDefines the width of the object in meters\n\n###### x: Number,\n\nDefines the x position of the object in the world, in meters,\n\n###### y: Number,\n\nDefines the y position of the object in the world, in meters.\n\n###### [radius: Number]\n\nOptional. Defines the radius of the circle if you are creating a circle, in meters.\n\n###### position : 'dynamic' || 'static'\n\nSpecifies if the box should be dynamic (a sprite) or static (the terrain.)\n\n###### angle : Number\n\nSpecifies the angle of the object, in radians. Useful for terrain.\n\nAnd the rest...\n\n- density : Number,\n- friction : Number ,\n- restitution : Number,\n- linearDamping : Number,\n- angularDamping : Number,\n- gravityScale : Number ,\n\n\n### Directives (not fully supported)\n\nUse directives to add box2d elements with HTML.\n\n\n```html\n\n\u003cdiv ngController='myDemoController'\u003e\n \u003ccanvas ng-stage id='canvas' width='500' height='400' style=\"background-color:pink;\"\u003e\u003c/canvas\u003e\n\n \u003cng-box\u003e\u003c/ng-box\u003e\n\n \u003cng-circle\n    x='0'\n    radius='2'\n    src='img/globe.png'\n \u003e\u003c/ng-circle\u003e\n\u003c/div\u003e\n\n\u003c!-- Creates a box and a circle in the canvas world. --\u003e\n\n\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielstern%2Frectangular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanielstern%2Frectangular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielstern%2Frectangular/lists"}