Viewing Program

Program Data

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

Title	Animated Blocks As Well!
ID	6125330424004608
Created	9 years ago, 1469372635583
Updated	8 years ago, 1502484112044
Code	var fastComputer = false;//change this to true for a better frameRate var oldTV = false;// change this to true to make it look like an old TV /*************************************** * I feel like Brian French! * * Sorry for the messy code if you try and look at it. * * This uses a process called raycasting to generate the 3d imagery. To do this, "rays" are sent out from the characters position. When they hit a wall, a vertical line is drawn in that location at a certain height, depending on the distance the ray traveled. * * For a tutorial, visit http://lodev.org/cgtutor/raycasting.html * * It is written for C++, but the sytax is easily converted. * * There is a very similar program here: https://www.khanacademy.org/computer-programming/jack-raycaster-new-fake-3d/1163555850 * * Although I used the same map (which was originally gotten from lodev.org), I did not copy any of the code. The program did help my understanding of how to go about casting rays however. * * As you can see, the program puts textures on the walls. To load a texture into the program, call render.loadTexture(), with a function as the parameter which takes an x and y input and returns a 3 byte hexidecimal woth a color such as 0xrrggbb. * * To load a picture on to a wall, call render.loadPict() with the picture as the parameter. * * All pictures and textures are 64 x 64. * * to make an animated block, specify a number after the parameter in the tex/pict loader which refers to the number on which you would call the block on the map. * * To call pictures and textures on the map, use a number from 1 to ..., referring to the order in which you loaded the pic/tex. * * TO DO: * [X] textured walls * [X] moving textures * [X] anti-aliasing tops and bottoms of walls * [ ] textured floors * [ ] doors * [ ] other "beings" walking around * [ ] non-cubes * * **************************************/ textAlign(CENTER, CENTER); / 1, 2, 3 are various types of stone walls so they don't look to repetitive 4 is oh noes 5 is just plain awesome 6 is Spunky Sam 7 is a brick wall 8 is an animated water drop / blue circle / var mapped = [ [1,2,3,2,1,3,1,2,3,1,2,1,3,3,1,2,2,1,3,2,1,3,1,2], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2], [3,0,0,0,0,0,7,7,7,7,7,0,0,0,0,4,0,6,0,4,0,0,0,2], [2,0,0,0,0,0,7,0,0,0,7,0,0,0,0,0,0,0,0,0,0,0,0,3], [2,0,0,0,0,0,7,0,0,0,7,0,0,0,0,6,0,0,0,6,0,0,0,1], [3,0,0,0,0,0,7,0,0,0,7,0,0,0,0,0,0,0,0,0,0,0,0,2], [3,0,0,0,0,0,7,7,0,7,7,0,0,0,0,4,0,6,0,4,0,0,0,3], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2], [2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2], [1,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,0,0,0,0,0,0,0,1], [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3], [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3], [2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,3,1,2,3,1,1,2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [2,1,0,1,0,0,0,0,3,0,0,0,0,0,0,0,5,5,0,0,0,0,0,2], [1,2,0,0,0,0,6,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [3,1,0,2,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3], [1,2,0,3,2,1,3,1,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [2,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2], [1,1,2,2,1,3,1,3,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,2,1,3,2,1,2,3,1,2,2,1,3,2,1,3,3,1,2,1,1,3,2,1] ];//the map containing the data and block locations. 0 is an empty space. numbers explained above frameRate(fastComputer? 60: 20); var keys = {}; keyPressed = function() {keys[keyCode] = true;}; keyReleased = function() {keys[keyCode] = false;};//sees which keys have been pressed var render = { quality: oldTV? 100: 400,//how many rays are sent out from the character x: 22,//position of character according to the map y: 12,//see above ^^^ dx: -1,//direction vector to be added onto position dy: 0,// ^^^ px: 0,//the camera plane py: -0.66,//^^^ /********************************* * The camera plane is like a window in front of and perpendicular to the character. * It controls how large the field of vision is, or how much the player sees on the screen. * Plane(-x, y)\_____\|_____/Plane(x, y) \ \| / * \ \| / * ray 1 ==> \ \| / <== ray 2 * \ \| / * \\|/ * Player(x, y) * * The plane is also used to calculate the direction vector of a ray. * * ray 1 dir X = -Plane(x) - Player(x) * ray 2 dir X = Plane(x) - Player(x) * *********************************/ rayLength: 15,//how far you can see in front of you before it fades to black h: height,//the height of a block ms: fastComputer? 0.07: 0.2,//movement speed (how many blocks forward per second rs: fastComputer? 3: 8,//rotational speed tex: [],//array holding textures loadTexture: function(func, which) {//loads a texture into render.tex[] which = which \|\| render.tex.length; var t = []; for (var i = 0; i < 4096; i++) {//textures are 64 64 squares (4096 values in all) var v = func(i & 63, i>>6);// v holds the color in hex format which it gets when inputing the x and y position of a pixel into the function t.push(v);//pixel values are stored in vertical stripes instead of horizantal for ease of use } if (which >= render.tex.length) { render.tex.push([t]); } else { render.tex[which].push(t); } }, loadPict: function(pic, which) {//loads a picture instead of texture image(pic, 0, 0, 64, 64);//draws pixel to screen loadPixels(); var pi = imageData.data; var t = []; for (var i = 0; i < 4096; i++) { var n = (i &63)400 + (i >> 6) << 2;//finds the pixel in the imageData.data array t.push((pi[n] << 16) \| (pi[n + 1] << 8) \| pi[n + 2]);//added to t[] in hex format } updatePixels(); if (which >= render.tex.length) { render.tex.push([t]); } else { render.tex[which].push(t); } }, handleKeys: function(mapped) {//controls movement when arrows are pressed if (keys[RIGHT]) {//rotates right var old = render.dx;//directional vector rotated render.dx = render.dx cos(render.rs) - render.dy * sin(render.rs); render.dy = old * sin(render.rs) + render.dy * cos(render.rs); old = render.px;//camera plane rotated (It stays perpendicular to the player) render.px = render.px * cos(render.rs) - render.py * sin(render.rs); render.py = old * sin(render.rs) + render.py * cos(render.rs); } else if (keys[LEFT]) {//rotates left, same as above var old = render.dx; render.dx = render.dx * cos(-render.rs) - render.dy * sin(-render.rs); render.dy = old * sin(-render.rs) + render.dy * cos(-render.rs); old = render.px; render.px = render.px * cos(-render.rs) - render.py * sin(-render.rs); render.py = old * sin(-render.rs) + render.py * cos(-render.rs); } if (keys[UP]) {//moves forwards if there is no block render.x += mapped[floor(render.y)][floor(render.x + render.dxrender.ms)]>0? 0: render.dxrender.ms; render.y += mapped[floor(render.y + render.dyrender.ms)][floor(render.x)]>0? 0: render.dyrender.ms; } else if (keys[DOWN]) {//moves backwards if there is no block render.x -= mapped[floor(render.y)][floor(render.x - render.dxrender.ms)]>0? 0: render.dxrender.ms; render.y -= mapped[floor(render.y - render.dyrender.ms)][floor(render.x)]>0? 0: render.dyrender.ms; } }, rayCast: function(mapped) {//casts rays out from character to find blocks (the 3d affect is here) if (!loadPixels) {return;}//not quite sure what this does, but I people use it when accessing imageData loadPixels(); var p = imageData.data; f: for (var i = 0; i < render.quality; i++) {//loops through the rays var cx = 2 * i / render.quality - 1;//defines CameraX, or how far along the camera plane the ray is var rx = render.x, ry = render.y;//the ray coordinates var rdx = render.dx + render.px * cx, rdy = render.dy + render.py * cx;//ray directional vector var mx = floor(rx), my = floor(ry);//what square of the map the ray resides in var sdx, sdy;//how far away the nearest map squares are up and to the side //^^^ those variabes contain the length of the ray, not just an X or Y distance var ddx = sqrt(1 + (rdy * rdy) / (rdx * rdx)), ddy = sqrt(1 + (rdx * rdx) / (rdy * rdy)); //^^^ how far long the ray is from one map square to the next when talking about across and vertically var sx, sy, s, h = 0;//stepX and stepY for what direction the rays move in (-1, 1) //s = side, or what side the block is hit. h = hit, or if the ray hits a block if (rdx<0) {//updats sx and sy, as well as calculates sdx and sdy sx = -1; sdx = (rx - mx) * ddx; } else { sx = 1; sdx = (mx + 1.0 - rx) * ddx; } if (rdy<0) { sy = -1; sdy = (ry - my) * ddy; } else { sy = 1; sdy = (my + 1.0 - ry) * ddy; } while (h===0) {//finds which block the ray hits using the DDA algorithm if (sdx < sdy) {//if the hasn't hit as many blocks in the x direction as y direction... sdx += ddx; //remember, sdx and sdy contain how long the ray is //you don't want the program to only check blocks the ray hits in a single direction however. Which is why you have the if-statement mx += sx;//This means the while loop basically checks which squares the ray goes through s = 0;//explained when defined } else { sdy += ddy; my += sy; s = 1; } if (mx <0 \|\| mx >= mapped[0].length \|\| my < 0 \|\| my >= mapped.length) { continue f;//if the ray is out of bounds, don't look for blocks. } if (mapped[my][mx] > 0) {//check for blocks in the map square h = 1; } } var wd;//the distance the ray traveled perpendicular to the camera plane //The fisheye effect is created if you just use the total distance the ray traveled if (s === 0) { wd = abs((mx - rx + (1 - sx) / 2) / rdx); } else { wd = abs((my - ry + (1 - sy) / 2) / rdy); } var num = mapped[my][mx] - 1, num2 = frameCount % render.tex[num].length;//what texture should be used on the block? var wx;//what pixel of the texture in the x direction was hit? if (s === 0) { wx = ry + wdrdy; } else { wx = rx + wdrdx; } wx -= floor(wx);//number between 1 and 0 wx = floor(wx * 64);//64 is texture width if (s === 0 && rdx > 0) {// 'invert' wx in these conditions, or you'd get a backwards picture wx = 63 - wx; } if (s === 1 && rdy < 0) { wx = 63 - wx; } wx = 63 - wx; var h = abs(render.h/wd);//the height of the wall for (var y = max(floor(height / 2 - h / 2), 0); y < height; y++) {//draw texture of wall and floor if (y <= floor(height / 2 + h / 2)) {//if drwing wall: var wy = floor(map(y - height / 2 + h / 2, 0, h, 0, 63));//caluclate which pixel in y direction of texture to draw var n = (y * 400 + i * (width / render.quality)) << 2, c = render.tex[num][num2][(wx<<6) + wy], l = 1 - wd / render.rayLength;//n is the pixel at (i, y) on the screen's location in the imageData if (y === floor(height / 2 - h / 2)) { l = ceil(-h / 2) + h / 2; } if (y === floor(height / 2 + h / 2)) { c = lerpColor((100 l << 8), c, h / 2 - floor(h / 2)); } //c is the color of the certain texture at the location (wx, wy) //l is the lighting p[n] = ((c >> 16) & 255)l;//take the color out of hex format and dim it by l p[n + 1] = ((c >> 8) & 255)l; p[n + 2] = (c & 255)l; } else {//draw the flooring var pd = 1/((2y - height) / render.h), n = (y * 400 + i * (width / render.quality)) << 2, l = 1 - pd / render.rayLength;//pd is pointDistance, or how far away the point is, based on it's height //n is the pixels position in p[] // l is lighting p[n + 1] = 100l;//green is brightest at 100 p[n] = p[n + 2] = 0;// r and b values are 0 } } } updatePixels(); } }; var ms, loadTex = [], i = 0, o = 0; { loadTex.push({type: 1, tex: [function(x, y) {var n = floor(noise(x/10, y/10)255);return (n << 16)\|(n << 8)\|n;}]}); loadTex.push({type: 1, tex: [function(x, y) {var n = floor(noise(x/10 + 6.4, y/10)255);return (n << 16)\|(n << 8)\|n;}]}); loadTex.push({type: 1, tex: [function(x, y) {var n = floor(noise(x/10 + 12.8, y/10)255);return (n << 16)\|(n << 8)\|n;}]}); loadTex.push({type: 2, tex: [getImage("avatars/spunky-sam")]}); var c = createGraphics(64, 64, P2D); c.background(255); c.fill(0); c.textAlign(CENTER, CENTER); c.text("AWESOME", 32, 32); loadTex.push({type: 2, tex: [c]}); loadTex.push({type: 2, tex: [getImage("creatures/OhNoes")]}); var pic = createGraphics(64, 64, P2D); pic.background(200); pic.noStroke(); pic.fill(196, 59, 0); for (var n = 0; n < 8; n++) { for (var j = 0; j < 5; j++) { pic.rect(j16 - (n%2)8, n8, 15, 7); } } loadTex.push({type: 2, tex: [pic]}); var t = []; for (var k = 0; k < 19; k++) { var c = createGraphics(64, 64, P2D); c.background(255); c.fill(0, 89, 255); c.noStroke(); c.ellipse(32, k4 - 5, 10, 10); t.push(c); } loadTex.push({type: 2, tex: t}); }//load the textures into the render object with a loading screen. If you want to use the render object, you can ignore this draw = function() { ms = millis(); if (i < loadTex.length) { while (millis() - ms < 10 && i < loadTex.length) { background(255); if (loadTex[i].type === 1) { render.loadTexture(loadTex[i].tex[o], i); } else if (loadTex[i].type === 2) { render.loadPict(loadTex[i].tex[o], i); } o++; if (o >= loadTex[i].tex.length) { i++; o = 0; } } background(255); fill(0); text("LOADING", 200, 200); } else { background(0); render.handleKeys(mapped); render.rayCast(mapped); //println(millis() - ms); } };
Folds	274,307,309,334
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLiAyt7wCgw
Votes	195
Spin-Offs	17
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	{"id":"6744257221492736","title":"Raycasting (3d first person technique)","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	questinmcquilkin
Author Name	Right0nQ
Author ID	kaid_311813125541884177111583
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739453800731
Updated	10 months ago, 1739453800731
Source Deleted	unknown