Coding Challenge #146: Rendering Raycasting

Community Suggested References:

References:

Live Stream Archive:

Related Coding Challenges:

Timestamps:
0:00:00 Introduction
0:02:21 Coding Starts
0:03:15 Creating The Rendering Scene
0:09:22 Adjusting The Perspective
0:11:02 Adding Rotation
0:15:06 Fixing The View and Brightness
0:20:55 Changing The Field of View Dynamically
0:22:44 Small Fixes and Maintenance
0:27:50 Suggestions For Improvements

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

#raycasting #gamedevelopment #2draycasting #raymarching #wolfenstein3draycasting #p5js

[HyperMario]

You can implement weak perspective projection to correct that fish eye effect.
h = 1 / z

[codeforest]

One modification you can make is the addition of mirrors. Select a point, then press space. Then, it will animate the ray moving from point to point with the mirror's effect too.

[Kitulous]

The more I watch this channel, the more I realize that it's a true treasure. Keep it up, Dan! We love you!

[avananana]

I wrote this in Processing Java and then extended it to a very old looking doom-like game. Gotta say that this has been one hella good, interesting and entertaining journey, following your coding challenges and streams. I've learnt a ton and I've loved every part of it. *sends digital hugs*

[clcsqueejy]

Started watching the channel recently as I've taken on a lot of hobby projects recently centered on programming. Love the vids, the energy and excitement you bring to each topic makes everything fun and accessible. But moreover, I wanted to call out your thoroughness with adding links to inspiration, source material, and references in the description. It drives me crazy when video creators talk about some source material, be it other videos, news articles, etc, and fail to link to the source. Thanks for your thoroughness!

[Suctess]

I implemented it for myself, thank you for the inspiration! To correct perspective i derived a formula for h: h = wallHeight * sceneH / (2 * tan(radians(fov / 2)) * scene[i]). Use this instead of your map function.

[akuaku]

When drawing the wall rectangles, you are mapping linearly from the distance to the wall to the height of the rectangle. Instead, you should map linearly from the INVERSE of the distance to the wall to the height of the rectangle.

[AhlQuar]

Thank you for your great work! Here is just one hint: not only the wall height needs to be corrected, but also the horizontal ray distribution is non linear. the angular distribution of your rays is not equal to the horizontal column distribution on screen. The ray angle values need to be projected onto the virtual screen to get the correct x value for each column.

[RayMairlot]

Really hope you take this further. I know you said the intention wasn't to make this more realistic, but it would be interesting to see how far you can take this e.g. textured walls, multiple lights.

[ThinkinThoed]

Long time listener... first time caller! :D Just became a patron at 97% of your goal, hopefully that pushed you over!! (went for the engineer tier, of course! <3)


Thanks for your work on these videos and sharing your knowledge with the world, it's a no-brainer for me to support this type of content!

[Ellehsdee]

My 9 year old son was doing this kinda stuff using the Scratch IDE. He was working off of someone else's project but he was able to grasp the concepts and build maps for his game.

It would be awesome if Dan would make a tutorial series for Scratch. I know my kids would love it. Hell, I'd love it!

[bytespider]

Wolfenstein 3D was magic, and now i know how it worked! So simple in retrospect

[AinurEru]

For anyone interested, Gustavo since then made an AWESOME FREE course detailing the whole real implementation of RayCasting as it were in Wolfestein3D - also using JavasCript and p5.

[jeeaile]

Maybe next you could try to code a Tetris? That should be great I think! Btw you can find all of the rules in the Tetris Guidelines

[lukasaudir]

awesome video!! at 10:30 I really shouted a wow it was just amazing, this is the best channel on youtube! thank you Dan!!

[yourteacher]

I needed exactly this for one of my student's projects. Figured the idea, was struggling with the implementation. Thanks a ton for posting this, top shelf delivery as always.

[kevnar]

This coding challenge + Maze Generation challenge #10 + point-line collision detection = endless fun.

[invalidopinion]

The reason you are getting the fish-eye effect is because the distance calculations give you the radial distance (distance to the point), rather than the straight distance (distance to the linear equation with the slope equal to the perpendicular angle of the player angle). The fix for this is relatively simple as all you need to do is multiply the radial distance by the cosine of the difference of player to ray angles.

TLDR:
Straight Distance = Distance To Point * Cos(Ray Angle - Player Angle)

[flyingtoretilas]

This video gives me so much appreciation for the developers of well-optimized physics engines!!!


I took this code and increased the resolution of the rays and the highest resolution I could get with no lag was about 5.33 rays/degree. Even then, the scene still has some pretty bad aliasing on the walls.


It would be interesting to revisit this video with a focus on optimization.

[skilz]

As for moving the particle around instead of setting it to the mouse location, you can set the particle's default location to the center of the left pane, by dividing the width by 4 in its constructor. Then in your sketch file, you can modify the "keyPress()" function to something like this and make sure you call it in your draw() function before you call particle.show(); ...

function keyPress() {
let pos = particle.pos;

// translation
if ( keyIsPressed == true ) {
if (key == 'a' || keyIsDown(LEFT_ARROW)) { // left
pos.x -= 0.5;
}
if (key == 'd' || keyIsDown(RIGHT_ARROW)) { // right
pos.x += 0.5;
}
if (key == 'w' || keyIsUp(UP_ARROW)) { // up
//pos.y -= 0.5;
particle.move(1);

}
if (key == 's' || keyIsUp(DOWN_ARROW)) { // down
//pos.y += 0.5;
particle.move(-1);
}
particle.update(pos.x, pos.y);

// rotation
if (key == 'e') {
particle.rotate(0.01);
}
if (key == 'q') {
particle.rotate(-0.01);
}
}
}

And this will give you a nice movement and rotation around the scene area. Where the keys 'a', 'd', 'w', and 's' or left, right, up and down arrow keys will move the particle left, right, up, down respectively and the 'e' and 'q' keys will rotate its view left and right respectively.


Now, I tried to add in the functionality of rotating the particle with the mouse instead of updating its position and I wrote this function:

function mouseMove() {
let dx = mouseX - pmouseX;
let dy = mouseY - pmouseY;
let dir =
dir.normalize();
let newDir = createVector(dx, dy);
newDir.normalize();
let theta = acos( dir.dot(newDir) );
return theta; // should return in degrees
}


And I called this in the draw function before calling particle.show(); such as this:





however, there is one caveat with this, it will cause the particle to continuously rotate as if it was a radar beacon.

I think for the above to work correctly, you would have to set the mouses current position to that of the particle and you only want to update the particle's angle or heading, when the mouse does move... Very similar in constructing a Camera Object within a 3D scene for a 1st person view. There's a slight bug in this code, but I haven't quite narrowed it down yet... I'm trying to poll the mouses (x, y)'s current position and find the delta between that and it's previous (x, y). I'm then creating 2 vectors and normalizing them to simplify the equation of the dot product between them to find the angle. I then find the angle between these two vectors. I'm getting the first vector from the particle's current heading and the new vector from the change in the mouse's position (dx, dy). However, as I've said, this is causing it to continuously rotate, and moving the mouse doesn't seem to affect its rotation nor changes its direction... I'll have to go back and look as some of my older projects with Direct X and OpenGL and look at my Camera classes and the update and rendering functions within the Scene class to see how I'm generating them. It's a bit different working with JS as opposed to C++. C++ everything is strongly typed, and using the GLM library makes a lot of the vector and matrix math much simpler.