Raycasting tutorial video(youtube)(code html)

Started by Pakz, July 25, 2022, 08:49:19

Previous topic - Next topic

Pakz

I found these video's on how to program your own raycast engine. The videos are understandable for me. I was able to learn and understand the actual technique. This was voodoo magic for me before this.
In the video they use c++(devc) and opengl. I was able to follow and turn the first part video into javascript/html. (See bottom)

Sage3d is also doing a doom video. This also showed me the voodoo 3d magic. It is actually starting to make sense now. The doom series is still not finished. A quake tutorial is also planned afaik.








<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
</head>
<body bgcolor="black">
<div id="test"></div>
<style>#myCanvas {touch-action: none;}</style>
<canvas id="myCanvas" width="320" height="240" style="border:0px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
//
// Thanks to 3dSage of youtube.
//
// todo : see tutorial of 3dsage.
//
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var map = [
[1,1,1,1,1,1,1,1],
[1,0,0,0,2,0,0,1],
[1,0,0,0,2,0,0,1],
[1,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,1],
[1,0,0,0,0,2,0,1],
[1,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1],
];

var px,py;
px = 200;
py = 200;
pa = 0;
var tw,th;


gameloop=setInterval(doGameLoop,16);

function doGameLoop(){
myCanvas.height = window.innerHeight-32;
myCanvas.width = window.innerWidth-32;
tw = (myCanvas.width/2)/map[0].length;
th = (myCanvas.height)/map.length;
ctx.fillStyle="rgb(0,0,0)";
ctx.fillRect(0,0,c.width,c.height);
ctx.fillStyle="rgb(255,255,255)";
ctx.fillText("Javascript Html canvas example.",10,10);

pa+=0.01;
drawmap();
drawplayer();
castline();
}
//
// This is the last line. It casts a line from the player(camera)
// position. If the ray(or bullet?) hits a wall. You have a distance
// and you draw a line at that point. The distance is a base for the
// height of a wall there.
// A camera view is done by casting lines from left(30 degrees) to right
// (30 degrees). Multiple rays cast thus. L...eye...R
//
// Fish eye fix and tile number for different color.

// Modify(parameter modify) and see what happens.
//
function castline(){
var anglestep = degrees_to_radians(1);
var offs=0;
for(var a=pa-degrees_to_radians(30);a<pa+degrees_to_radians(30);a+=anglestep){
var lx = px+4;
var ly = py+4;
//var a = pa;
var ex,ey;
for(var d=0;d<500;d++){
lx+=Math.cos(a);
ly+=Math.sin(a);
mx = Math.floor(lx/tw);
my = Math.floor(ly/th);
if(mx>=0 && mx<map[0].length && my>=0 && my<map.length){
if(map[my][mx]!=0){
ex = lx;
ey = ly;
var dist=Math.hypot(px+4-ex,py+4-ey);

// fix fish eye effect!
var ca = pa-a;
dist=dist*Math.cos(ca);

// size of your player view     
dist = (tw*myCanvas.height)/(dist);

// Draw raycast line here.
if(map[my][mx]==1){
ctx.strokeStyle='yellow';
}else{
ctx.strokeStyle='red';
}
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo((myCanvas.width/2)+(offs*10),myCanvas.height/2);
ctx.lineTo((myCanvas.width/2)+(offs*10),(myCanvas.height/2)-dist/2);
ctx.stroke();
ctx.strokeStyle='grey';
ctx.beginPath();
ctx.moveTo((myCanvas.width/2)+(offs*10),myCanvas.height/2);
ctx.lineTo((myCanvas.width/2)+(offs*10),myCanvas.height);
ctx.stroke();
break;
}}
}
offs++;
ctx.strokeStyle='yellow';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(px+4,py+4);
ctx.lineTo(ex,ey);
ctx.stroke();
}
}
function drawplayer(){
ctx.fillStyle='red';
ctx.fillRect(px,py,8,8);

}
function drawmap(){

for(var y=0;y<map.length;y++){
for(var x=0;x<map[0].length;x++){
if(map[y][x] == 1){
ctx.fillStyle='yellow';
ctx.fillRect(x*tw,y*th,tw,th);
}
if(map[y][x] == 2){
ctx.fillStyle='red';
ctx.fillRect(x*tw,y*th,tw,th);
}


}}
}
function degrees_to_radians(degrees) {
  return degrees * (Math.PI / 180);
}
function radians_to_degrees(radians) {
return radians * (180 / Math.PI);
}



</script>
</body>
</html>

Steve Elliott

Yeah 3DSage does produce some interesting and easy to follow videos. The Doom one should be good, I've watched the first one and look forward to the rest of the series.

Congrats on  your version.
Win11 64Gb 12th Gen Intel i9 12900K 3.2Ghz Nvidia RTX 3070Ti 8Gb
Win11 16Gb 12th Gen Intel i5 12450H 2Ghz Nvidia RTX 2050 8Gb
Win10/Linux Mint 16Gb 4th Gen Intel i5 4570 3.2GHz, Nvidia GeForce GTX 1050 2Gb
Linux Mint 8Gb Celeron Intel UHD Graphics600
macOS Sequoia 64Gb M4 Max
Spectrum Next 2Mb

darXpace

For those interested in developin' web apps, SpiderBasic has a free version: https://www.spiderbasic.com/download.php

Pakz

#3
I looked at Spiderbasic a while ago. I had missed the free version. I'm used to regular Javascript now though.

I made a whole repo on github on how to get started with examples in javascript and html 5. https://github.com/Pakz001/html5examples

darXpace

MonkeyXFree84f -> bananas -> skn3 -> monkenstein

Another raycaster to learn from ^