Viewing Program

Program Data

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

Title	Infinite 3D World [Raycasting Attempt]
ID	5535595065212928
Created	6 years ago, 1570316029272
Updated	6 years ago, 1570544776803
Code	/ < WHAT > I'm considering in turning this into a game. What do you guys think? Let me know in the comments below. This took me a total of 6 hours to do, and am I grateful. This is my first ever succesful ray caster, alongside a floor caster! I hope you guys enjoy it nonetheless :P < HOW > Arrow keys or WASD to move. T key to toggle among rendering qualities. M key to turn on / off mobile mode. < ABOUT ME > Like this? Considering subscribing to my Khan account here: > bit.ly/SubToAC Want more content? Check out my Khan profile here: > bit.ly/ArrowheadCo / /************************************************************************/ / Set to 2 if you want a fast-running program. Set to 1 for more detail and less speed. Set to 0 for ultra-lag and ultra-high detail. < Up2U UwU > / var reduceLag = 1; / Set to tru if you're on a phone or smth / var mobile = false; / How much walls do you want? Input a value from 0-100 / var wallDensity = 35; /**********************************************************************/ //Status [Meta] Code / @<TASKS> TO DO: 1. CHANGE var im = {}; var loaded = false; TO var im = im \|\| {}; var loaded = loaded \|\| false; 2. REMOVE LOGO SCENE WHEN NOT NEEDED; OTHERWISE, SET SCENE TO "logo" AFTER IMAGE CACHING 3. CHANGE scene = "game" TO scene = "menu" @<CREDITS> Some FPS Game? ARROWHEAD CO. 2019 @<INFO> STARTED : 03 / 10 / 2019 FINISHED : ?? / ?? / ?? RELEASED : ?? / ?? / ?? @<PROGRESS> PROGRESS LOG 03 / 10 / 2019 > Created Player Object > Added player movements and rotations > Created a succesful raycaster (!!) > Wall collisions work (as if the walls are sticky) > Added textures as well to create a more realistic scene > Lighting varies with distance 06 / 10 / 2019 > Added floor and ceiling > Gave them a slight lighting effect > Provided a carpeted texture for the floor > Provided whitish texture for the ceiling > Created two more textures for the walls > Modified the ceiling texture (purplish) > Added mobile user controls > Click to move forward > Slide mouse horizontally to turn > Added toggle between render quality > Made the map infinite > Generation of walls was based on a provided density > Added 2D map rendering > Mini map for easier navigation > Makes rendering faster (reduces width of projection plane) 07 / 10 / 2019 > Prevented infinite for loop errors > Borrowed a code snippet from Iron Programming that deals with this / /PRE-CONS/ //Code //{ //jshint ignore : start var preset = (function(){ preset = function(){ //General smooth(); //Drawing noStroke(); //Text textAlign(CENTER, CENTER); }; preset(); return preset; })(); /USER-INPUT HANDLERS/ //Key Handlers var keys = {}; /GLOBAL VARIABLES AND FUNCTIONS/ //Game Constants var VIEW_W = 400; var VIEW_H = height; var MAX_VIEW = 5; var FOV = 45; //Field of view var RES = 6; //Resolution var BLOCK = 100; //Block size var CELL = 30; //2D map cell size var DIST = VIEW_W / 2 / tan(FOV / 2); //Viewing distance //Thumbnail var thumbnail = ""; /IMAGE LIBRARY*/ //Images var im = {}, loaded = false; var imLib = (function(){ imLib = { sprites : [ { name : "wood", x : 0, y : 0, w : 16, h : VIEW_H, r : 100, c : 0, n : 0, a : 4, load : function(n){ for(var i = n; i < n + 4; i++){ for(var j = 0; j < VIEW_H / 4; j++){ fill(noise(i / 50, j / 20) 200, noise(i / 50, j / 20) * 140, noise(i / 50, j / 20) * 60); rect((i % 4) * 4, j * 4, 4, 4); fill(0, round(noise(i / 2, j / 40)) * 30 + dist(0, j * 4, 0, VIEW_H / 2) / 1.35); rect((i % 4) * 4, j * 4, 4, 4); } } }, }, { name : "steel", x : 0, y : 0, w : 16, h : VIEW_H, r : 100, c : 0, n : 0, a : 4, load : function(n){ for(var i = n; i < n + 4; i++){ for(var j = 0; j < VIEW_H / 4; j++){ fill(noise(i / 5, j / 60) * 200); rect((i % 4) * 4, j * 4, 4, 4); fill(0, round(noise(i / 2, j / 40)) * 30 + dist(0, j * 4, 0, VIEW_H / 2) / 1.35); rect((i % 4) * 4, j * 4, 4, 4); } } }, }, { name : "tiles", x : 0, y : 0, w : 16, h : VIEW_H, r : 100, c : 0, n : 0, a : 4, load : function(n){ for(var i = n; i < n + 4; i++){ for(var j = 0; j < VIEW_H / 4; j++){ fill(0, ((i + j) % 2) * 150 + 60, ((i + j) % 2) * 150 + 80); rect((i % 4) * 4, j * 4, 4, 4); fill(0, round(noise(i / 2, j / 40)) * 30 + dist(0, j * 4, 0, VIEW_H / 2) / 1.35); rect((i % 4) * 4, j * 4, 4, 4); } } }, }, { name : "f_marble", x : 0, y : 0, w : 10, h : 10, r : 2, c : 0, n : 0, a : 1, load : function(n){ fill(255 / 3 * n + 255 / 3, 0, 0); rect(0, 0, 10, 10); }, }, { name : "c_marble", x : 0, y : 0, w : 10, h : 10, r : 100, c : 0, n : 0, a : 4, load : function(n){ fill(random(50) + 70, 50, 80); rect(0, 0, 10, 10); }, }, ], index : 0, count : 0, total : 0, generate : function(){ if(this.index < this.sprites.length){ background(0, 0); var s = this.sprites[this.index]; var name = ""; if(s.r > 1){ name = s.name + s.c; if(im[name] === undefined){ s.load(s.n); im[name] = get(s.x, s.y, s.w, s.h); } s.n += s.a; s.c++; if(s.c < s.r){ this.index--; } } else { name = s.name; if(im[name] === undefined){ s.load(s.n); im[name] = get(s.x, s.y, s.w, s.h); } } this.index++; this.count++; var percentage = round(this.count / this.total * 1000) / 10; background(255, 255); fill(0, 255); textAlign(CENTER, CENTER); textFont(createFont("courier Bold"), 50); text("LOADING", width / 2, height / 2 - 30); textFont(createFont("courier Bold"), 60); text(percentage + "%", width / 2, height / 2 + 25); textFont(createFont("courier Bold"), 30); text(name, width / 2, height / 2 + 140); preset(); } else { loaded = true; } }, }; imLib.total = (function(){ var total = 0; for(var i = 0; i < imLib.sprites.length; i++){ total += imLib.sprites[i].r; } return total; })(); imLib.generate(); return imLib; })(); /GAME ASSETS/ //Map Object var _map = (function(){ _map = {}; //Sets map _map.setup = function(){ //Makes sure player appears in an opening for(var i = -floor(MAX_VIEW / 2); i <= ceil(MAX_VIEW / 2); i++){ this[i] = {}; for(var j = -floor(MAX_VIEW / 2); j <= ceil(MAX_VIEW / 2); j++){ this[i][j] = 0; } } } //Returns an element from the map _map.get = function(x, y){ if(this[y] === undefined){ this[y] = {}; this[y][x] = round(random(0, 50 / (100 - wallDensity))) * round(random(0.5, 3.49)); } else { if(this[y][x] === undefined){ this[y][x] = round(random(0, 50 / (100 - wallDensity))) * round(random(0.5, 3.49)); } } return this[y][x]; }; //Displays 2D version of map _map.display = function(x, y, a){ pushMatrix(); translate(x * CELL + width / 2 + VIEW_W / 2, y * CELL + height - VIEW_H / 2); for(var i = floor(-MAX_VIEW + x); i <= ceil(MAX_VIEW + x); i++){ for(var j = floor(-MAX_VIEW + y); j <= ceil(MAX_VIEW + y); j++){ var type = this.get(floor(i), floor(j)); strokeWeight(2); switch(type){ case 1: stroke(160, 100, 90); break; case 2 : stroke(150); break; case 3 : stroke(50, 255, 255); break; default : noStroke(); break; } noFill(); rect(-i * CELL - CELL, -j * CELL - CELL, CELL, CELL); fill(255, 2550 / pow((dist(i + CELL, j + CELL, x, y) + 1), 2)); rect(-i * CELL - CELL, -j * CELL - CELL, CELL, CELL); noStroke(); } } popMatrix(); pushMatrix(); translate(width / 2 + VIEW_W / 2, height - VIEW_H / 2); rotate(a); fill(255); triangle(-CELL / 4, 0, CELL / 4, CELL / 6, CELL / 4, -CELL / 6); popMatrix(); }; _map.setup(); return _map; })(); //Player Object var player = (function(){ player = { //Initial position x : 0, y : 0, //Previous position prev : { x : 0, y : 0, }, //Maximum visibility max : 5, //Which way the player turns dir : 0, //Which way the player is facing rot : 0, //Which way the player moves vel : 0, //Speed of player when moving rotSpeed : 4, movSpeed : 0.1, }; //Player controls player.control = function(){ if(!mobile){ if(keys[UP] \|\| keys.W \|\| keys.w){ this.vel = 1; } if(keys[DOWN] \|\| keys.S \|\| keys.s){ this.vel = -1; } if(!keys[UP] && !keys[DOWN] && !keys.W && !keys.S && !keys.w && !keys.s){ this.vel = 0; } if(keys[RIGHT] \|\| keys.D \|\| keys.d){ this.dir = 1; } if(keys[LEFT] \|\| keys.A \|\| keys.a){ this.dir = -1; } if(!keys[RIGHT] && !keys[LEFT] && !keys.D && !keys.A && !keys.d && !keys.a){ this.dir = 0; } } else { if(mouseIsPressed){ this.vel = 0.5; this.rot += map(mouseX, 0, VIEW_W, -5, 5); } else { this.vel = 0; } } }; //Animates player player.animate = function(){ this.prev.x = this.x; this.prev.y = this.y; this.displacement = this.vel * this.movSpeed; this.rot += this.dir * this.rotSpeed; var newX = this.x + cos(this.rot) * this.displacement; var newY = this.y + sin(this.rot) * this.displacement; if(_map.get(floor(newX), floor(newY)) === 0){ player.x = newX; player.y = newY; } }; return player; })(); //3D-Graphics Renderer Object var render3D = (function(){ render3D = { rayCount : VIEW_W / RES, surfaces : { walls : {}, floor : {}, ceiling : {}, }, textures : [ "wood", "steel", "tiles", ], }; //Casts an individual ray render3D.cast = function(angle, position){ //Makes sure angle is within 0-360 degrees while(angle < 0){ angle += 360; } angle %= 360; //Determines direction of ray var right = (angle > 270 \|\| angle < 90), up = (angle < 180); //Touch points of hit walls (vertical and horizontal) var touchX1 = 0, touchY1 = 0, touchX2 = 0, touchY2 = 0, touchFX = 0, touchFY = 0; var mapX1 = 0, mapY1 = 0, mapX2 = 0, mapY2 = 0, mapFX = 0, mapFY = 0; //Slope of ray var slope = tan(angle); //Nearest vertical and horizontal walls var distance = { vertical : 99999, horizontal : 99999, minimum : 99999, }; //Floor information var Details = { floor : 0, ceiling : 0, }; //Checks vertical walls var dx = right ? 1 : -1, dy = dx * slope; var x = right ? ceil(player.x) : floor(player.x), y = player.y + (x - player.x) * slope; while(dist(x, y, player.x, player.y) < player.max){ var xMap = floor(x + (right ? 0 : -1)), yMap = floor(y); //If ray hits a vertical wall if(_map.get(xMap, yMap) !== 0){ var distX = x - player.x, distY = y - player.y; distance.vertical = pow(pow(distX, 2) + pow(distY, 2), 0.5); touchX1 = round(x * 10); touchY1 = round(y * 10); mapX1 = xMap; mapY1 = yMap; break; } x += dx; y += dy; } //Check horizontal walls var dy = up ? 1 : -1, dx = dy / slope; var y = up ? ceil(player.y) : floor(player.y), x = player.x + (y - player.y) / slope; while(dist(x, y, player.x, player.y) < player.max){ var xMap = floor(x), yMap = floor(y + (up ? 0 : -1)); //If ray hits a horizontal wall if(_map.get(xMap, yMap) !== 0){ var distX = x - player.x, distY = y - player.y; distance.horizontal = pow(pow(distX, 2) + pow(distY, 2), 0.5); touchX2 = round(x * 10); touchY2 = round(y * 10); mapX2 = xMap; mapY2 = yMap; break; } x += dx; y += dy; } //Gets smaller of two distances distance.minimum = min(distance.vertical, distance.horizontal); if(distance.vertical <= distance.horizontal){ touchFX = touchX1; touchFY = touchY1; mapFX = mapX1; mapFY = mapY1; } else { touchFX = touchX2; touchFY = touchY2; mapFX = mapX2; mapFY = mapY2; } if(distance.minimum !== 99999){ //Defines a texture for new surfaces if(this.surfaces.walls[touchFX] === undefined){ this.surfaces.walls[touchFX] = {}; this.surfaces.walls[touchFX][touchFY] = round(random(99)); } else if(this.surfaces.walls[touchFX][touchFY] === undefined){ this.surfaces.walls[touchFX][touchFY] = round(random(99)); } //Gets texture from image library var tex = this.textures[_map.get(mapFX, mapFY) - 1] + this.surfaces.walls[touchFX][touchFY]; //Displays texture image(im[tex], position + VIEW_W / 2, VIEW_H / 2 - VIEW_H / 2 / distance.minimum, RES, VIEW_H / distance.minimum); fill(0, constrain(pow(distance.minimum, 2) * 11, 0, 255)); rect(position + VIEW_W / 2, VIEW_H / 2 - VIEW_H / 2 / distance.minimum, RES, VIEW_H / distance.minimum); Details.floor = VIEW_H / 2 + VIEW_H / distance.minimum / 2; Details.ceiling = VIEW_H / 2 - VIEW_H / distance.minimum / 2; } else { Details.floor = VIEW_H / 2 + RES; Details.ceiling = VIEW_H / 2 - RES; } return Details; }; //Displays floor render3D.doFloor = function(start, angle, position){ for(var i = start; i < VIEW_H; i += RES){ //Computes distance to pixel of concern var distOnscreen = pow(pow(i - VIEW_H / 2, 2) + pow(position, 2) + pow(DIST, 2), 0.5), distance = VIEW_H / 2 * DIST / (i - VIEW_H / 2) / cos(angle); //Computes angle of ray var Angle = (angle + player.rot) % 360, x = player.x + distance / distOnscreen * cos(Angle), y = player.y + distance / distOnscreen * sin(Angle); x = floor(x); y = floor(y); //Sets texture if(this.surfaces.floor[x] === undefined){ this.surfaces.floor[x] = {}; this.surfaces.floor[x][y] = abs((x + y) % 2); } else { if(this.surfaces.floor[x][y] === undefined){ this.surfaces.floor[x][y] = abs((x + y) % 2); } } var tex = "f_marble" + this.surfaces.floor[x][y]; //Displays texture image(im[tex], position + VIEW_W / 2, i, RES, RES); fill(0, constrain(255 - 100000000 / pow(distance, 2), 0, 255)); rect(position + VIEW_W / 2, i, RES, RES); } }; //Displays ceiling render3D.doCeil = function(start, angle, position){ for(var i = start; i > -RES; i -= RES){ //Computes distance to pixel of concern var distOnscreen = pow(pow(i - VIEW_H / 2, 2) + pow(position, 2) + pow(DIST, 2), 0.5), distance = VIEW_H / 2 * DIST / (VIEW_H / 2 - i) / cos(angle); //Computes angle of ray var Angle = (angle + player.rot) % 360, x = player.x + distance / distOnscreen * cos(Angle), y = player.y + distance / distOnscreen * sin(Angle); var Cx = floor((x - floor(x)) * RES); var Cy = floor((y - floor(y)) * RES); x = floor(x); y = floor(y); //Sets texture if(this.surfaces.ceiling[x + Cx] === undefined){ this.surfaces.ceiling[x + Cx] = {}; this.surfaces.ceiling[x + Cx][y + Cy] = floor( noise(Cx / 4, Cy / 4) * 99); } else { if(this.surfaces.ceiling[x + Cx][y + Cy] === undefined){ this.surfaces.ceiling[x + Cx][y + Cy] = floor( noise(Cx / 4, Cy / 4) * 99); } } var tex = "c_marble" + this.surfaces.ceiling[x + Cx][y + Cy]; //Displays texture image(im[tex], position + VIEW_W / 2, i, RES, RES); fill(0, constrain(255 - 100000000 / pow(distance, 2), 0, 255)); rect(position + VIEW_W / 2, i, RES, RES); } }; //Performs the entire procedure render3D.perform = function(){ fill(0); rect(0, 0, VIEW_W, VIEW_H); for(var i = 0; i < this.rayCount; i++){ var rayPosition = (-this.rayCount / 2 + i) * RES; var rayDistance = pow(pow(rayPosition, 2) + pow(DIST, 2), 0.5); var rayAngle = asin(rayPosition / rayDistance); var Details = this.cast(player.rot + rayAngle, rayPosition); if(reduceLag <= 1){ this.doFloor(Details.floor, rayAngle, rayPosition); } if(reduceLag === 0){ this.doCeil(Details.ceiling, rayAngle, rayPosition); } } }; return render3D; })(); /GAME SCENES/ //Game var Game = function(){ player.control(); player.animate(); if(thumbnail !== "idealize"){ _map.display(player.x, player.y, player.rot); render3D.perform(); } fill(255); rect(VIEW_W, height - 50, width - VIEW_W, 50); rect(VIEW_W, 0, width - VIEW_W, 30); fill(0); textSize(9); textFont(createFont("monospace Bold")); textAlign(CENTER, CENTER); if(!mobile){ text("Arrow / WASD keys to move.", width / 2 + VIEW_W / 2, VIEW_H - 37); } else { text("Click & slide mouse to move.", width / 2 + VIEW_W / 2, VIEW_H - 37); } text("T key to toggle graphics quality.", width / 2 + VIEW_W / 2, VIEW_H - 25); text("M key to turn on / off mobile mode.", width / 2 + VIEW_W / 2, VIEW_H - 13); noFill(); stroke(255); strokeWeight(5); rect(0, 0, VIEW_W, VIEW_H); rect(VIEW_W, 0, width - VIEW_W, height); noStroke(); textAlign(RIGHT, CENTER); text(round(this.__frameRate) + "fps", width - 15, 15); if(thumbnail === "idealize"){ pushMatrix(); background(0); translate(width / 12, 0); scale(5 / 4, 1); render3D.perform(); popMatrix(); } }; /AVOIDS CRASHING/ var prog_resilience = function (n) { var setInf = "KAInfiniteLoopSetTimeout"; if (setInf in this) { if(typeof this[setInf] === "function"){ this[setInf](n \| 0); } } }; /DRAW FUNCTION/ draw = (function(){ draw = function(){ background(0); try{ prog_resilience(25000); if(!loaded){ imLib.generate(); } else { Game(); } } catch(err){ println(err); } }; return draw; })(); /KEY FUNCTIONs/ //keyPressed Function keyPressed = (function(){ keyPressed = function(){ if(key.code !== 65535){ keys[key.toString()] = true; } else { keys[keyCode] = true; } if(keys.T \|\| keys.t){ reduceLag--; if(reduceLag < 0){ reduceLag += 3; } } if(keys.M \|\| keys.m){ mobile = !mobile } if(thumbnail !== "idealize"){ thumbnail += key.toString(); } }; return keyPressed; })(); //keyReleased Function keyReleased = (function(){ keyReleased = function(){ if(key.code !== 65535){ keys[key.toString()] = false; } else { keys[keyCode] = false; } }; return keyReleased; })(); //} //End of Code
Folds	40,95,99,896
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgO7LgtPqCQw
Votes	247
Spin-Offs	20
Type	PJS
Width	600
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	.oC daehworrA
Author Name	MoDavid
Author ID	kaid_1088841568924126317052037
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739291381576
Updated	10 months ago, 1739391704706
Source Deleted	unknown