Raycasting tutorial video(youtube)(code html)

Pakz · July 25, 2022, 08:49:19

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.

Code Select


<!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 · July 25, 2022, 10:16:03

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.

darXpace · July 25, 2022, 19:17:04

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

Pakz · July 25, 2022, 19:41:56

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 · July 29, 2022, 21:26:03

MonkeyXFree84f -> bananas -> skn3 -> monkenstein

Another raycaster to learn from ^

SyntaxBomb - Indie Coders

Raycasting tutorial video(youtube)(code html)

Pakz

Steve Elliott

darXpace

Pakz

darXpace