Coding Challenge #145: 2D Raycasting

Channel:
United States The Coding Train
Subscribers:
1,740,000
Published on ● Video Link: https://www.youtube.com/watch?v=TOEi6T2mtHo


Duration: 36:02
596,830 views
14,687

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. https://thecodingtrain.com/challenges/145-ray-casting-2d

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/Nqsq3DFv-

🎥 Next video: https://www.youtube.com/watch?v=vYgIKn7iDH8&list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
🌞 SIGHT & LIGHT by Nicky Case: https://ncase.me/sight-and-light/
🌞 2d Visibility from Red Blob Games: https://www.redblobgames.com/articles/visibility/
💾 p5.collide2D: https://github.com/bmoren/p5.collide2D
🗄 Line-line Intersection: https://en.wikipedia.org/wiki/Line%E2%80%93line_intersection

Videos:
🎥 Coding Adventure: Ray Marching: https://youtu.be/Cp5WWtMoeKg
🎥 Matrix Math: https://www.youtube.com/watch?v=uSzGdfdOoG8
🎥 Coding Challenge: Rendering Ray Casting: https://www.youtube.com/watch?v=vYgIKn7iDH8
🔴 Coding Train Live 177: https://youtu.be/-6iIc6-Y-kk?t=1548s

Timestamps:
0:00:00 Introduction
0:03:34 Coding Starts
0:05:54 Creating a Ray Class
0:09:16 Casting Rays And Finding Intersections
0:19:56 Casting Multiple Rays
0:24:41 Adding Collision Detection For Every Ray
0:26:47 Multiple Boundaries
0:31:23 Moving With Perlin Noise
0:32:41 Suggestions For Improvements

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
📚 Books: https://www.amazon.com/shop/thecodingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new



Other Videos By The Coding Train


2019-05-302.1 Server-side with Node.js - Working with Data and APIs in JavaScript
2019-05-291.6 Refreshing Data with setInterval() - Working with Data and APIs in JavaScript
2019-05-271.5 Mapping Geolocation with Leaflet.js - Working with Data and APIs in JavaScript
2019-05-251.4: JSON - Working with Data and APIs in JavaScript
2019-05-24Live Stream Archive: ITP IMA Spring Show 2019
2019-05-231.3: Graphing with Chart.js - Working With Data & APIs in JavaScript
2019-05-231.2 Tabular Data - Working With Data & APIs in JavaScript
2019-05-171.1: fetch() - Working With Data & APIs in JavaScript
2019-05-13Coding Train Live 178: Neuroevolution Steering Vehicles
2019-05-10Coding Challenge #146: Rendering Raycasting
2019-05-08Coding Challenge #145: 2D Raycasting
2019-05-01Coding Train Live 177: 2D Ray Casting and Ray Marching
2019-04-26Coding Challenge #144: 2D Black Hole Visualization
2019-04-2411.3 Neuroevolution Flappy Bird with TensorFlow.js
2019-04-18Coding Challenge #142: Rubik's Cube Part 3
2019-04-17Coding Train Live 176: Simple 2D Black Hole Simulation and NeuroEvolution with TensorFlow.js
2019-04-15Coding Challenge #142: Rubik's Cube Part 2
2019-04-12Code! Programming with p5.js for Beginners Trailer
2019-04-10Live Stream #175: Rubik's Cube (this time with matrix transformations!)
2019-04-04Coding Challenge #143: Quicksort Visualization
2019-04-03Coding Train Live 174: Rubik's Cube continued...


Tags:
daniel shiffman
coding
the coding train
coding challenge
code challenge
programming challenge
ray casting
game development
2d ray casting
ray marching
ray casting javascript
p5.js
ray casting p5.js
line line intersection
raycasting explained
ray casting algorithm
ray casting tutorial
2d ray casting tutorial
p5.js tutorial
line line intersection algorithm
line line intersection 2d