Skip to content
0:00 / 0:00

#raycasting#p5.js#javascript

Coding Challenge 145: 2D Raycasting

The Coding Train

1.7M subscribers • 4 videos on Hallway

YouTube

Beginner. No background in the topic needed.

672K views7 years ago2 recommendations

Graphics and audioComputer scienceRenderingAlgorithms

Daniel Shiffman implements a basic 2D raycasting engine with line segment surfaces and vector rays using p5.js.

In this video, I implement a basic ray casting engine with line segment “surfaces” and vector “rays.” The result simulates a light source casting shadows in a 2D canvas. thecodingtrain.com/challenges/145-ray-casting-2d 🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/sketches/Nqsq3DFv- 🎥 Next video: youtube.com/watch?v=vYgIKn7iDH8&list=PLRqwX-V7Uu6ZiZxtDDRCi6… 🎥 All videos: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH References: 🌞 SIGHT & LIGHT by Nicky Case: ncase.me/sight-and-light/ 🌞 2d Visibility from Red Blob Games: redblobgames.com/articles/visibility/ 💾 p5.collide2D: github.com/bmoren/p5.collide2D 🗄 Line-line Intersection: en.wikipedia.org/wiki/Line%E2%80%93line_intersection Videos: 🎥 Coding Adventure: Ray Marching: youtu.be/Cp5WWtMoeKg 🎥 Matrix Math: youtube.com/watch?v=uSzGdfdOoG8 🎥 Coding Challenge: Rendering Ray Casting: youtube.com/watch?v=vYgIKn7iDH8 🔴 Coding Train Live 177: youtu.be/-6iIc6-Y-kk?t=1548s Timestamps: Introduction Coding Starts Creating a Ray Class Casting Rays And Finding Intersections Casting Multiple Rays Adding Collision Detection For Every Ray Multiple Boundaries Moving With Perlin Noise Suggestions For Improvements Editing by Mathieu Blanchette Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: thecodingtrain.com/ 👾 Share Your Creation! thecodingtrain.com/guides/passenger-showcase-guide 🚩 Suggest Topics: github.com/CodingTrain/Suggestion-Box 💡 GitHub: github.com/CodingTrain 💬 Discord: discord.gg/hPuGy2g 💖 Membership: youtube.com/thecodingtrain/join 🛒 Store: standard.tv/codingtrain 📚 Books: amazon.com/shop/thecodingtrain 🖋️ Twitter: twitter.com/thecodingtrain 📸 Instagram: instagram.com/the.coding.train/ 🎥 Coding Challenges: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Intro to Programming: youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA 🔗 p5.js: p5js.org 🔗 p5.js Web Editor: editor.p5js.org/ 🔗 Processing: processing.org 📄 Code of Conduct: github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecodingtrain.com/issues/new

Why it's here

2 people recommend this

What people say. Recommended as an easy-to-follow tutorial for beginners wanting to learn the fundamentals of raycasting.

u/gaggedeggin r/GraphicsProgramming • Recommends

On “Mini-project ideas for computer graphics”

This might help!

u/Overall_Waltz_371in r/GraphicsProgramming • Recommends

On “I want to do Raycasting (like Wolfenstein 3D), but I don't know where to start lol”

The easiest tutorial I found about raycasting was this one, don't forget to see this one before though