{"id":18964274,"url":"https://github.com/lorransutter/raycasting-p5","last_synced_at":"2025-07-03T20:34:56.883Z","repository":{"id":114624638,"uuid":"261036750","full_name":"LorranSutter/RayCasting-p5","owner":"LorranSutter","description":"Ray casting implementation using p5js","archived":false,"fork":false,"pushed_at":"2020-06-13T18:23:11.000Z","size":14750,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-02T07:20:40.154Z","etag":null,"topics":["collision-detection","p5js","raycasting"],"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/LorranSutter.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":"2020-05-03T22:58:35.000Z","updated_at":"2020-06-13T18:23:14.000Z","dependencies_parsed_at":"2023-09-15T13:45:08.147Z","dependency_job_id":null,"html_url":"https://github.com/LorranSutter/RayCasting-p5","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LorranSutter/RayCasting-p5","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LorranSutter%2FRayCasting-p5","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LorranSutter%2FRayCasting-p5/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LorranSutter%2FRayCasting-p5/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LorranSutter%2FRayCasting-p5/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LorranSutter","download_url":"https://codeload.github.com/LorranSutter/RayCasting-p5/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LorranSutter%2FRayCasting-p5/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263400990,"owners_count":23461014,"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":["collision-detection","p5js","raycasting"],"created_at":"2024-11-08T14:23:31.795Z","updated_at":"2025-07-03T20:34:56.851Z","avatar_url":"https://github.com/LorranSutter.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Raycasting-p5\nRay casting with reflections implementation using p5js inspired by [Daniel Shiffman](https://github.com/shiffman)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n![Preview](../assets/preview.gif?raw=true)\n\n\u003c/div\u003e\n\n\n## :runner: How to run\n\nJust open index.html file in browser.\n\n## :bulb: What is Ray Casting?\n\nRay casting is a famous approach that aims to detect intersections between casted rays and surfaces. It is used to solve problems in Computer Graphics and Computational Geometry. An well known problem, named [Ray Tracing](https://en.wikipedia.org/wiki/Ray_tracing_(graphics)), employs ray casting to generate images by tracing the light path in a scene. Also it is possible to provide more sophisticated images using physical phenomena such as reflection and refraction.\n\nIn this code, ray casting was implemented and extendend using simple reflection. As it is possible to see in the equation and image below, it aims to define the reflected ray (\u003cb\u003eR\u003c/b\u003e) from the incident ray (\u003cb\u003eI\u003c/b\u003e) through the normal of the surface (\u003cb\u003eN\u003c/b\u003e).\n\n\u003cdiv align=\"center\"\u003e\n\n![formula](https://render.githubusercontent.com/render/math?math=\\vec{R}=\\vec{I}-2(\\vec{N}\\cdot%20\\vec{I})\\vec{N})\n\n\u003cimg src='https://res.cloudinary.com/lorransutter/image/upload/v1588886557/Reflection.svg' height=200\u003e\n\n\u003c/div\u003e\n\n## :book: Resources\n- [The Coding Train - 2D Raycasting](https://www.youtube.com/watch?v=TOEi6T2mtHo) - video of 2D raycasting implementation\n- [Reflection](https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/reflection-refraction-fresnel) - understanding reflection\n\n## :computer: Technologies\n- [P5js](https://p5js.org/) - drawing library\n\n## :cookie: Credits\n- [Daniel Shiffman](https://github.com/shiffman) - provider of The Coding Train\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Florransutter%2Fraycasting-p5","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Florransutter%2Fraycasting-p5","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Florransutter%2Fraycasting-p5/lists"}