Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Raycaster
ID	5666916494376960
Created	6 years ago, 1549747654808
Updated	6 years ago, 1549810458328
Code	/ Tutorial Here: https://lodev.org/cgtutor/raycasting.html I adapted and improved his code to make it more understandable and usable on KA as it was originally written in C++ / var keys = []; var keyPressed = function () { keys[keyCode] = true; }; var keyReleased = function () { keys[keyCode] = false; }; var Raycaster = function() { this.screenWidth = 400; this.screenHeight = 400; this.texWidth = 64; this.texHeight = 64; this.mapWidth = 24; this.mapHeight = 24; this.worldMap = [ [4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,7,7,7,7,7,7,7,7], [4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,7,0,0,0,0,0,0,7], [4,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,7], [4,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,7], [4,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,7,0,0,0,0,0,0,7], [4,0,4,0,0,0,0,5,5,5,5,5,5,5,5,5,7,7,0,7,7,7,7,7], [4,0,5,0,0,0,0,5,0,5,0,5,0,5,0,5,7,0,0,0,7,7,7,1], [4,0,6,0,0,0,0,5,0,0,0,0,0,0,0,5,7,0,0,0,0,0,0,8], [4,0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,7,7,7,1], [4,0,8,0,0,0,0,5,0,0,0,0,0,0,0,5,7,0,0,0,0,0,0,8], [4,0,0,0,0,0,0,5,0,0,0,0,0,0,0,5,7,0,0,0,7,7,7,1], [4,0,0,0,0,0,0,5,5,5,5,0,5,5,5,5,7,7,7,7,7,7,7,1], [6,6,6,6,6,6,6,6,6,6,6,0,6,6,6,6,6,6,6,6,6,6,6,6], [8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4], [6,6,6,6,6,6,0,6,6,6,6,0,6,6,6,6,6,6,6,6,6,6,6,6], [4,4,4,4,4,4,0,4,4,4,6,0,6,2,2,2,2,2,2,2,3,3,3,3], [4,0,0,0,0,0,0,0,0,4,6,0,6,2,0,0,0,0,0,2,0,0,0,2], [4,0,0,0,0,0,0,0,0,0,0,0,6,2,0,0,5,0,0,2,0,0,0,2], [4,0,0,0,0,0,0,0,0,4,6,0,6,2,0,0,0,0,0,2,2,0,2,2], [4,0,6,0,6,0,0,0,0,4,6,0,0,0,0,0,5,0,0,0,0,0,0,2], [4,0,0,5,0,0,0,0,0,4,6,0,6,2,0,0,0,0,0,2,2,0,2,2], [4,0,6,0,6,0,0,0,0,4,6,0,6,2,0,0,5,0,0,2,0,0,0,2], [4,0,0,0,0,0,0,0,0,4,6,0,6,2,0,0,0,0,0,2,0,0,0,2], [4,4,4,4,4,4,4,4,4,4,1,1,1,2,2,2,2,2,2,3,3,3,3,3] ]; this.posX = 22; this.posY = 11.5; this.dirX = -1; this.dirY = 0; this.planeX = 0; this.planeY = 0.66; this.time = 0; this.oldTime = 0; this.textures = [[], [], [], [], [], [], [], []]; }; Raycaster.prototype.loadTextures = function() { var texWidth = this.texWidth; var texHeight = this.texHeight; var textures = this.textures; for(var x = 0; x < texWidth; x++){ for(var y = 0; y < texHeight; y++){ var xorcolor = (x * 256 / texWidth) ^ (y * 256 / texHeight); var ycolor = y * 256 / texHeight; var xycolor = y * 128 / texHeight + x * 128 / texWidth; textures[0][texWidth * y + x] = 65536 * 254 * (x !== y && x !== texWidth - y); textures[1][texWidth * y + x] = xycolor + 256 * xycolor + 65536 * xycolor; textures[2][texWidth * y + x] = 256 * xycolor + 65536 * xycolor; textures[3][texWidth * y + x] = xorcolor + 256 * xorcolor + 65536 * xorcolor; textures[4][texWidth * y + x] = 256 * xorcolor; textures[5][texWidth * y + x] = 65536 * 192 * (x % 16 && y % 16); textures[6][texWidth * y + x] = 65536 * ycolor; textures[7][texWidth * y + x] = 128 + 256 * 128 + 65536 * 128; } } this.textures = textures; }; Raycaster.prototype.render = function() { var screenWidth = this.screenWidth; var screenHeight = this.screenHeight; var texWidth = this.texWidth; var texHeight = this.texHeight; var mapWidth = this.mapWidth; var mapHeight = this.mapHeight; var worldMap = this.worldMap; var posX = this.posX; var posY = this.posY; var dirX = this.dirX; var dirY = this.dirY; var planeX = this.planeX; var planeY = this.planeY; var textures = this.textures; if(!loadPixels) {return;} loadPixels(); if(!imageData \|\| !imageData.data) {return;} var pix = imageData.data; for(var x = 0;x < width;x++) { // calculate plane position and direction var cameraX = 2 * x / (width) - 1; var rayDirX = dirX + planeX * cameraX; var rayDirY = dirY + planeY * cameraX; // which box of the map we're in // credit to The#1PikachuBasePropellent @TN1PBP for helping me var mapX = ~~posX; var mapY = ~~posY; // length of ray from current position to next x or y-side var sideDistX; var sideDistY; // length of ray from one x or y-side to next x or y-side var deltaDistX = abs(1 / rayDirX); var deltaDistY = abs(1 / rayDirY); var perpWallDist; // what direction to step in x or y-direction (either +1 or -1) var stepX; var stepY; var hit = 0; // was there a wall hit? var side; // was a NS or a EW wall hit? // calculate step and initial sideDist if (rayDirX < 0) { stepX = -1; sideDistX = (posX - mapX) * deltaDistX; } else { stepX = 1; sideDistX = (mapX + 1 - posX) * deltaDistX; } if (rayDirY < 0) { stepY = -1; sideDistY = (posY - mapY) * deltaDistY; } else { stepY = 1; sideDistY = (mapY + 1 - posY) * deltaDistY; } // perform DDA while (hit === 0) { // jump to next map square, OR in x-direction, OR in y-direction if (sideDistX < sideDistY) { sideDistX += deltaDistX; mapX += stepX; side = 0; } else { sideDistY += deltaDistY; mapY += stepY; side = 1; } // Check if ray has hit a wall if (worldMap[mapX][mapY] > 0) {hit = 1;} } // Calculate distance projected on camera direction (Euclidean distance will give fisheye effect!) if (side === 0) { perpWallDist = (mapX - posX + (1 - stepX) / 2) / rayDirX; } else { perpWallDist = (mapY - posY + (1 - stepY) / 2) / rayDirY; } // Calculate height of line to draw on screen var lineHeight = ~~(height / perpWallDist); // calculate lowest and highest pixel to fill in current stripe var drawStart = ~~(-lineHeight / 2 + height / 2); if(drawStart < 0) {drawStart = 0;} var drawEnd = ~~(lineHeight / 2 + height / 2); if(drawEnd >= height) {drawEnd = height - 1;} // texturing calculations var texNum = worldMap[mapX][mapY] - 1; //1 subtracted from it so that texture 0 can be used! // calculate value of wallX var wallX; // where exactly the wall was hit if(side === 0) { wallX = posY + perpWallDist * rayDirY; } else { wallX = posX + perpWallDist * rayDirX; } wallX -= ~~(wallX); // x coordinate on the texture var texX = ~~(wallX * texWidth); if(side === 0 && rayDirX > 0) {texX = texWidth - texX - 1;} if(side === 1 && rayDirY < 0) {texX = texWidth - texX - 1;} for(var y = drawStart;y < drawEnd;y++) { var d = y - (height0.5) + (lineHeight0.5); var texY = ~~(((d * texHeight) / lineHeight)); var Color = textures[texNum][texHeight * (texY) + (texX)]; if(side === 1){ Color = (Color >> 1) & 8355711; } var index = (~~x + (~~y * width)) << 2; pix[index] = Color>>16 & 255; pix[index + 1] = Color>>8 & 255; pix[index + 2] = Color & 255; } / Floor and Ceiling casting / // x, y position of the floor texel at the bottom of the wall var floorXWall, floorYWall; // 4 different wall directions possible if(side === 0 && rayDirX > 0) { floorXWall = mapX; floorYWall = mapY + wallX; } else if(side === 0 && rayDirX < 0) { floorXWall = mapX + 1; floorYWall = mapY + wallX; } else if(side === 1 && rayDirY > 0) { floorXWall = mapX + wallX; floorYWall = mapY; } else { floorXWall = mapX + wallX; floorYWall = mapY + 1; } var distWall, distPlayer, currentDist; distWall = perpWallDist; distPlayer = 0; // Becomes < 0 when the integer overflows if (drawEnd < 0) {drawEnd = height;} // Draw the floor from drawEnd to the bottom of the screen for(var y = drawEnd + 1; y < height; y++) { // You could make a small lookup table for this instead currentDist = height / (2 * y - height); var weight = (currentDist - distPlayer) / (distWall - distPlayer); var currentFloorX = weight * floorXWall + (1 - weight) * posX; var currentFloorY = weight * floorYWall + (1 - weight) * posY; var floorTexX, floorTexY; floorTexX = ~~(currentFloorX * texWidth) % texWidth; floorTexY = ~~(currentFloorY * texHeight) % texHeight; var floorIndex = (~~x + (~~y * width)) << 2; var ceilingIndex = (~~x + ((height - ~~y) * width)) << 2; var floorColor = (textures[3][texWidth * floorTexY + floorTexX] >> 1) & 8355711; var ceilingColor = textures[6][texWidth * floorTexY + floorTexX]; // Floor pix[floorIndex] = floorColor>>16 & 255; pix[floorIndex + 1] = floorColor>>8 & 255; pix[floorIndex + 2] = floorColor & 255; // Ceiling (symmetrical) pix[ceilingIndex] = ceilingColor>>16 & 255; pix[ceilingIndex + 1] = ceilingColor>>8 & 255; pix[ceilingIndex + 2] = ceilingColor & 255; } } updatePixels(); }; Raycaster.prototype.update = function() { var posX = this.posX; var posY = this.posY; var dirX = this.dirX; var dirY = this.dirY; var planeX = this.planeX; var planeY = this.planeY; var worldMap = this.worldMap; var time = this.time; var oldTime = this.oldTime; // speed modifers oldTime = time; time = millis(); var frameTime = (time - oldTime) / 1000; // println(1.0 / frameTime); var moveSpeed = frameTime * 5; var rotSpeed = frameTime * 150; var dx = (mouseIsPressed) ? (pmouseX - mouseX)/2 : 0; // move forward if no wall in front of you if(keys[38] \|\| keys[87]) { if(worldMap[~~(posX + dirX * moveSpeed)][~~(posY)] === 0){ posX += dirX * moveSpeed; } if(worldMap[~~(posX)][~~(posY + dirY * moveSpeed)] === 0){ posY += dirY * moveSpeed; } } // move backwards if no wall behind you if(keys[40] \|\| keys[83]) { if(worldMap[~~(posX - dirX * moveSpeed)][~~(posY)] === 0) { posX -= dirX * moveSpeed; } if(worldMap[~~(posX)][~~(posY - dirY * moveSpeed)] === 0) { posY -= dirY * moveSpeed; } } // move to the right if(keys[39] \|\| keys[68]) { if(worldMap[~~(posX + planeX * moveSpeed)][~~(posY)] === 0){ posX += planeX * moveSpeed; } if(worldMap[~~(posX)][~~(posY + planeY * moveSpeed)] === 0){ posY += planeY * moveSpeed; } } // move to the left if(keys[37] \|\| keys[65]) { if(worldMap[~~(posX - planeX * moveSpeed)][~~(posY)] === 0){ posX -= planeX * moveSpeed; } if(worldMap[~~(posX)][~~(posY - planeY * moveSpeed)] === 0){ posY -= planeY * moveSpeed; } } / Rotate Camera/ // both camera direction and camera plane must be rotated var cnrs = cos(dx); var snrs = sin(dx); var oldDirX = dirX; dirX = dirX * cnrs - dirY * snrs; dirY = oldDirX * snrs + dirY * cnrs; var oldPlaneX = planeX; planeX = planeX * cnrs - planeY * snrs; planeY = oldPlaneX * snrs + planeY * cnrs; this.posX = posX; this.posY = posY; this.dirX = dirX; this.dirY = dirY; this.planeX = planeX; this.planeY = planeY; this.oldTime = oldTime; this.time = time; }; var Raycaster1 = new Raycaster(); Raycaster1.loadTextures(); draw = function() { var ms = millis(); Raycaster1.render(); Raycaster1.update(); fill(255, 0, 0); textSize(15); text(this.__frameRate, 10, 20); text(millis()-ms, 10, 40); };
Folds	10,12,13,15,17,66,67,90,91,289,290,376
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgPqE_cCICgw
Votes	196
Spin-Offs	29
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Diego Perez
Author Name	perezdiego71
Author ID	kaid_1039596616970372531456756
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739400191227
Updated	10 months ago, 1739400199280
Source Deleted	unknown