{"id":18931051,"url":"https://github.com/rendro/canvas-physics","last_synced_at":"2025-04-15T16:32:19.373Z","repository":{"id":18073429,"uuid":"21135083","full_name":"rendro/canvas-physics","owner":"rendro","description":"Canvas particle system playground","archived":false,"fork":false,"pushed_at":"2014-07-04T08:21:37.000Z","size":444,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-04-14T16:04:58.576Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/rendro.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-06-23T17:17:32.000Z","updated_at":"2015-08-18T19:26:25.000Z","dependencies_parsed_at":"2022-09-02T13:10:30.633Z","dependency_job_id":null,"html_url":"https://github.com/rendro/canvas-physics","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/rendro%2Fcanvas-physics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rendro%2Fcanvas-physics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rendro%2Fcanvas-physics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rendro%2Fcanvas-physics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rendro","download_url":"https://codeload.github.com/rendro/canvas-physics/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223679360,"owners_count":17184852,"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-11-08T11:40:18.050Z","updated_at":"2024-11-08T11:40:18.683Z","avatar_url":"https://github.com/rendro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Physics Canvas \n\nBy using the experimental frontend boilerplate and a little self written 2D vector class we built an environment where you can play around with some basic physical laws and built your own little physics world on a canvas. By utilizing the boilerplate which comes already with some really awesome modern technologies, this demo is written all in handy beautiful and readable ecmascript 6 syntactic sugar. Give it a try, you will not regret it!\n\nHere the link if you are interested how the Boilerplate is built: [Experimental Frontend Boilerplate](https://github.com/rendro/experimental-frontend-boilerplate)\n\n## Physical units\n\n**v = velocity**\n\n**a = acceleration**\n\n**t = time**\n\n**s = distance**\n\n**f = Force**\n\n**F = Sum of Forces**\n\n**m = mass (In our Model the mass is always 1 ...)**\n\n# Most important laws:\n(Newtons 1st law of motion)\n\n**F = m*a**\n\nVelocity is the difference in distance divided by the difference in time\n\n**v = ds/dt**\n\nAcceleration is the difference in velocity divided by the difference in time\n\n**a = dv/dt**\n\nwhich results in the following statements also known as the the first law of Newton:\n\n* An object that is at rest will stay at rest unless an external force acts upon it.\u003ccite\u003eNewtons 1st Law \u003c/cite\u003e\n* An object that is in motion will not change its velocity unless an external force acts upon it.\u003ccite\u003eNewtons 1st Law \u003c/cite\u003e\n\n## Creating a world in Physics Canvas\n\n```js\nvar world = new World(document.getElementById('world'));\nworld.setSize(800, 500);\nsetTimeout(() =\u003e world.loop(), 0);\n```\n\n## Constraints\n\nCreate a Constraint ...\n\n```js\nvar constraint = new Constraint \nworld.addConstraint(constraint);\n```\n\nbut be careful this is just the base class. We built you already an example which extends from the base class.\n\n```js\nvar edges = new EdgesConstraint();\nworld.addConstraint(edges);\n```\n\n## Forces:\n\nSome of the forces and entities are not precisely modelled if you compare it to the real world, but for this demonstration it was enough.\n\n# Constant Forces:\n\nWe already built some basic constant forces like wind, gravity or drag. They all look the same and just have different values. The base class is force and all other forces inherit what force has implemented.\n\nWind:\n\n```js\nvar wind = new ConstantForce(new Vec2D(10, 0));\nworld.addForce(wind);\n```\n\n# Position dependent forces:\n\nAbsorber:\n\n```js\nworld.addForce(new Absorber(new Vec2D(180, 340), 500, 10));\n```\n\nAttractor/Distractor:\n\n```js\nworld.addForce(new Attractor(new Vec2D(400, 300), -50));\n```\n\n## Particles\n\nWe implemented already circles, dyingcircles and orbs.\n\n```js\nvar orbConstructor = function(position, velocity) {\n    return new Orb(position, velocity);\n};\n```\n\n## Particle Emitter\n\n```js\nvar e1 = new Emitter(new Vec2D(300, 400), 0, 0, 90, 5, 10, orbConstructor);\nworld.addEntity(e1);\n```\n\n## GUI\n\nTo control and also change the values of the different Units in our modelled world we used the **dat-gui JavaScript Controller Library** which suits perfectly for our purpose, but if want can easily built your own controls.\n\nReference:  \n[dat-gui JavaScript Controller Library](http://code.google.com/p/dat-gui)\n\n\n## How to start?\n\nFirst, you need to install all packages via npm:\n\n```\n$ npm install\n```\n\nStart the server:\n\n```\n$ npm start\n```\n\nThen visit [http://localhost:3000](http://localhost:3000)\n\nIf you want to run the server on a different port:\n\n```\n$ PORT=12345 npm start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frendro%2Fcanvas-physics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frendro%2Fcanvas-physics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frendro%2Fcanvas-physics/lists"}