{"id":22775244,"url":"https://github.com/than-dev/collision-in-js","last_synced_at":"2025-07-23T02:36:06.705Z","repository":{"id":122461607,"uuid":"422282531","full_name":"than-dev/collision-in-js","owner":"than-dev","description":"Collision detector made with javascript, webpack and babel to development environment and canvas API + analytical math to the app implementation.","archived":false,"fork":false,"pushed_at":"2022-01-02T13:30:50.000Z","size":77,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-03T20:49:52.998Z","etag":null,"topics":["algorithm","babel","data-structures","development","es6","javascript","webpack"],"latest_commit_sha":null,"homepage":"","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/than-dev.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-28T16:43:45.000Z","updated_at":"2022-01-02T13:31:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"a19792ae-4a64-4546-941d-490940896a0e","html_url":"https://github.com/than-dev/collision-in-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/than-dev/collision-in-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/than-dev%2Fcollision-in-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/than-dev%2Fcollision-in-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/than-dev%2Fcollision-in-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/than-dev%2Fcollision-in-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/than-dev","download_url":"https://codeload.github.com/than-dev/collision-in-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/than-dev%2Fcollision-in-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266606974,"owners_count":23955377,"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","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["algorithm","babel","data-structures","development","es6","javascript","webpack"],"created_at":"2024-12-11T18:26:33.650Z","updated_at":"2025-07-23T02:36:06.661Z","avatar_url":"https://github.com/than-dev.png","language":"JavaScript","readme":"\u003cbr\u003e\r\n\r\n### 🐍 Description \u003cbr\u003e\r\n\r\nIt's a simple javascript app, that identify collisions beetween circles.\r\n\r\n\u003cbr\u003e\r\n\r\n### 💮 Usage \u003cbr\u003e\r\n\r\njust run:\r\n\r\n```\r\nyarn start\r\n```\r\n\r\n\u003cbr\u003e\r\n\r\n- The static files (index.html and main.css) are fixed at dist, we just generate the bundle with webpack and babel, that out in main.js (build script);\r\n- The script start serve the webpack, that we can access from localhost:8080.\r\n\r\n\u003cbr\u003e\r\n\r\n### 🏺 See It \u003cbr\u003e\r\n\r\nhttps://user-images.githubusercontent.com/82950902/147786012-43b0c309-7274-4f5f-a6c0-aba04073f787.mp4\r\n\r\n\u003cbr\u003e\r\n\r\n### 🛰️ How does it works \u003cbr\u003e\r\n\r\nBasically we render the screen again on all mouse move with the same generated circles positions and the same background, just updating the cursor circle acordding the mouse coordenates! \u003cbr\u003e\u003cbr\u003e\r\nThe math executed to verify collision basically is: We get the main circle positions (x, y) and remove from each one the related positions (x, y) from the circle that is verifying the collision, after it, we get this results, calc the square root from they^2 and compare if it is less or equal the current circle radius + the main circle radius, visualize:\r\n\r\n```\r\nisOverlaped(circle) {\r\n    const dx = circle.positions.x - this.positions.x;\r\n    const dy = circle.positions.y - this.positions.y;\r\n\r\n    return Math.sqrt(dx * dx + dy * dy) \u003c= this.radius + circle.radius;\r\n}\r\n```\r\n\r\n### 🫀 Author \u003cbr\u003e\r\n\r\nNathan Cotrim - MIT\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthan-dev%2Fcollision-in-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthan-dev%2Fcollision-in-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthan-dev%2Fcollision-in-js/lists"}