Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/aleksandrhovhannisyan/raycasting-js

Demo of 2D and 3D raycasting in JavaScript using an HTML canvas.
https://github.com/aleksandrhovhannisyan/raycasting-js

canvas demoscene gamedev javascript raycasting

Last synced: about 1 month ago
JSON representation

Demo of 2D and 3D raycasting in JavaScript using an HTML canvas.

Host: GitHub
URL: https://github.com/aleksandrhovhannisyan/raycasting-js
Owner: AleksandrHovhannisyan
License: mit
Created: 2024-06-29T00:27:06.000Z (7 months ago)
Default Branch: master
Last Pushed: 2024-11-24T17:32:38.000Z (2 months ago)
Last Synced: 2024-11-24T18:19:53.545Z (2 months ago)
Topics: canvas, demoscene, gamedev, javascript, raycasting
Language: JavaScript
Homepage: https://raycasting-from-scratch.netlify.app/
Size: 261 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# 2D and 3D Raycasting with JavaScript

> Demo of 2D and 3D raycasting using TypeScript and an HTML canvas.

[View live demo](https://raycasting-from-scratch.netlify.app/)

![A top-down 2D scene depicting the player as a black dot with a line pointing in the direction it is facing. A yellow cone of view in front of it intersects with walls.](./public/screenshot.png)

No libraries, all from scratch.

Resources/references:

- [Coding Challenge #145: 2D Raycasting ](https://www.youtube.com/watch?v=TOEi6T2mtHo)
- [Coding Challenge #146: Rendering Raycasting ](https://www.youtube.com/watch?v=vYgIKn7iDH8)

Inspired by one of [tsoding](https://www.twitch.tv/tsoding)'s streams where he implemented a 3D raycaster with canvas:

- [https://github.com/tsoding/raycasting](https://github.com/tsoding/raycasting)

## Running Locally

Prerequisites:

- Node 20+
- Corepack

Steps:

1. Clone the repo.
2. Run `corepack enable`.
3. Run `corepack install`.
4. Run `pnpm install` to install dependencies.

Then run `pnpm dev` to start the dev server. View the app running on `localhost:5173`.